9 meilleures bibliothèques d’animation JavaScript et CSS pour les concepteurs d’interface utilisateur

Aujourd’hui, nous allons parcourir 9 bibliothèques d’animation gratuites et bien codées les mieux adaptées au travail de conception d’interface utilisateur – couvrant leurs forces et leurs faiblesses, et quand choisir chacune d’entre elles.

La conception Web frontale a connu une révolution au cours de la dernière décennie. À la fin des années 2000, la plupart d’entre nous concevaient encore des mises en page de magazines statiques. De nos jours, nous construisons des « machines numériques » avec des milliers de pièces redimensionnées, coordonnées et mobiles.

Tout simplement, les grands concepteurs d’interface utilisateur doivent aussi être de grands animateurs – avec une solide compréhension pratique des techniques et de la technologie d’animation Web.

Gardez à l’esprit que nous examinons chaque bibliothèque du point de vue d’un concepteur d’interface utilisateur averti en matière de code, et non en tant que développeur « gourou du code ». Certaines de ces bibliothèques sont du pur CSS. D’autres sont JavaScript, mais aucun ne nécessite plus qu’une compréhension de base de HTML/CSS et/ou JavaScript pour être utile.

Notre liste des 9 meilleures bibliothèques d’animation

1. Lottie.js: Idéal pour les animations vectorielles à n’importe quelle échelle
2. Animer.css: Idéal pour les petites manipulations ciblées de l’interface utilisateur
3. GreenSock (GSAP): Plate-forme d’animation complète mais gigantesque capable de tout, des jeux au développement d’applications
4. AnimeJS
5. Animations magiques
6. ZDog
7. CSShakeComment
8. Hover.CSS
9. Anis

Soyons clair : Lottiejs est très différent taper de la bibliothèque d’animation aux huit autres de cette liste. Néanmoins, nous ne pensons pas que les concepteurs UI/UX puissent se permettre de l’ignorer.

La création d’une animation Lottie s’apparente davantage à la création d’une production vidéo. Vous aurez besoin d’un outil d’animation tiers capable d’exporter un fichier JSON « prêt pour Lottie ». En fait, le format Lottie a été spécifiquement conçu pour rendre le Adobe After Effects les animations fonctionnent efficacement sur le web et sur mobile. Cela rend les animations Lottie rapides, efficaces, faciles à scénariser et souvent très belles.

Bien que Lottie ait été conçue comme une extension de Adobe After Effects, il existe de nombreuses alternatives (sans doute meilleures) « natives Lottie » pour créer des animations Lottie. Ceux-ci inclus:

Lottie utilise des « lecteurs d’animation » distincts optimisés pour le Web, iOS et Android respectivement. La base de code Lottie est développée et maintenue par AirBnb et a une communauté super enthousiaste et passionnée qui grandit derrière elle.

• Créateur: AirBnb
• Publié: 2015
• Popularité:
• La description: « Lottie est une bibliothèque iOS, Android et React Native qui rend les animations After Effects en temps réel. »
• GitHub: Lottie Web – Lottie iOS – Lottie androïde
• Licence:

Animer.css est l’une des bibliothèques d’animation CSS les plus petites et les plus faciles à utiliser. C’est raffiné, efficace, bien entretenu depuis sa sortie en 2013.

L’application de la bibliothèque Animate à votre projet est aussi simple que de lier le CSS et d’ajouter les classes CSS requises à vos éléments HTML. Bien sûr, vous pouvez également utiliser jQuery ou vanilla JS pour déclencher les animations sur un événement particulier si vous préférez.

• Créateur: Daniel Éden
• Publié: 2013
• Version actuelle: v4.1.1
• Popularité:
• La description: « Une bibliothèque multi-navigateurs d’animations CSS. Aussi facile à utiliser qu’une chose facile.
• Taille de la bibliothèque : 70 Ko (minifié)
• GitHub: https://github.com/daneden/animate.css
• Licence:

Au moment de la rédaction, c’est toujours l’une des bibliothèques d’animation CSS les plus populaires et les plus utilisées et son fichier minifié est suffisamment petit pour être également inclus dans les sites Web mobiles.

Animate.css est toujours en cours de développement. Méfiez-vous de la version 4, qui prendra en charge les propriétés personnalisées CSS (ou variables CSS). C’est l’une des bibliothèques d’animation les plus simples et les plus robustes et nous n’hésiterons pas à l’utiliser dans n’importe quel projet.

GreenSock (ou GSAP – GreenSock Animation Platform) est le couteau suisse de l’animation web. Pour des animations élégantes et sophistiquées qui fonctionnent bien, GSAP est idéal. Vous pouvez animer n’importe quoi, des éléments DOM aux SVG, et son écosystème comprend des plugins incroyables qui vous permettent de faire toutes sortes de choses amusantes, par exemple, transformer des SVG, dessiner des traits SVG, des fonctionnalités de défilement, de brouillage de texte, et bien plus encore. Il est rapide, compatible avec tous les navigateurs et sa syntaxe est simple et intuitive.

• Version actuelle: 3.10.4
• Popularité:
• La description: « Une animation ultra-performante de qualité professionnelle pour le Web moderne. »
• Taille de la bibliothèque: 313 ko (dossier minifié contenant le téléchargement léger de la librairie)
• GitHub: https://github.com/greensock/GreenSock-JS/
• Licence: licence standard gratuite, mélangée à un modèle payant pour des fonctionnalités et des plugins spécifiques. Voir le page de licence pour plus de détails.

GSAP est modulaire, vous pouvez donc choisir les parties de la bibliothèque dont vous avez besoin pour votre projet, ce qui est idéal pour garder la taille du fichier sous contrôle.

Si vous recherchez quelque chose de puissant mais intuitif avec une documentation impressionnante et un support communautaire, je vous recommanderais certainement d’essayer cette bibliothèque d’animation dans votre prochain projet. Vous serez enthousiaste.

AnimeJS est le plus récent ajout à notre liste, mais a gagné un grand nombre de convertis depuis sa création. Il est incroyablement polyvalent et puissant et ne serait pas déplacé pour alimenter les animations de jeux HTML. La seule vraie question est « est-ce exagéré pour de simples applications Web ?”

Peut-être. Mais comme il est aussi rapide, petit et relativement facile à apprendre, il est difficile de lui trouver un défaut.

AnimeJS est décrit comme un «bibliothèque d’animation JavaScript légère avec une API simple mais puissante. Il fonctionne avec les propriétés CSS, SVG, les attributs DOM et les objets JavaScript”. Plutôt génial.

Ce projet est disponible sur GitHub.

• Créateur: Julien Garnier
• Publié: 2016
• Version actuelle: v3.2.1
• Popularité:
• La description: « Anime.js est une bibliothèque d’animation JavaScript légère avec une API simple mais puissante. »
• Taille de la bibliothèque: 16.8 ko (minifié)
• GitHub: https://github.com/juliangarnier/anime
• Licence:

Plus impressionnant encore, Anime.JS possède une «documentation» époustouflante qui illustre le code HTML, JavaScript et des exemples de travail dans un bel environnement d’application.

En bref, si vous êtes à l’aise avec une solution d’animation JavaScript, il est difficile de trouver des raisons d’ignorer AnimeJS.

Magic Animations est l’une des bibliothèques d’animation les plus impressionnantes disponibles. Il a de nombreuses animations différentes, dont beaucoup sont tout à fait uniques à cette bibliothèque. Comme avec Animate.css, vous pouvez implémenter Magic en important simplement le fichier CSS. Vous pouvez également implémenter les animations à l’aide de jQuery. Ce projet propose une application de démonstration particulièrement cool.

• Version actuelle: 1.4.1
• Popularité:
• La description: « Animations CSS3 avec effets spéciaux »
• Taille de la bibliothèque: 54.9 ko (minifié)
• GitHub: https://github.com/miniMAC/magic
• Licence:

La taille du fichier de Magic Animation est modérée par rapport à Animate.css et il est connu pour ses animations de signature, telles que les effets magiques, les effets insensés et les effets de bombe.

Si vous cherchez quelque chose qui sort un peu de l’ordinaire, allez-y. Vous ne serez pas déçu.

Zdog est une bibliothèque JavaScript pour la création de conceptions et d’animations 3D par David DeSandro. Avec son aide, vous pouvez dessiner vos conceptions en utilisant le <canvas> élément ou SVG et donnez-leur vie dans des animations fluides avec un effet 3D élégant.

• Version actuelle: 1.1.0
• Popularité:
• La description: « Rond, plat, design
  moteur pseudo-3D pour canvas & SVG »
• Taille de la bibliothèque: 28 ko (minifié)
• GitHub: https://github.com/metafizzy/zdog
• Licence:

Si vous êtes familier avec JavaScript, vous apprendrez assez rapidement les bases de Zdog : il possède une API déclarative simple, d’excellents documents et de nombreuses ressources d’apprentissage. Consultez mon introduction à Zdog sur Site Point.

CSShakeComment fournit exactement ce qu’il dit sur la boîte – une bibliothèque CSS conçue spécifiquement pour secouer les éléments de votre page Web. Comme vous vous en doutez, il existe un certain nombre de variantes disponibles pour secouer vos composants Web.

Apple a popularisé le trope de l’interface utilisateur consistant à secouer vigoureusement un élément de l’interface utilisateur (une boîte de dialogue, un modal ou une zone de texte) lorsqu’un utilisateur entre une réponse incorrecte, imitant une personne secouant la tête. CSShake fournit une gamme d’animations « shake » intéressantes et les variations ne manquent pas dans cette bibliothèque.

Hover.css est une bibliothèque d’animation CSS conçue pour être utilisée avec des boutons et d’autres éléments de l’interface utilisateur de votre site Web. Il a de très belles transitions 2D, ainsi qu’une foule d’autres animations bien conçues.

• Version actuelle: 2.3.2
• Popularité:
• La description: « Appliquez facilement à vos propres éléments, modifiez ou utilisez simplement pour l’inspiration. »
• Taille de la bibliothèque: 93.0 ko (minifié)
• GitHub: https://github.com/IanLunn/Hover
• Licence: licence personnelle/open-source gratuite et licence commerciale payante, selon les besoins. Pour plus de détails, lisez le section licences sur GitHub.

Hover.css est le mieux adapté pour animer des éléments de page discrets tels que des boutons, des logos, des composants SVG ou des images en vedette plutôt que des animations de page plus grandes et complexes. On peut soutenir que ses effets d’animation les plus notables sont ses bulles et ses boucles distinctives.

Notre bibliothèque finale est intéressante pour son approche unique. Anis est une bibliothèque d’animations qui vous permet d’ajouter des animations aux éléments dans une structure simple de type « phrase ». Prenez le format suivant :

Si Cliquez sur, Sur Carré, Fais oscillation animée À .container-box

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

Si vous n’êtes pas très familiarisé avec JavaScript, cela pourrait bien être un excellent moyen d’entrer dans les mouvements chorégraphiés JS.

• Créateur: Dariel Noël
• Publié: 2014
• Version actuelle: 0.9.3
• Popularité:
• La description: « Une bibliothèque pour élever votre conception Web sans codage. »
• Taille de la bibliothèque: 10.5 ko
• GitHub: https://github.com/anijs/anijs
• Licence:

AniJS est une bibliothèque avec une taille très raisonnable compte tenu de ses fonctionnalités. Le format qu’il utilise pour la mise en œuvre est assez original et différent par rapport aux autres bibliothèques d’animation (que beaucoup d’autres pourraient trouver non conventionnelles).

Néanmoins, cette bibliothèque vaut la peine d’être essayée, au moins une fois pour vos projets.

Quelle bibliothèque choisir ?

Il existe de nombreuses bibliothèques d’animation prêtes à être implémentées dans votre projet. Ceux énumérés ci-dessus sont quelques-uns avec la meilleure combinaison de sophistication et de stabilité.

Si vous recherchez une solution CSS facile à mettre en œuvre et bien testée, Animer.css est probablement l’option « bang for buck » la plus polyvalente disponible.

Si vous recherchez une base JavaScript plus complète et plus puissante pour alimenter des jeux en ligne, des simulateurs, des modèles et d’autres applications sophistiquées, GreenSock et AnimeJS sont très difficiles à diviser.

Si votre style artistique est fortement basé sur le vecteur et que vous disposez d’un outil d’animation compatible avec Lottie, il est difficile d’ignorer le mouvement fluide et l’efficacité de Lottie.

Bien que l’utilisation d’une bibliothèque d’animations dans votre application Web puisse certainement améliorer l’interactivité, en faire trop va à l’encontre de l’objectif et déroute souvent l’utilisateur. Soyez prudent et utilisez les animations judicieusement.

Utilisez-vous des bibliothèques d’animation pour vos projets ? Quelles sont vos bibliothèques d’animation préférées ?