20 outils d’animation web que vous ne voulez pas rater

Si vous souhaitez intégrer des animations dans vos pages web, les possibilités ne manquent pas !

Que vous cherchiez à créer des animations web discrètes pour rendre vos interfaces plus vivantes et agréables ou bien des effets impressionnants qui blufferont vos utilisateurs, les 20 bibliothèques et plugins CSS et Javascript qui suivent sauront répondre à la majorité de vos besoins.

Vous pouvez vous en servir pour animer les éléments habituels (boutons, icônes, …), mais aussi des images SVG, des particules, des nuages, des formulaires, des dégradés, des rendus 3D, …

1. Animate.css

Animate.css est une bibliothèque d’animations très complète qui couvrira la majorité de vos besoins.

2. Iconate.js

Transformez vos icônes avec ces transitions animées dynamiques et agréables à l’oeil.

3. Bounce.js

Bounce.js vous permet d’expérimenter facilement avec différents styles d’animation CSS. Ajoutez un composant et ajustez les paramètres pour visualiser en direct l’animation, puis exportez le fichier CSS.

4. Lazy line painter

Ce convertisseur transforme vos artworks SVG réalisés sous Illustrator en fichiers jQuery qui gèrent l’animation du visuel. Vous pouvez faire même faire des changements directement dans le code par la suite.

5. Rythm.js

« La bibliothèque Javascript qui fait danser votre page »

6. AniJS

AniJS permet de gérer vos animations simplement en utilisant des instructions simples comme If, On, Do, To.

7. Kute.js

Kute est un moteur d’animation très efficace, rapide et compatible avec un grand nombre de navigateurs.

8. Three.js

Utilisable à la fois pour des projet simples et des projets complexes, Three.js vous permet de créer des animations 3D spectaculaires.

9. Snabbt.js

Cette bibliothèque Javascript minimaliste et ultra-légère permet de créer des animations simples rapidement.

10. Motion for the Web (mo.js)

Créez des animations ultra-fluides et des effets étonnants qui blufferont vos utilisateurs.

11. Vivus

Vivus permet d’animer des fichiers SVG en donnant l’impression qu’ils sont dessinés. Plusieurs types d’animation sont disponibles et vous pouvez également créer votre propre script.

12. ScrollReveal

ScrollReveal permet d’animer votre page au scroll (un peu à la façon de Pinterest) et fonctionne aussi bien sur navigateur web que mobile.

13. Foxholder

Foxholder anime les placeholders de vos formulaires pour les rendre plus interactifs et pour encourager vos utilisateurs à compléter les informations demandées.