Timeline

2

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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

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.

Position relative

Il est possible de spécifier un délai (positif ou négatif) à une animation en lien avec l'animation précédente.

Par exemple, pour attendre une demi-seconde avant de déclencher la prochaine animation, il est possible de spécifier "+=0.5". Pour qu'une animation commence une demi-seconde plus tôt "-=0.5" comme dans l'exemple suivant, où le 3e carré 🟥 débute maintenant en même temps que le 2e 🟦.

Voir le CodePen de Simon Arnold (@smnarnold).

Cependant, si l'objectif est de démarrer l'animation en même temps que la précédente, il existe une position plus efficace encore 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:

Voir le CodePen de Simon Arnold (@smnarnold).

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 The Incredible Machine 🎳🐁

Position absolue

Les paramètres de positions absolues permettent de spécifier un temps précis en secondes correspondant au moment déterminé pour le déclenchement de l'animation.

Par exemple, si le 2e 🟦 devait commencer après une seconde (créant ainsi un léger délai), il serait possible d'utiliser 1.

Voir le CodePen de Simon Arnold (@smnarnold).

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

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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')

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:

Voir le CodePen de Simon Arnold (@smnarnold).

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

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme