Introduction

11

GSAP est une libraire permettant d'animer tout ce que JavaScript est en mesure de manipuler. Elle permet de changer la valeur de certaines propriétés plusieurs fois par secondes, ce qui permet de simuler le mouvement et bien d'autres effets.

Pour vous donner une idée, voici une animation GSAP de Chris Gannon:

Voir le CodePen de Simon Arnold (@smnarnold).

Passé

Vous avez peut-être déjà utilisé et/ou entendu parler de:

  • TweenLite
  • TweenMax
  • TimelineLite
  • TimelineMax

ou vous tomberez peut-être sur des articles mentionnant ces outils en lisant sur le web. Ce qui est normal, puisqu'ils ont étés des parties importantes de GSAP durant de nombreuses années. Cependant, vers la fin de 2019, ils furent remplacés par l'objet GSAP lors de la sortie de GSAP 3.

Dans ce cours, nous, nous consacrerons à cette plus récente version (3). Faites attention, si une documentation mentionne ces précédents outils, elle traite donc la version 2 et non 3.

Installation

Comme pour toute librairie, afin d'avoir accès à ses fonctionnalités, il est nécessaire de l'inclure dans notre projet.

Pour ce faire, il est possible:

Objet GSAP

L'objet GSAP est le point de départ de toutes les fonctionnalités associées à GSAP.

  • Création d'animations
  • Configuration de paramètres
  • Ajout de plugiciels (plugins), d'interpolations (eases) ou d'effets
  • Contrôle des animations

Interpolations de base

Les interpolations, ou en anglais: tweenings, permettent de créer des animations similaires à celles réalisées en CSS.

Pour ce faire, il suffit de spécifier:

  • Le ou les éléments à animer avec un sélecteur, ex: .element
  • Un objet indiquant la ou les propriétés à animer et les valeurs souhaitées, ex:  { opacity: 0.5 }

Il est possible d'utiliser la majorité des propriétés CSS. Cependant, il est nécessaire de remplacer les traits d'union - par une nomenclature camelCase 🐫. Par exemple, font-size deviendrait fontSize.

Bien qu'il soit possible d'animer presque toutes les propriétés CSS, il est préférable de se concentrer sur transform et opacity lorsque possible, puisque ces propriétés bénéficies d'une accélération matérielle.

  • opacity
  • x et y
  • rotation, rotationX ou rotationY
  • scale, scaleX ou scaleY
  • skewX et skewY

To

Dans l'exemple ci-dessous, un carré est positionné en haut à gauche de son parent. En cliquant sur le bouton ▶️, une animation GSAP le déplace vers la droite.

Voir le CodePen de Simon Arnold (@smnarnold).

Les valeurs sous forme de nombre (qui ne sont pas entre guillemets), ex: 400, sont interprétées comme étant des px. Les valeurs entre guillemets, ex '400%', peuvent spécifier une unité de mesure différente, comme dans le cas précédent où un pourcentage a été utilisé (%).

Décortiquons l'animation:

  • gsap indique que nous désirons utiliser une méthode appartenant à la librairie GSAP.
  • to() correspond à la méthode utilisée. Traduisible par "vers", cette méthode indique qu'un état de fin sera passé et que l'élément doit faire une interpolation vers celui-ci.
  • '.element' le sélecteur correspondant à l'élément devant être animé.
  • { x: '400%' } un état de fin sous forme d'objet contenant une propriété (x) et une valeur ('400%').

L'élément se déplace donc vers la droite ➡️ de 4x sa largeur (400%) en l'espace d'une seconde.

L'animation ne fonctionne qu'une fois. Puisque la méthode to() indique un état de fin à atteindre et que la première animation a changé les valeurs des propriétés, leurs valeurs de départ est maintenant identiques à celle de fin, donc aucune animation n'est exécutée les fois subséquentes.

Pour en savoir, voir cet article de GreenSock à propos de to.

From

Voir le CodePen de Simon Arnold (@smnarnold).

Décortiquons une animation avec plus d'une propriété:

  • from() correspond à la méthode utilisée. Traduisible par "à partir de", cette méthode indique qu'un état de départ sera passé et que l'élément doit partir de celui-ci pour faire une interpolation vers ses valeurs initiales.
  • { x: '400%', opacity: 0 } un état de départ sous forme d'objet contenant les propriétés x & opacity et les valeurs 400% & 0 (transparent au début de l'animation).

La propriété CSS transform est formulée différemment dû à ses multiples valeurs possibles. Par exemple, transform: translateX(400%) est formulé ici x: '400%'. Pour voir tous les noms associés à la propriété transform, voir la liste de Greensock 🟩 🧦.

Contrairement à l'animation to(), l'animation from() peut-être jouée plus d'une fois, puisque l'état de départ fourni ne correspond jamais à l'état de fin.

Pour en savoir, voir cet article de GreenSock à propos de from.

FromTo

Permets de spécifier un état de départ et de fin d'une animation, contrairement à from() et to() qui utilisent l'état actuel comme point de départ ou fin. Cette interpolation permet d'avoir un contrôle total sur une animation, en particulier lorsqu'elle est enchaînée avec d'autres animations.

Voir le CodePen de Simon Arnold (@smnarnold).

Dans cet exemple, il est important de remarquer la présence de deux objets de propriétés { x: '0%' } et { x: '400%' } plutôt qu'un seul. Le premier spécifie l'état de départ et le deuxième l'état de fin de l'animation.

Il est possible d'omettre une propriété CSS dans l'état de départ et de la spécifier uniquement dans l'état de fin.

Par exemple: { x: '0%' }, { x: '400%', scale: 2 } fonctionnerait, puisque GSAP assumerait que le scale de départ correspond au scale naturel de l'élément (1) et donc l'animerait jusqu'à 2.

Cependant, spécifier uniquement une propriété dans l'état de départ ne génèrera pas d'animation sur cette dite propriété.

Par exemple { x: '0%', scale: 2 }, { x: '400%' } scale donnerait un scale initial de 2 et puisqu'aucun scale de fin n'est spécifié, GSAP assumera que le scale de fin doit correspondre au scale de départ.

Timing

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

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

Pour voir toutes les possibilités et visualiser la courbe de Bézier associée à chaque easing, voir la démo Greensock des easings

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.

Voir le CodePen de Simon Arnold (@smnarnold).

Pour voir, tous les callbacks disponibles, voir GreenSock.com

Contrôle de l'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 exemple, play() qui envoie le carré vers la droite, pause() qui arrête l'animation sur place ou encore reverse() qui joue l'animation à l'envers, soit qui envoie le carré vers la gauche.

Voir le CodePen de Simon Arnold (@smnarnold).

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.

Voir le CodePen de Simon Arnold (@smnarnold).

Progress

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

Voir le CodePen de Simon Arnold (@smnarnold).

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

Voir le CodePen de Simon Arnold (@smnarnold).

Pour vous inspirer, visualiser cette collection de réalisations utilisant GSAP 3.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme