Anime.js: Les notions de base à connaître avant de commencer

Parmi les nombreuses bibliothèques JavaScript dédiées aux animations, Anime.js se démarque par sa simplicité et sa flexibilité. Créé par Julian Garnier, un développeur et designer français passionné par les animations web, cet outil a été conçu pour offrir une solution légère et intuitive permettant d’animer facilement les propriétés CSS, les attributs du DOM, les éléments SVG et les objets JavaScript. Ce premier article pose les bases nécessaires pour comprendre comment fonctionne Anime.js.

Comment installer et utiliser Anime.js ?

Anime.js peut être ajouté à un projet de plusieurs manières. L’installation dépend du type de projet et des besoins en gestion des dépendances.

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

Par npm (Node Package Manager) : Pour les projets nécessitant une organisation plus structurée, Anime.js peut être installé avec la commande suivante :

npm install animejs --save

Une fois installé, il suffit d’importer la bibliothèque avec cette ligne :

import anime from 'animejs/lib/anime.es.js';

Cette flexibilité permet d’utiliser Anime.js sur des sites classiques, dans des frameworks modernes comme React, Vue et Angular, etc. Peu importe l’environnement, Anime.js s’intègre facilement.

Les notions de base à connaître avant de commencer

Avant de créer des animations avec Anime.js, il est important de comprendre comment cette bibliothèque fonctionne. Voici quelques concepts essentiels pour bien débuter.

1. Les éléments à animer (targets)
   
   Dans Anime.js, l'animation se base sur une cible, appelée target, qui peut être de différents types :
   • Un sélecteur CSS : Permet d’animer tous les éléments possédant une classe spécifique. Exemple : targets: '.element'
   • Un élément HTML spécifique : Au lieu de cibler tous les éléments d’une classe, il est possible de sélectionner un élément unique. Exemple : targets: document.querySelector('.element')
   • Un objet JavaScript : Anime.js permet aussi d’animer des valeurs contenues dans des objets JavaScript. Exemple : targets: { valeur: 0 }
     
     
2. Les propriétés que l’on peut animer
   
   Une fois la cible choisie, il faut déterminer quelles propriétés seront animées. Anime.js permet d’agir sur différents types de valeurs :
   • Les propriétés CSS, comme l'opacité(opacity), la position (left et top), ou la couleur de fond (backgroundColor).
   • Les transformations CSS, telles que le déplacement horizontal (translateX), la rotation(rotate) ou la mise à l'échelle (scale).
   • Les valeurs numériques dans un objet JavaScript, par exemple pour animer un compteur ou une valeur dynamique.
     
     
3. Les paramètres d'Anime.js ne se limitent pas à animer des éléments, ils permettent aussi de contrôler leur comportement. Voici quelques options courantes :
   • La durée (duration) : Définit combien de temps dure l’animation. Exemple : duration: 2000 signifie que l’animation durera 2 secondes.
   • Le délai (delay) : Ajoute un temps d’attente avant le début de l’animation. Exemple : delay: 500 retardera le démarrage de 500 millisecondes.
   • L’effet d’accélération (easing) : Anime.js propose différentes courbes d’animation, comme easeInOutQuad ou easeOutExpo, qui rendent les mouvements plus naturels.
   • Le mode répétition (loop) : Permet de faire rejouer une animation plusieurs fois (loop: 3) ou de la faire tourner en boucle (loop: true).

À venir dans le prochain article

Le prochain article sera consacré à la gestion des timelines dans Anime.js. Une timeline permet d’enchaîner plusieurs animations sur différents éléments, avec un contrôle précis du timing et de la synchronisation. Cette approche est essentielle pour créer des effets complexes et dynamiques, comme des animations qui se déroulent en plusieurs étapes.

Références consultées

• Michael Jiang : « A Beginner's Guide to Using anime.js » sur Medium, https://medium.com/swlh/a-beginners-guide-to-using-anime-js-b28638bb3def (page consultée le 6 février 2025).
• Ivaylo Gerchev : « Getting Started with Anime.js » sur SitePoint, https://www.sitepoint.com/get-started-anime-js/ (page consultée le 6 février 2025).
• Documentation officielle d'Anime.js, https://animejs.com/documentation/ (page consultée le 6 février 2025).