GSAP est une librairie JavaScript qui permet d’animer les éléments d’une page HTML.
Pour les débutants :

  1. J’ajoute un lien vers le fichier gsap.js ou gsap.min.js, sur un CDN (cloud) ou directement dans votre dossier.
  2. J’accéde à de nouvelles fonctions via les « objets » de GSAP.
<!-- ... -->
<body>
<!-- ici votre html -->
 
<!-- avant la fermeture du body-->
<!-- via un CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<!-- ou si vous copiez ce fichier dans votre dossier -->
<script src="gsap.min.js"></script>
 
<!-- votre code JS ou un lien vers celui-ci -->
<script>
gsap.from('body',{opacity:0});
</script>
 
</body>
</html>

! Si gsap n’est pas bien chargé, une erreur gsap is undefined sera affichée dans la console.

Transition simple (tween)

La première chose nécessaire pour l’animation d’un ou plusieurs éléments est de les cibler (target). On parle de « querySelector » en JS, si rien ne s’anime, la console affichera une erreur de querySelector ou target.

gsap.to('sélecteur comme en CSS',{ })

Exemple, tous les paragraphes :
gsap.to('p',{ })
Toutes les éléments avec la classe item :
gsap.to('.item',{ })
L’élément avec un id unique « p1 » :
gsap.to('#p1',{ })
Une sélection plus large :
gsap.to('.item, .menu, p',{ })

Si vous êtes perdu avec les sélecteurs : sur MDN ou ici.

Les animations sont basées sur la transformation progressive des propriétés, comme des points clés en animation.
Par exemple, la valeur d’une propriété comme l’opacité passera de 0 à 1 en 2 secondes pour faire un fondu d’ouverture.

Dans les propriétés courantes, on pourra modifier l’opacité (opacity), les déplacements par translation en x et y, l’échelle (scale, scaleX, scaleY), la rotation (rotation), les couleurs (backgroundColor, color, fill, stroke).
Les transformations sont liées à leur point d’origine, on utilisera facilement un « tranformOrigin:’50% 50%’ » pour centrer une rotation ou une mise à l’échelle.

Attention en JS, les propriétés CSS avec un tiret sont renommées en ajoutant une majuscule et supprimant le tiret, background-color deviendra backgroundColor.

GSAP propose 4 fonctions pour changer/animer les éléments d’un état A vers B.
Facile à comprendre :

  • gsap.set(), fixe les valeurs souhaitées, mais sans transition (comme une duration de zéro).
  • gsap.to(), on passe de A l’état initial, vers B l’état que l’on souhaite obtenir.

Un peu plus ambiguë :

  • gsap.from(), on passe de A l’état souhaité au départ, vers B l’état initial.
  • gsap.fromTo(), on définit le départ et l’arrivé pour passer de A vers B.

« set et to » sont généralement plus adaptés pour créer des animations.

Décortiquez l’exemple ci-dessous pour aller plus loin :

See the Pen gsap3 by Benoît Wimart (@benoitwimart) on CodePen.dark

Pour un code plus simple, j’anime une seule propriété, mais on peut cumuler ! Il faudra écrire une sorte de CSS, mais façon objet JS, avec des séparations par des virgules !

See the Pen gsap 3, plusieurs propriétés by Benoît Wimart (@benoitwimart) on CodePen.dark

Animation complexe (timeline)

Il est possible de créer facilement des animations plus complexes en utilisant les timelines de GSAP.
Celle-ci regroupe, enchaine, chevauche, superpose et « pilote » plusieurs transitions.

const tl = gsap.timeline(); // objet gsap timeline
tl.to('sélecteur des éléments',
 { /* les propriétés à animer, la durée et les déclencheurs */ }, // <- on ferme },
 /* ajustement temporel  facultatif */ ); // <- on ferme );

See the Pen gsap 3, timeline by Benoît Wimart (@benoitwimart) on CodePen.dark

Plus loin avec GSAP

GSAP est gratuit et payant, l’adhésion au Club Greensock offre des plugins intéressants (sans être indispensables). Par ce modèle économique, la version gratuite offre énormément de possibilités et un support de qualité (forum réactif et documentation complète).