Timeline
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:
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 🟦.
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:
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.
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:
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:
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