3-Propriétés spéciales

En plus des propriétés CSS de base, il est possible d'utiliser des propriétés spéciales.

Duration

Tout comme la propriété animation-duration en CSS, la propriété duration de GSAP permet de spécifier la durée d'une animation.

Si aucune durée n’est spécifiée, GSAP utilisera une durée d’une demi-seconde (0.5s) par défaut. Repeat

Tout comme la propriété animation-iteration-count en CSS, la propriété repeat de GSAP permet de spécifier le nombre de fois qu'une animation doit-être effectué.

Plutôt que d’utiliser le mot infinite pour indiquer qu’une animation doit jouer à l’infinie, GSAP s’attend à recevoir -1, comme pour le dernier carré du précédent exemple. Yoyo

De façon similaire à animation-direction: alternate; en CSS, la propriété Yoyo de GSAP permet d'indiquer à une animation d'alterner de direction à chaque répétition.

Delay

Tout comme la propriété animation-delay en CSS, la propriété delay de GSAP permet de spécifier un délai d'attente avant de démarrer une animation.

delay peut être pratique pour synchroniser 2 ou 3 éléments, mais pour une synchronisation plus complexe, il est conseillé d’utiliser une timeline. Stagger

Similaire à Delay, Stagger fait en sorte qu'un groupe d'éléments (.element) ayant tous la même animation soient décalés. Ainsi, plutôt que de voir les trois carrés se déplacer en même temps, un délai de 0.2s est ajouté entre chaque animation.

Il est aussi possible de passer un objet à stagger plutôt qu'un nombre. Dans cet objet, il est possible de spécifier le décalage entre chaque élément.

Par exemple:

gsap.from('.element', { x: '400%', stagger: { each: 0.2 } });

Générerait exactement le même résultat que dans l'exemple précédent. Cependant, il est possible de passer des propriétés et valeurs supplémentaires afin de raffiner l'animation. Notamment, from, soit le point de départ de l'animation.

  • "start" part du début vers la fin (par défaut)
  • "end" part de la fin vers le début
  • "center" du centre vers les extrémités
  • "edges" des extrémités vers le centre
  • "random" de façon aléatoire

Staggers


EXERCICE GSAP - Stagger Dominos Pour cet exercice, écrivez une animation GSAP permettant de faire tomber tous les dominos un à la suite de l’autre en tirant profit de la...
Ease

Permets de dicter le rythme de l'animation, de la même façon que la animation-timing-function permet de le faire pour les animations/transitions CSS.


Valeurs possibles: 

none, power1, power2, power3, power4, back, elastic, bounce, rough, slow, steps, circ, expo, sine

Il est possible de spécifier si un ease doit être effectué au début, à la fin ou au début et à la fin en ajoutant .in, .out ou .inOut après le nom du ease souhaité. Par exemple: bounce.inOut;

Si aucune spécification n'est donnée, .out sera utilisé.

OUTIL Greensock Ease Visualizer Pour voir toutes les possibilités et visualiser la courbe de Bézier associée à chaque easing.
Callbacks

Les Callbacks permettent de déclencher une fonction JavaScript à différents moments clés d'une animation.

Par exemple, pour se synchroniser avec son début 🏁, il est possible d'utiliser onStart ou encore, avec sa fin 🔚 avec onComplete, comme dans l'exemple ci-dessous.

Callbacks


EXERCICE GSAP - Voiture bleue Pour cet exercice, vous devez à l’aide de GSAP et de sons ponctuels compléter une animation de voiture afin de la faire rouler sur la rou...