4-Contrôle d'une animation

Pour contrôler le déroulement d'une animation, il faut préalablement se créer une référence vers celle-ci en la stockant dans une variable. À partir de cette variable, il est possible d'appeler différentes fonctions.

Play vs Pause vs Reverse

Par défaut, dès qu'une animation est déclarée, elle se déclenche immédiatement. Afin de contourner ce problème, vous pouvez lui passer paused: true.

Par exemple:

var animation = gsap.to('.element', { duration: 2, x: '400%', paused: true });

EXERCICE GSAP - Voiture mauve Pour cet exercice, vous devez à l’aide de GSAP animer une voiture afin de la faire rouler et reculer sur la route.

TimeScale

Permets de définir la vitesse de lecture de l'animation. Par exemple, timeScale(4) permet de jouer une animation 4x plus rapidement, tandis que timeScale(0.5) permet de ralentir de moitié la dite animation.

EXERCICE GSAP - Voiture verte Pour cet exercice, vous devez à l’aide de la méthode timeScale de GSAP contrôler la boite de vitesse d’une voiture afin de contrôler son animation.

Progress

Permet de déplacer la tête de lecture de l'animation à pourcentage de progression précis. Par exemple, progress(0.25) positionnerait le carré comme si le quart de l'animation avait été jouée, versus à la moitié avec progress(0.5) et au trois quart avec progress(0.75).

Seek

Tout comme Progress, seek() permet de déplacer la tête de lecture. Cependant, plutôt que de se baser sur un pourcentage d'avancement, son déplacement est calculé en secondes. Par exemple, une demi-seconde seek(0.5), une seconde seek(1), une seconde et demie seek(1.5).