5-Timeline

Intro

La Timelinede GSAP permet d'organiser un groupe d'animations. Par exemple, pour enchaîner trois animations une à la suite de l'autre, afin de créer une animation complexe, il serait nécessaire d'appliquer un délai sur chacune d'entre elles.

Cependant, avec une timeline, il suffit d'enchainer les animations une à la suite de l'autre pour quelles se déclenches successivement.

Par exemple:

Afin de faciliter la lecture de l’animation, il est conseillé de séparer chaque étape sur une ligne différente.

Si cette animation avait été conçue avec des délai et que pour une raison quelconque la durée d'une des animations devait être modifiée, le délai de chacune des animations la suivant aurait dû être recalculé et changé à la main. Tandis qu'avec une timeline, cette modification se fait automatiquement.

Paramètres de position des animations dans une timeline

Par défaut, les animations sont ajoutées à la fin de la ligne de temps, de sorte qu'elles s'enchaînent les unes après les autres, mais vous pouvez utiliser le paramètre position pour contrôler précisément l'endroit où elles sont placées dans le temps.

Il est parfois souhaitable qu'une animation se déclenche plus tôt ou plus tard et non immédiatement après l'animation précédente. Pour ce faire, il est possible de passer un 3e paramètre à une animation se trouvant dans une timeline. Ce 3e paramètre vient généralement après l'objet contenant les propriétés animées {} tel que démontré dans ces 2 exemples :

gsap .timeline() .from(".element.no1", { x:"400%" }) .from(".element.no2", { x:"400%" }, 0.5) .from(".element.no3", { x:"400%"} );

Autre exemple:

gsap .timeline() .from(".element.no1", { x:"400%" }) .from(".element.no2", { x:"400%" }, '+=0.5') .from(".element.no3", { x:"400%"} );

Position absolue

Les paramètres de position absolue déterminent le moment du départ de l'animation d'un objet. Ce temps, spécifié en secondes, est le délai par rapport au déclenchement de la timeline (bref par rapport au début ABSOLU de la chaine d'animations).

Par exemple, si le 2e 🟦 devait commencer après cinq secondes (créant ainsi un délai), il serait possible d'utiliser 5 comme troisième paramètre.

Remarquez comment le 3e carré 🟥 reste synchronisé avec l’animation précédente même si elle à un paramètre de position absolue.

Position relative

Délai (+=) ou en avance (-=)


Il est possible de spécifier un délai de départ d'une animation par rapport à l'animation précédente, donc RELATIF à l'animation précédente. Ce délai peut être positif ou négatif.

Par exemple, pour ajouter un délai d'une seconde avant de déclencher la prochaine animation, il est possible de spécifier "+=1".

Pour qu'une animation commence une seconde plus tôt, le code serait "-=1", comme dans l'exemple suivant, où le 2e carré 🟦 débute au milieu de la course du 1er carré plutôt qu'à la fin de celle-ci.

En même temps (<)


Cependant, si l'objectif est de démarrer l'animation en même temps que la précédente, il existe une position efficace pouvant se synchroniser avec le début de l'animation précédente, et ce même si la durée de celle-ci venait à changer.

Pour ce faire, il faut utiliser "<" comme ceci:

Il est même possible d’ajouter une valeur après le symbole "<" si sa position doit être basée sur le début de l’animation précédente, mais être légèrement différente. Par exemple "<0.25".



EXERCICE Timeline-The incredible machine Pour cet exercice, vous allez devoir animer le premier niveau du jeu The Incredible Machine, aussi surnommé TIM ;)
Libellés (Labels)

Sauter rapidement à une position précise dans une animation peut s'avérer pratique. Surtout lorsqu'une animation devient longue et que seule la fin nécessite des ajustements. Dès lors, regarder le début de l'animation devient redondant et une perte de temps.

Par exemple:

Un label est défini grâce à .add('red'). Il est ensuite possible de sauter directement à cette position dans la timeline en appelant animation.play('red').

Défaut (Defaults)

Certaines propriétés peuvent être partagées par plusieurs animations dans une timeline.

Si tous les éléments ont une translation de x: '400%' et un ease identique. Plutôt que de répéter cette combinaison sur chaque élément, il est possible de définir des propriétés/valeurs par défaut. Ainsi, toutes les animations enfants de cette timeline partageront ces propriétés, à moins de la redéfinir à l'intérieur d'une animation spécifiquement.

Par exemple:

GSDevTools

GreenSock offre des plugiciels payants, réservés aux membres du Club GreenSock. Parmi ceux-ci, GSDevTools est particulièrement utile pour peaufiner ses animations. Heureusement, GreenSock offre la possibilité de l'utiliser gratuitement et légalement via la plateforme CodePen.

Pour ce faire, il suffit d'incorporer l'url du plugiciel désiré dans les Settings de CodePen.

Voir les plugiciels disponibles

Lorsque GSDevTools est ajouté à un pen, la ligne GSDevTools.create(); suffis à l'initialiser. Dès lors, un lecteur permettant de manipuler son animation devient disponible.

Ce lecteur permet de:

  • Jouer une animation en boucle
  • Changer sa vitesse (ralentir/accélérer)
  • Isoler certaines sections de l'animation

Pour mieux voir tous les contrôles de GSDevTools cliquez sur "Edit on CODEPEN" en haut à droite.
Créer une animation peut se faire rapidement. Cependant, la peaufiner pour que tous les timings soient parfaits requiert du temps. Prenez le temps d’observer vos timings et de les ajuster.



EXERCICE GSAP Timeline - Excitebike Pour cet exercice, nous allons créer une animation inspirée du jeu Nintendo Excitebike sorti en 1984! 🏍