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
});

 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.

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