Les librairies d’animation web sont de véritables mines d’or pour les webdesigners et les développeurs qui souhaitent créer des interfaces dynamiques et modernes, tout en proposant une expérience utilisateur vraiment unique.

Qu’il s’agisse d’animations CSS ou JavaScript, les possibilités sont nombreuses sur internet : voici donc une sélection de bibliothèques qui proposent une grande variétés d’effets et de styles.

Animate.css

Grand classique des librairies d’animation CSS, Animate.css vous permet d’implémenter très facilement une grande variété d’animations pour apporter du dynamisme à tous types d’éléments, et en particulier le texte.

Hover.css

Hover.css permet d’appliquer une myriade d’effets qui s’activent lors du survol d’un élément avec la souris (“hover”) : changement de taille, coloration de l’arrière-plan, mouvement… Vous trouverez forcément ce qu’il vous faut dans cette librairie très fournie.

Magic Animations CSS3

Magic Animations propose des effets plus travaillés et “expérimentaux” que les précédents outils, avec des mouvements multidirectionnels ou en perspective : des animations résolument modernes qui peuvent apporter un véritable plus à certains de vos projets.

Animate on Scroll

Particulièrement utile pour les sites one-page, Animate on Scroll permet de faire apparaître des éléments (blocs de texte, images, etc.) au fur et à mesure que l’utilisateur fait défiler la page vers le bas. Vous pouvez facilement paramétrer la direction et la vitesse de chaque animation, pour un scrolling agréable et fluide.

Tuesday

Tuesday est une bibliothèques d’animation très riche, qui contient un grand choix d’effets divisés en deux catégories : les entrées et les sorties, qui permettent respectivement de faire apparaître ou disparaître un élément.

AniJs

Idéale pour les développeurs et webdesigners souhaitant créer des interfaces web dynamiques, la librairie AniJS permet d’animer très simplement un menu, des onglets, ou encore un accordéon.

Anime.js

Anime.js vous permet d’animer à peu près n’importe quoi (HTML, JS, CSS, SVG) et d’ajouter des effets et des mouvements fluides et élégants sur une multitude d’éléments (logo, texte, etc.).

Choreographer-JS

Choreographer-JS est une librairie très simple d’utilisation, mais qui permet de créer tous types d’animations CSS complexes (déplacements, rotations, y compris en perspective, changements de couleur, etc.).

WickedCSS

WickedCSS met à votre disposition une vingtaine d’animations plutôt simples, mais malgré tout très efficaces pour attirer l’œil et apporter du mouvement sur une page web.

Slick

Slick est une bibliothèque d’animation permettant principalement de créer des carrousels et des diaporamas, que vous pouvez personnaliser à votre guise : taille des différents éléments, défilement automatique ou manuel, lazy loading…

Wow.js

Il suffit de faire défiler la page web dédiée à Wow.js pour en prendre plein la vue, avec une myriade d’effets sympathiques et très personnalisables. Cette librairie peut d’ailleurs être utilisée conjointement avec Animate.css, mentionnée plus haut.

Popmotion

Popmotion est un véritable couteau suisse pour les animateurs et les créateurs d’interfaces, avec une multitudes d’effets stylés qui vous permettront de mettre le mouvement au centre de vos designs.

Granim.js

Granim.js est une petite librairie JavaScript qui vous permet de créer très facilement des animations à base de dégradés de couleurs : idéal pour créer des arrière-plans colorés, stylés et dynamiques.

Vivus.js

Vivus.js se focalise sur l’animation des SVG. Si vous souhaitez faire apparaître un élément comme s’il était dessiné en temps réel, sous les yeux de l’utilisateur, ce petit outil est exactement ce qu’il vous faut.

Bounce.js

Bounce.js propose 10 presets d’animations très propres et fluides, qui ajouteront un côté “bondissant” au design d’un site web.

Avec ces 15 librairies d’animation web CSS et JS, vous avez toutes les cartes en main pour ajouter du dynamisme et de l’interaction à vos interfaces : il ne reste plus qu’à choisir celle qui s’adapte le mieux à votre projet.