Front-end

GSAP est une bibliothèque d’animation JavaScript. Si vous êtes l’avez manqué, nous vous invitons à lire notre article sur GreenSock GSAP : animez le HTML de votre site !

Dans cet article, nous allons nous intéresser à la mise à jour que GSAP nous a proposée récemment.

GSAP 3, c’est, un changement sur le poids et les fonctionnalités proposées par la bibliothèque JavaScript. Son poids est divisé par 2 par rapport à TweenMax (116ko, la plus lourde bibliothèque JavaScript proposée par GSAP contre 58ko pour GSAP 3), tout en ajoutant plus de 50 nouvelles fonctionnalités.

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 !

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

Crystallize CMS e-commerce

Crystallize, un nouveau type de CMS e-commerce

Que peut apporter Crystallize à un site e-commerce ? En quoi est-il différent des autres CMS ? Dans cet article, nous vous présentons le CMS Crystallize, ses avantages et ses inconvénients dans une utilisation de site web e-commerce.

Créé par deux frères norvégiens Brad et Aleksander Farstad, le CMS e-commerce Crystallize répond aux exigences des CMS actuels, à savoir : avoir la capacité de gérer n’importe quel type de contenu, que ce soit du texte, une image, une vidéo, … indépendamment du support utilisé.

Hasura : obtenez n’importe quelle API GraphQL sur vos applications Postgres

Hasura : obtenez n’importe quelle API GraphQL sur vos applications Postgres

Cela fait maintenant 3 ans que Facebook a annoncé l’arrivée de GraphQL. Depuis, l’utilisation de ce langage de requêtes a augmenté de manière exponentielle. On compte plus de 700 000 téléchargements en juin 2018 (source : npm). La rédaction de Numendo vous propose cette semaine de découvrir Hasura : un produit open source capable de vous offrir des API GraphQL sur des applications Postgres nouvelles ou existantes.

Centre de préférences de confidentialité

    Cookies Fonctionnels

    gdpr[allowed_cookies], gdpr[consent_types], wfvt_2000878799, wordfence_verifiedHuman

    Advertising

    Cookies Satistiques

    _ga, _gat, _gid

    Cookies externes

    PREF, VISITOR_INFO1_LIVE, YSC, GPS, s_gl, CONSENT
    CONSENT, 1P_JAR