Mise à jour GSAP 3 : découvrez les nouveautés de la bibliothèque JavaScript

De nouveaux avantages très attendus sur GSAP 3

Les nombreuses animations GSAP ne sont pas définies et fixés, elles sont facilement modifiables, ajustables et c’est ce qui en fait leur avantage.

En effet, un nombre infini d’animations sont possibles grâce à cette bibliothèque JavaScript. Que ce soit sur le CSS avec les propriétés telles que la taille, la couleur, sur les attributs SVG ou encore sur n’importe quelle valeur numérique, tout peut être animé selon vos envies.

Il est même possible de faire des animations 2D avec Pixi.js et 3D avec Three.js. Mais le gros changement sur GSAP 3 est sa construction en modules ES6. Maintenant, GSAP est supporté sur React, Vue js ou encore Angular avec une compatibilité sur TypeScript, le tout beaucoup plus facilement que ce que proposait la version précédente de la bibliothèque JavaScript.

Avec les nombreuses nouvelles fonctionnalités apportées par la mise à jour de GSAP, il ne sera pas possible de toutes les expliquer dans cet article. Nous allons en illustrer quelques-unes, mais pour plus d’explications, n’hésitez pas à consulter la documentation GSAP 3

Des modifications dans l’écriture syntaxique de GSAP

Avec GSAP 3, nous constatons quelques changements au niveau de l’écriture du code dans plusieurs cas.

Les accélérations

GSAP se veut plus lisible, plus simple avec moins de code sur tous les accélérations standards.

Par exemple, la syntaxe :

• Bounce.easeOut
• Bounce.easeIn
• Bounce.easeInOut

Devient :

• bounce.out
• bounce.in
• bounce.InOut

La durée

La durée n’est plus un paramètre de la variable mais devient un objet qui se place dans la variable.

See the Pen
GSAP – Syntaxe by Melanie (@mlazarus)
on CodePen.

De plus, comme vous pouvez le constater, on ne retrouve plus l’objet TweenMax. La nouvelle mise à jour a fusionné les bibliothèques JavaScript TweenMax, TweenLite ainsi que TweenLineMax et TweenLineLite en un seul objet, plus clair et plus simple : gsap

Pour résumer, GSAP 3 se voulait plus lisible avec moins de code pour moins d’erreurs.
Mais, pas de panique, GSAP s’accorde pour que les anciennes syntaxes fonctionnent toujours. Donc même si, dans cette nouvelle version, les bibliothèques JavaScript TweenMax, TweenLite, … n’existent plus, elles sont toujours supportées grâce à des alias !
Cependant, il est tout de même recommandé d’utiliser la version GSAP 3 au moins pour les nouveaux projets.
GSAP, à opéré de gros changements mais rien de brutal finalement ?

Moins de code

La réduction du code se fait aussi grâce aux paramètres hérités des éléments parents.
Alors qu’avec l’ancienne version de GSAP il fallait réécrire les paramètres sur tous les objets en mouvement, et ce, même si l’animation restait identique, maintenant, grâce à l’héritage des paramètres des éléments parents sur les éléments enfants, moins de code est nécessaire. Les éléments enfants adoptent le même comportement que leurs parents.

See the Pen
GSAP – Mouvement by Melanie (@mlazarus)
on CodePen.

Des animations extensibles à l’infini

GSAP 3 propose de nombreuses animations déjà préparées pour être utilisées directement telles quelles. Cependant, il est aussi possible de créer soi-même ses propres animations.

Les fonctions

On peut écrire des animations en JavaScript à la main, en les mettant sous forme d’une fonction que l’on va appeler lorsque l’on souhaite l’utiliser.

See the Pen
GSAP – Fonction by Melanie (@mlazarus)
on CodePen.

La valeur “defaults”, ici duration, est disponible directement dans config

MotionPathPlugin

Avec “MotionPathPlugin”, il est possible de créer une trajectoire et de l’importer dans le code en SVG.

Pour les membres du club, une option s’ajoute. Grâce à la fonction “MotionPathHelper.create” une courbe apparaît dans le navigateur, permettant alors de dessiner et modifier la trajectoire à l’aide de la souris en cliquant et déplaçant les différents points de la courbe.

Les animations

Lancement

En ce qui concerne le lancement des animations, il fallait utiliser l’objet Timeline et calculer à quel moment l’animation suivante allait se lancer. Cela pouvait vite être compliqué si on changeait le début du lancement de la première animation. Il fallait recalculer tous les timings.

Tout ça est résolu avec GSAP 3 grâce aux signes “<” et “>” qui permettent de définir un timing de façon relative. Ils indiquent à quel moment l’animation doit se lancer par rapport à la dernière animation jouée.

See the Pen
GSAP – Lancement by Melanie (@mlazarus)
on CodePen.

Aléatoire

Des rendus aléatoires sont possibles avec le paramètre “random”. Il suffit d’indiquer des chiffres ou une plage de chiffres en fonction de ce que l’on souhaite avoir, pour que la fonction rende une valeur au hasard. Cela est aussi possible avec des couleurs.

See the Pen
GSAP – Random by Melanie (@mlazarus)
on CodePen.

Les fonctions utilitaires

Snap

Snap fonctionne comme un aimant. Il permet de retourner la valeur la plus proche de la valeur d’entrée, en fonction d’un palier ou bien d’un tableau de valeurs. On peut également indiquer un rayon d’action dans lequel la valeur est snapée qui agit autour de chaque palier.

See the Pen
GSAP – Snap by Melanie (@mlazarus)
on CodePen.

mapRange

mapRange permet de transposer la valeur d’une échelle à la valeur d’une autre échelle. Par exemple, avec mapRange, on peut reporter la position d’une souris sur un écran par rapport à la largeur de l’écran en pourcentage.

interpolate

interpolate permet de prendre la valeur qui se situe à un point donné dans une plage de données. Prenons un exemple avec des couleurs : la plage commence à la couleur rouge et finit à la couleur orange. Si on demande la valeur à 50%, on obtiendra un code rgba qui sera un mixe entre le code rgba de la couleur rouge et celui de la couleur orange.

See the Pen
GSAP – Interpolate by Melanie (@mlazarus)
on CodePen.

pipe

Cette fonction pipe permet d’utiliser et de fusionner plusieurs fonctions utilitaires en une seule variable.

See the Pen
Numendo DOM Audio Viewer by Cédric Lambert (@clambert68)
on CodePen.

GSAP 3 inclut de nombreuses nouvelles fonctionnalités pour animer votre DOM ou vos Canvas. Quelques changement au niveau syntaxique et des paramètres qui faciliteront vos animations. Laissez votre imagination faire le reste en testant les animations sur votre site ou votre application !

N’hésitez pas à lire d’autres articles sur le blog de Numendo !