Bibliothèques d'animation JavaScript : 10 choix populaires

J'aime expérimenter divers effets d'animation, en particulier ceux qui sont simples et peuvent être implémentés avec CSS. Mais, si nous regardons la situation dans son ensemble, les animations CSS ne vous mèneront que jusque-là. Et si vous souhaitez créer des expériences utilisateur complexes et interactives, vous devrez tôt ou tard passer à JavaScript.

Le principal avantage de l'utilisation de JavaScript pour les effets d'animation est que vous contrôlez beaucoup plus la logique d'animation. Cela inclut la fluidité des transitions, le contrôle de l'état et de la réponse du DOM, mais aussi l'utilisation de graphiques 2D et 3D grâce à WebGL.

Les types de bibliothèques d'animation JavaScript

Ainsi, comme les bibliothèques d'animation JS se présentent sous de nombreuses formes et formes, cela aide vraiment à affiner le domaine d'intérêt spécifique . De nombreux moteurs et frameworks ne sont pas seulement utilisés pour les éléments frontaux, mais également pour créer des jeux et créer d'autres contenus interactifs.

Pour ce tour d'horizon spécifique, je me concentre sur les bibliothèques les plus couramment utilisées dans le développement frontal, seules ou avec l'un des frameworks actuels.

En temps voulu, j'envisagerai d'ajouter d'autres bibliothèques à cette liste qui sont à plus petite échelle mais qui fournissent toujours des moyens significatifs d'ajouter des animations interactives à vos projets.

Chaque bibliothèque a des liens vers son site Web et sa page GitHub. J'ai également ajouté un exemple CodePen que vous pouvez exécuter à partir de cette page et des ressources supplémentaires - qui sont soit des didacticiels, soit des guides vidéo.

#1 – Trois.js

Three.js est la bibliothèque incontournable pour créer des effets animés 3D que vous utilisez dans le développement de sites Web créatifs. Three.js supprime le besoin pour les développeurs de se familiariser avec WebGL et peut à la place se concentrer sur la création d'effets 3D interactifs sans la complexité.

Sur le haut de gamme, Three.js est utilisé pour créer des expériences virtuelles interactives, comme Mozilla Hubs. De plus, la bibliothèque est également souvent utilisée pour créer des expériences de page de destination immersives. Des éditeurs et des éditoriaux de classe mondiale utilisent Three.js depuis des années pour créer des pages basées sur des données avec des mises à jour dynamiques.

Si vous visitez la page d'accueil, il y a un grand nombre de projets mis en évidence, ce qui devrait vous donner beaucoup d'inspiration/clarté sur la façon dont cette bibliothèque est utilisée dans les environnements quotidiens.

Exemple d'animation Three.js

Voir le Pen Mesh Line Waves Background - THREE.js par CP Designer (@cpandya) sur CodePen.

Ressources supplémentaires de Three.js

• Comment nous avons construit le globe GitHub
• Effet de distorsion de pixels avec Three.js

#2 – Anime.js

Anime.js de Julian Garnier est probablement la deuxième bibliothèque la plus connue pour intégrer des animations dans des projets Web. Sa popularité découle de la présence d'outils intégrés pour aider à accélérer le processus d'animation des éléments CSS, SVG et DOM.

Par exemple, vous pouvez cibler des sélecteurs CSS spécifiques, puis appliquer une logique d'animation raffinée via JavaScript, au lieu d'écrire vous-même les @keyframes .

 anime({ targets: '.staggering-axis-grid-demo .el', translateX: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'x'}), translateY: anime.stagger(10, {grid: [14, 5], from: 'center', axis: 'y'}), rotateZ: anime.stagger([0, 90], {grid: [14, 5], from: 'center', axis: 'x'}), delay: anime.stagger(200, {grid: [14, 5], from: 'center'}), easing: 'easeInOutQuad' });

Rien qu'avec l'extrait ci-dessus, vous pouvez créer un effet qui ressemble à ceci :

Si vous deviez le faire avec CSS, vous auriez besoin de sélectionner chaque bloc de grille individuel et d'écrire une logique distincte pour celui-ci. Non seulement c'est peu pratique, mais c'est aussi beaucoup de travail. Sur la page de documentation Anime.js, vous trouverez de nombreux exemples similaires. Et la démo ci-dessous va encore plus loin pour montrer comment cette bibliothèque peut être utilisée dans le développement frontal moderne.

Anime.js Exemple d'animation

Voir l'animation du logo Pen anime.js par Julian Garnier (@juliangarnier) sur CodePen.

Ressources supplémentaires Anime.js

• Tutoriel Anime.js - Moteur d'animation JavaScript en 10 minutes
• Animation d'interface utilisateur avec Anime.js

#3 – Pop motion

Popmotion est une bibliothèque d'animation de bas niveau écrite en TypeScript. C'est également la bibliothèque qui alimente la populaire bibliothèque Framer Motion (nous l'avons répertoriée dans cet article) utilisée dans les projets React. N'ayant pas d'opinion, vous pouvez utiliser Popmotion pour intégrer des effets personnalisés en écrivant des fonctions supplémentaires que vous souhaitez utiliser.

Comme son nom l'indique, Popmotion est particulièrement efficace pour animer des éléments d'interface utilisateur grâce à l'utilisation de diverses animations basées sur le mouvement. Cela inclut des effets tels que l'accélération, les ressorts, les images clés et des effets de transition plus complexes. L'exemple ci-dessous montre bien l'application pratique des effets d'animation pour les éléments de composant.

Exemple d'animation Popmotion

Voir la démo de Pen Popmotion par Arden (@aderaaij) sur CodePen.

Ressources supplémentaires Popmotion

• Visualisez l'algorithme Pancakes avec React et Popmotion.io
• Ajoutez des animations printanières à votre application angulaire avec popmotion

#4 – mo.js

Mo.js se concentre sur les animations graphiques et excelle dans la fourniture d'une structure de code simple que vous pouvez implémenter dans des projets autonomes, mais également avec des frameworks tels que React.

Et, parce que Mo.js est livré avec sa propre API déclarative, vous pouvez contrôler chaque étape de l'animation. Cela comprend la définition non seulement de la logique de ce que vous souhaitez réaliser, mais également de la manière dont vous allez y arriver. La bibliothèque comprend des composants et des exemples prédéfinis qui sont adaptés pour des expériences utilisateur visuellement riches.

Voici un exemple d'extrait :

 const travelCircleExpand = new mojs.Shape({ fill: COLORS.BLACK, radius: 126, scale: { .1: 1 }, opacity: { 0 : 1 }, easing: 'cubic.out', duration: 400, isForce3d: true, isTimelineLess: true, });

Comme vous pouvez le voir, une grande partie de la logique est prédéfinie. Ainsi, plutôt que d'avoir à proposer vos propres idées, vous pouvez prendre note des propriétés fournies et progresser. La section didacticiel de la documentation contient de nombreux exemples d'applications pratiques, en particulier des effets qui ajoutent des animations minuscules mais significatives aux éléments de page Web de tous les jours.

mo.js Exemple d'animation

Voir les effets Pen Link Hover avec mo.js par Mike Quinn (@mprquinn) sur CodePen.

Ressources supplémentaires mo.js

• Comment utiliser MoJS avec React
• Se familiariser avec MoJS

#5 – p5.js

p5.js est l'implémentation JavaScript de Processing - un "langage" distinct destiné à être utilisé par les artistes visuels. Contrairement à certains des exemples que nous avons vus jusqu'à présent, p5.js est une bibliothèque d'animation universelle, fournissant des solutions non seulement pour des applications pratiques, mais également pour des projets plus robustes et complexes. Cela inclut une prise en charge complète des effets 2D et 2D.

En ce qui concerne l'utilisation de p5.js dans les projets de sites Web, la bibliothèque ouvre la voie à une créativité approfondie. Par exemple, vous pouvez amorcer rapidement des effets comme un écran de fumée, des arbres animés et des pages de destination basées sur des données avec lesquelles les utilisateurs peuvent interagir.

Vous devez faire tous les dessins vous-même, mais avec le nombre de ressources disponibles pour p5.js, je pense que vous constaterez qu'il n'est pas si difficile de commencer. Et il va sans dire que la communauté derrière ces deux projets est très impliquée.

p5.js Exemple d'animation

Voir le Pen P5.JS Twist and Turn. par Sdsmnc (@supastrocat) sur CodePen.

p5.js Ressources supplémentaires

• Traitement et p5.js
• Couchers de soleil et étoiles filantes dans p5.js

#6 – Mouvement

React est si populaire qu'il est logique qu'il ait sa propre bibliothèque d'animations. Framer Motion est livré avec une API pré-construite qui permet aux développeurs de React de simplifier le processus de création de composants animés, mais atténue également certains des obstacles liés à la nécessité d'apprendre le CSS et ses propriétés d'animation indépendantes. Et c'est assez facile à travailler.

Un extrait d'exemple :

 import { motion } from "framer-motion" export const MyComponent = () => ( <motion.div animate={{ rotate: 360 }} transition={{ duration: 2 }} /> )

Les animations dans Framer sont définies par les propriétés motion & animate . Cela vous permet de sélectionner des composants entiers et leurs éléments internes, que vous pouvez ensuite enrichir avec votre logique d'animation personnalisée. L'article Smashing de Nefe Emadamerho-Atori dans la section des ressources est un excellent point de départ pour voir comment fonctionne Framer Motion.

Exemple d'animation de mouvement

Voir le bouton Pen Laser Sight de codebro (@codebro) sur CodePen.

Ressources supplémentaires sur les mouvements

• Présentation de Framer Motion
• Animations réactives avec Framer Motion

#7 – GSAP

J'ai vu beaucoup d'art GSAP partagé sur Twitter récemment. Mais ce n'est pas une surprise. De nombreuses animations et effets dynamiques que nous voyons dans les projets créatifs ont été rendus possibles grâce au moteur GSAP robuste.

Non seulement la bibliothèque est optimisée pour les performances, mais elle est également hautement compatible avec vos technologies préférées. Cela inclut des frameworks comme React & Vue, mais aussi des bibliothèques comme jQuery, avec une prise en charge supplémentaire des navigateurs Web mobiles et obsolètes .

Parce que GSAP est capable d'interroger et d'animer pratiquement n'importe quel type d'élément Web (du CSS au Canvas en passant par les objets DOM), vous pouvez l'utiliser pour quelque chose d'aussi simple qu'un effet de spinner, ou tout mettre en œuvre et créer des expériences de site Web vraiment dynamiques.

La section Showcase contient des centaines d'exemples de projets sur lesquels les développeurs ont travaillé. Découvrez-le à la fois pour vous inspirer, mais aussi pour voir ce qui est possible avec cette bibliothèque.

Exemple d'animation GSAP

Voir l'introduction Pen Hulu Originals par Hyperplexed (@Hyperplexed) sur CodePen.

Ressources supplémentaires du GSAP

• Techniques d'animation étonnantes avec GSAP
• Création de séquences d'animation de site Web élaborées - Tutoriel GSAP 3

#8 – Paper.js

Paper.js est une bibliothèque d'animation qui se concentre strictement sur l'animation de graphiques vectoriels. Cette approche vous permet de créer non seulement des effets statiques, mais également des expériences dynamiques interactives. En particulier, Paper.js est populaire parmi les projets d'animation où l'utilisateur peut faire glisser des objets, les réorganiser et fournir une entrée personnalisée.

Les objets peuvent être classés par couches, chaque couche ayant une spécification d'animation personnalisée. Ceci est pratique lorsque vous travaillez sur des structures complexes, vous permettant de supprimer/désactiver certaines couches, sauf demande de l'utilisateur.

Paper.js Exemple d'animation

Voir les verres de remplissage de stylo - Paper.js par Fiorald Ismaili (@Fiorald) sur CodePen.

Ressources supplémentaires Paper.js

• Effacement de vecteur Paper.js
• Vagues dans Paper.js

#9 – Animations Web

Cette bibliothèque est un port JavaScript direct de l'API Web Animation. La bibliothèque s'intègre directement à la Element.animate() , vous permettant d'utiliser des fonctionnalités d'animation généralement écrites à l'aide de la logique CSS. Les auteurs l'ont expliqué en disant:

"Une implémentation JavaScript de l'API Web Animations qui fournit des fonctionnalités d'animation Web dans les navigateurs qui ne la prennent pas en charge de manière native. Le polyfill revient à l'implémentation native lorsqu'elle est disponible. »

Animations Web Exemple d'animation

Voir les animations Pen Imperative de Sam Thorogood (@samthor) sur CodePen.

Animations Web Ressources supplémentaires

• API d'animations Web – API Web | MDN
• Animations Web Niveau 2 | W3C

#10 – Protons

Les effets de particules sont définitivement là-haut dans les tendances de conception de sites Web modernes. Non seulement les concepteurs les mettent en œuvre pour les effets d'arrière-plan, mais aussi pour des transitions intéressantes et même des présentations pour des projets créatifs. La bibliothèque Proton est spécifiquement adaptée aux besoins de mise à l'échelle rapide des effets de particules créatifs.

Vous pouvez faire des choses comme créer des effets d'étincelle et des interactions basées sur les collisions, mais aussi transformer le texte en expériences d'animation nouvelles et passionnantes.

Exemple d'animation de protons

Voir le Pen my-emitter de matsu7089 (@matsu7089) sur CodePen.

Ressources supplémentaires sur les protons

• Exemples de moteurs à protons
• Composant de réaction pour les arrière-plans de particules

Sommaire

La bonne chose à propos de beaucoup de ces bibliothèques est qu'elles existent depuis un certain temps. En tant que tel, il est relativement facile de trouver des exemples mais aussi des guides détaillés sur la façon d'utiliser une bibliothèque particulière dans un contexte spécifique.

Surtout, il est utile de savoir quel type d'objectif vous essayez d'atteindre, en particulier si vous allez travailler sur des animations qui implémentent des données en temps réel ou des entrées basées sur l'utilisateur.

En d'autres termes, le mieux n'existe pas. Chaque bibliothèque a ses propres forces et faiblesses. Pour moi, j'irais probablement avec GSAP car il est bien optimisé pour une utilisation dans presque tous les projets frontaux imaginables.

Mais si je fais un projet moins ambitieux, une librairie comme Popmotion me suffit amplement.