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