Les meilleurs librairies d'animations de 2016

Le web est rempli d’animations étonnantes et hypnotiques. Aujourd’hui, les développeurs utilisent une grande variété de techniques pour créer de l’engagement, distraire, informer les internautes et l’animation nous aide à accomplir cet objectif.
Il y a 10 ans, les développeurs utilisaient Adobe Flash pour ajouter de l’interactivité à leurs sites, mais avec l’avènement d’HTML5, CSS3 et une myriade de librairies Javascript, Flash a (heureusement) disparu du paysage.
Il existe une grande quantité de librairie d’animation et je vais vous en présenter 9, en fonction de 3 critères :  simplicité de mise en oeuvre, fonctionnalités offertes et popularité.

Animate.css

animate
Animate.css est une des plus efficace et facile à utiliser parmi les librairie CSS disponibles. Elle est facile à mettre en oeuvre puisqu’il suffit d’ajouter les classes CSS aux éléments HTML.

  • Créateur: Daniel Eden
  • Date de publication: 2013
  • Version Actuelle: 3.4.0
  • Popularité: 25,000+ étoiles sur GitHub
  • Description: “Une librairie d’animation CSS cross-browser. Simple comme bonjour.”
  • Taille de la librairie: 55.2 kB
  • GitHub: https://github.com/daneden/animate.css
  • License: MIT

Animate.css est l’une des plus populaire et plus largement utilisée et suffisamment légère pour être utilisée dans les sites mobiles. Personnellement, je pense que c’est une des meilleures librairies d’animation et je vous la recommande pour votre prochain projet.

Bounce.js

bounce
Bounce.js est un outil et une librairie Javascript qui se concentre sur les animation “rebondissantes” pour votre site web. Bounce.js est un projet Open-source avec son code source sur GitHub.

  • Créateur: Tictail
  • Date de publication: 2014
  • Version Actuelle: 0.8.2
  • Popularité: 3,500+ étoiles sur GitHub
  • Description: “Créer de belle animations CSS3 powered en un éclair.”
  • Taille de la librairie: 16 kB
  • GitHub: https://github.com/tictail/bounce.js
  • License: MIT

Bounce.js est une bonne librairie d’animation qui inclue environ dix animations prédéfinies, ce qui explique sa légèreté. Comme animate.css, les animations sont smooth et sans défaut. Recommandé si vous n’avez pas besoin d’une grande variété d’animation et que la légèreté de la librairie est un atout pour votre projet.

Magic Animations

magic
Magic Animations est l’une des librairies les plus impressionante. Il y a de nombreuse animations dont certaines sont complètements uniques. Comme pour Animate.css, vous pouvez implémenter Magic en important simplement le ficher CSS. Ce projet propose une Démo particulièrement réussie.

  • Magic Animations
  • Créateur: Christian
  • Date de publication: 2014
  • Version Actuelle: 1.1.0
  • Popularité: 3,400+ stars on GitHub
  • Description: “Animations CSS3 avec effets spéciaux
  • Taille de la librairie: 36.5 kB
  • GitHub: https://github.com/miniMAC/magic

La taille des animation magic reste raisonnable comparé à Animate.css et est devenu célèbre pour certains effets spéciaux comme magic effects, foolish effects et bomb effects.
Si vous cherchez quelque chose qui sorte de l’ordinaire, je vous recommande sans hésiter de jeter un coup d’oeil pour votre prochain projet. Vous ne serez pas déçu.

DynCSS

dyncss
DynCSS est le genre de librairie d’animation que vous pourriez aimer utiliser dans vos sites appliquant l’effet parallax. Pour vous faire une idée de ce qu’elle vous permettra de faire, jetez un coup d’oeil à cette demo.

  • Créateur: Vittorio Zaccaria, l’auteur de “Notes for Designing Better Mobile Application Interfaces” et “Developing 3D Games with Unity 5”
  • Date de publication:  2014
  • Version Actuelle: 0.8.1
  • Popularité: 190+ stars on GitHub
  • Description: “Donnez vie à votre site avec Dynamic CSS.”
  • GitHub: https://github.com/vzaccaria/DynCSS

DynCSS est une librairie simple qui peut devenir populaire dans un futur proche, mais qui est encore un projet récent comme en témoigne le nombre d’étoile sur Github. Une des features cool est que la librairie propose d’animer des éléments en fonction du scrolling, ce que Vittorio démontre élégamment sur la homepage de DynCSS (qui fait une superbe  utilisation du parallax).

CSShake

cssshake
CSShake fait exactement ce qui est indiqué sur la boite, une librairie CSS pour secouer les élément de votre webpage. Comme on pourrait s’en douter, il existe de nombreuses variations pour secouer tous les composants web

  • Créateur: Lionel
  • Date de publication: 2014
  • Popularité: 2,000+ étoiles sur GitHub
  • Description: “Classes CSS pour bouger ton DOM!
  • Taille de la librairie: 78.8 kB
  • GitHub: https://github.com/elrumordelaluz/csshake
  • License: MIT

Apple a popularisé la tendance UI de secouer vigoureusement les éléments UI (boite de dialogue, fenêtre modale, textbox) quand l’utilisateur entre une réponse incorrecte – faisant référence à une personne secouant la tête pour dire “non”. CSShake propose un panel d’intéressantes “shake” animations et la librairie ne manque pas de variantes.
Bien que cette librairie soit plus populaire que DynCSS, j’ai le sentiment que la taille n’est pas justifiée par les fonctionnalités qu’elle apporte en plus. Bien que les animations soient bonnes, j’ai peine à imaginer des cas ou il n’y aurait pas besoin d’inclure d’autres librairies pour tous les effets non-shaking.
Mais peut-être que je manque juste d’imagination ?

Hover.css

hover
Hover.css est une librairie d’animation CSS conçue pour utiliser avec les boutons et autres composants UI de votre site web. Elle propose de belles transitions 2D, avec une myriade d’animations bien pensées.

  • Créateur: Ian Lunn
  • Date de publication: 2014
  • Version actuelle: 2.0.2
  • Popularité: 10,700+ étoiles sur GitHub
  • Description: “Appliquez facilement à vos projets, modifiez, ou …juste pour vous inspirer.”
  • Taille de la librairie: 104.2 kB
  • GitHub: https://github.com/IanLunn/Hover
  • License: MIT

Hover.css est particulièrement adaptée pour animer les élements de page tels que les boutons, les logos, composants SVG ou images ainsi que c’est mentionné sur la homepage de la librairie. Elle dispose d’une liste exhaustive d’animations ce qui explique sa taille importante (je pense d’ailleurs que sa taille pourrait-être encore optimisée). L’effet le plus remarquable est sans doute les speech bubbles et les boucles.

Velocity.js

velocity
Velocity.js est une librairie JavaScript sophistiquée pour les animation comme Fade & Slide, Scroll, Stop, Finish, Reverse et beaucoup d’autres.
Elle a une grande liste d’utilisateurs avec des entreprises comme Tumblr, WhatsApp, MailChimp, Scribd, Gap et HTC dans son tableau de chasse.

  • Créateur: Julian Shapiro
  • Date de publication: 2014
  • Version actuelle: 1.2.2
  • Popularité: 8,700+ étoiles sur GitHub
  • Description: “Animations JavaScript rapides.”
  • Taille de la librairie:  34.8 kB
  • GitHub: https://github.com/julianshapiro/velocity
  • License: MIT

Velocity n’est pas forcément adaptée à tous dans la mesure ou c’est un moteur d’animation Javascript et que ce moteur d’animation Javascript utilise la même API que jQuery $.animate(). Elle fonctionne avec et sans la présence de jQuery. La raison pour laquelle il me semblait nécessaire de l’inclure dans cette liste est qu’elle est incroyablement rapide et propose l’animation de couleurs, les transformations, les loops, easing – c’est le meilleur de  jQuery et CSS transitions combiné.

favico.js

favico
Flavico est conçue pour un cas d’utilisation très précis : cette librairie vous permet d’ajouter facilement des animation badges à vos favicons, les badges étants quelque chose de potentiellement très varié. Les webapp qui doivent notifier à leurs utilisateurs la présence de contenus mis à jours (par exemple: nouveaux tweets, emails, posts, articles, etc) pourront faire un très bon usage de cette librairie élégante. Allez faire un tour sur leur site pour mieux comprendre ce que ce framework permet de faire.

  • Créateur: Miroslav Magda
  • Date de publication: 2013
  • Version actuelle: 0.3.9
  • Popularité: 4,900+ étoiles sur GitHub
  • Description: “Utilisez vos favicons avec des badges, images ou videos.”
  • Taille de la librairie: 8.9 kB
  • GitHub: https://github.com/ejci/favico.js
  • License: MIT

Favicon.js est plus un utilitaire d’animation adapté aux badges, images et vidéos. La taille de la librairie est bien optimisée pour l’utilisation en production.

AniJS

La prochaine librairie est intéressante de par son approche unique. AniJS est une librairie d’animation qui vous permet d’ajouter des animations aux éléments en utilisant un DSL (Domain-Specific Language) comme suit :

If click, On Square, Do wobble animated To .container-box

<div data-anijs=”if: click, do: flipInY, to: .container-box”></div>

  • Créateur: anijs
  • Date de publication: 2014
  • Version actuelle:  0.9.3
  • Popularité: 2,500+ étoiles sur GitHub
  • Description: “Une librairie pour augmenter votre webdesign sans coder.”
  • Taille de la librairie: 10.5 kB
  • GitHub: https://github.com/anijs/anijs
  • License: MIT

AniJS est une librairie d’une taille raisonnable si l’on regarde ses fonctionnalités. Le format de mise en oeuvre est assez différent si l’on compare aux autres libraires d’animation (lesquelles paraissent parfois obscures). Cette librairie vaut la peine de l’essayer, au moins une fois pour vos projets. Il est vrai qu’elle paraît toute petite par rapport à la concurrence mais elle a le potentiel de grandir dans l’avenir.

Conclusion

Il existe de nombreuses librairies qui attendent d’être mises en oeuvre dans vos projets. Celles qui sont présentées ci dessus sont une sélection des meilleures combinaisons entre sophistication et stabilité. Bien qu’utiliser une librairie d’animation dans vos projets pourra certainement améliorer l’interactivité, en cas d’abus, l’animation produit l’effet inverse de celui attendu et perturbe l’utilisateur. Soyez prudent et utilisez la judicieusement.
Et vous quelles sont vos librairies d’animation préférées ?
Article Original de Tanay Pant
www.sitepoint.com/top-9-animation-libraries-use-2016/
Traduit de l’anglais par JS Staff
Antoine @JS-Republic
 
[separator type=”” size=”” icon=”star”] [actionbox color=”default” title=”” description=”JS-REPUBLIC est une société de services spécialisée dans le développement JavaScript. Nous sommes centre de formation agréé. Retrouvez toutes nos formations techniques sur notre site partenaire dédié au Training” btn_label=”Nos formations” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external=”1″]