Anime.js : Gérer plusieurs animations avec les timelines

Dans les articles précédents, on a vu comment Anime.js permet d’animer des éléments simples en modifiant leurs propriétés CSS, SVG ou JavaScript. Mais dans un projet plus complexe, les animations ne se limitent pas à des effets isolés : elles doivent se suivre, se superposer et être parfaitement synchronisées pour donner un rendu fluide.

C’est là que les timelines entrent en jeu. Avec une timeline, on peut manipuler plusieurs animations ensemble et gérer précisément leur enchaînement. Plutôt que d’écrire plein de bouts de code qui démarrent avec des délais différents, on met tout dans une seule suite logique et on laisse Anime.js gérer le timing. Aujourd’hui, on va voir comment utiliser les timelines pour créer des animations dynamiques et bien synchronisées.

Pourquoi utiliser une timeline ?

Quand plusieurs animations doivent s’exécuter dans un ordre précis ou en parallèle, il y a deux options :

1. Créer plusieurs animations séparées et jouer avec les délais (delay), ce qui peut vite devenir difficile à gérer. Utiliser une timeline, qui regroupe toutes les animations en une seule séquence et permet de contrôler facilement leur synchronisation.
2. Avec une timeline, on peut structurer son animation, ajuster le moment où chaque élément bouge, et s’assurer que tout est bien fluide. C’est particulièrement utile pour les animations interactives ou les effets d’interface comme les menus déroulants, les transitions de page ou les animations de chargement.

Créer une timeline avec Anime.js

Anime.js propose la fonction anime.timeline(), qui permet de créer une nouvelle timeline et d’y ajouter plusieurs animations avec .add().

Exemple simple :

var maTimeline = anime.timeline({
  duration: 1000, 
  easing: 'easeInOutSine' 
});

maTimeline
  .add({
    targets: '.element1',
    translateX: 250
  })
  .add({
    targets: '.element2',
    translateY: 150
  })
  .add({
    targets: '.element3',
    opacity: 0.5
  });

Explication :

• Une timeline est créée avec une durée par défaut de 1000ms et un effet d’accélération fluide (easeInOutSine).

• Ensuite, trois animations sont ajoutées dans un enchaînement automatique :

  • .element1 se déplace de 250 pixels sur l’axe X.
  • .element2 descend de 150 pixels sur l’axe Y.
  • .element3 devient semi-transparent avec une opacité de 0.5.

• Chaque animation démarre après la fin de la précédente, ce qui donne un effet fluide.

Ajuster le timing avec les offsets

Parfois, on ne veut pas que les animations s’exécutent strictement les unes après les autres. Les offsets permettent de définir exactement quand une animation commence, soit en superposition, soit avec un délai.

Offsets relatifs

Un offset relatif permet de faire commencer une animation avant ou après la précédente.

maTimeline
  .add({
    targets: '.element1',
    translateX: 250
  })
  .add({
    targets: '.element2',
    translateY: 150
  }, '-=500') 
  .add({
    targets: '.element3',
    opacity: 0.5
  }, '+=200');

Explication :

• .element1 démarre normalement.
• .element1 commence 500ms avant la fin de .element1, ce qui crée un chevauchement entre les deux animations.
• .element1 démarre 200ms après la fin de .element2, ajoutant un effet de pause avant son apparition. Ce genre d’effet est parfait pour éviter un rendu trop linéaire et donner un effet plus naturel et dynamique.

Offsets absolus

Un offset absolu permet de définir un moment précis en millisecondes où une animation doit commencer.

maTimeline
  .add({
    targets: '.element1',
    translateX: 250
  }, 0) 
  .add({
    targets: '.element2',
    translateY: 150
  }, 500) 
  .add({
    targets: '.element3',
    opacity: 0.5
  }, 1000);

Explication :

• .element1 démarre tout de suite.
• .element2 commence précisément à 500ms.
• .element3 démarre à 1000ms. Avec ce système, il est facile de synchroniser des animations avec du son, du texte ou d’autres effets.

Contrôler la timeline en direct

Une timeline peut être mise en pause, relancée ou même inversée pour créer des animations interactives.

maTimeline.pause(); // Met en pause la timeline

// Reprend la timeline après 2 secondes
setTimeout(() => {
  maTimeline.play();
}, 2000);

Explication :

1. La timeline est mise en pause juste après son lancement.
2. Après 2 secondes, elle reprend avec .play().

Ce type de contrôle est utile pour animer un élément seulement au clic d’un utilisateur ou synchroniser une animation avec un événement (comme un défilement de page).

Exemple complet : Animation fluide d’un texte

Pour illustrer les timelines, voici un effet de texte animé où les lettres apparaissent une par une, avec une rotation progressive.

HTML :

<span class="letter">A</span>
<span class="letter">n</span>
<span class="letter">i</span>
<span class="letter">m</span>
<span class="letter">e</span>
<span class="letter">.</span>
<span class="letter">j</span>
<span class="letter">s</span>

CSS :

.letter {
  display: inline-block;
  opacity: 0;
  font-size: 2em;
}

JavaScript :

var maTimeline = anime.timeline({
  easing: 'easeOutExpo',
  duration: 500
});

maTimeline
  .add({
    targets: '.letter',
    opacity: 1,
    translateY: [50, 0],
    rotate: [360, 0],
    delay: anime.stagger(100, {start: 1000}) 
  });

Explication :

• Chaque lettre commence avec une opacité de 0 et descend de 50px.
• Elle apparaît progressivement en remontant et en tournant de 360° à 0°.
• Les lettres sont animées une par une grâce à anime.stagger(100), qui ajoute un petit délai entre chaque lettre.

Conclusion et prochain sujet

Les timelines d’Anime.js sont un outil puissant pour structurer des animations complexes et fluides. Elles permettent de synchroniser facilement plusieurs effets sans gérer manuellement les délais.

Dans le prochain article, on verra comment utiliser Anime.js pour animer des éléments SVG.

Références consultées

• Ivaylo Gerchev : « Getting Started with Anime.js » sur SitePoint, https://www.sitepoint.com/get-started-anime-js/#creatinganimationswithtimelines (page consultée le 12 février 2025).
• Documentation officielle d'Anime.js, https://animejs.com/documentation/#timelineBasics (page consultée le 12 février 2025).