Catégories
Astuces et Design

Animation Web GreenSock 3: découvrez les nouvelles fonctionnalités de GSAP

Le 1er novembre 2019, GreenSock Animation Platform (GSAP) a publié la version 3, qui est sa mise à niveau la plus importante à ce jour.

GSAP est une bibliothèque d'animation JavaScript puissante, rétrocompatible, performante et mature qui vous permet d'animer à peu près tout sur le Web – comme des éléments DOM, des objets JS, des SVG, des propriétés CSS, etc. Nous avons déjà couvert GSAP, par exemple dans notre guide des séries et plugins pour débutants, et nous sommes de grands fans.

Sa syntaxe intuitive permet aux développeurs de créer des effets d'animation époustouflants dans un laps de temps relativement court et avec un minimum de code.

Dans cet article, je vais mettre en évidence quelques nouvelles fonctionnalités intéressantes de GreenSock 3 et vous expliquer comment les utiliser pour faire bouger les choses sur le Web en un rien de temps.

Quoi de neuf dans GreenSock 3

Plus de fonctionnalités et des tailles de fichiers plus petites

GreenSock a été reconstruit à partir de zéro à l'aide de modules ES6. Il est toujours riche en fonctionnalités, avec plus de 50 nouvelles fonctionnalités de bibliothèque, mais ce n'est que la moitié de sa taille!

Syntaxe condensée pour un codage rapide

Si vous avez déjà utilisé GSAP, vous connaissez déjà sa syntaxe intuitive et adaptée aux débutants. La nouvelle API est encore plus simplifiée et rapide à apprendre et à utiliser.

Par exemple, vous n’avez plus besoin de décider si vous souhaitez utiliser TweenLite ou TweenMax, TimelineLite ou TimelineMax. Il n’y a qu’un seul objet, le gsap objet:

// tween
gsap.to(selector, {})

// timeline
const tl = gsap.timeline()

Aussi, duration n'est plus un paramètre de la to(), from(), ou fromTo() méthodes, mais il est défini dans le vars objet. En particulier, l'ancien

TweenMax.to(selector, 1, {})

devient

gsap.to(selector, {
  duration: 1
})

Beaucoup plus lisible et flexible. En fait, vous pouvez maintenant définir le duration en utilisant une fonction, par exemple.

Un autre avantage de cette nouvelle API simplifiée est que les animations stupéfiantes sont un jeu d'enfant à coder. Pas besoin d'utiliser l'ancien staggerTo(), staggerFrom(), et staggerFromTo() méthodes car vous pouvez ajouter des décalages directement dans vars objet des interpolations régulières:

gsap.to(selector, {
  x: 50,
  duration: 1,
  stagger: 0.5
})

Pour plus de flexibilité, vous pouvez utiliser un objet décalé comme celui-ci:

gsap.to(selector, {
  x: 50,
  duration: 1,
  stagger: {
    amount: 2,
    from: 'center'
  }
})

Enfin, les facilités de GSAP ont toujours été géniales, mais un peu verbeuses. Pas maintenant. GreenSock 3 est livré avec une syntaxe plus concise et lisible pour la configuration des facilités. Par exemple, au lieu de:

Elastic.easeOut
Elastic.easeIn
Elastic.easeInOut

vous écrivez simplement:

'elastic'  // same as 'elastic.out'
'elastic.in'  
'elastic.inOut'

Une autre simplification consiste en la possibilité de remplacer les étiquettes par le < symbole pour indiquer l'heure de début de l'animation la plus récemment ajoutée et > symbole pour indiquer l'heure de fin de l'animation la plus récemment ajoutée. Vous trouverez ci-dessous un exemple de la façon dont vous pouvez utiliser des étiquettes dans une chronologie:

gsap.timeline()
  .add('start')
  // this tween starts at the beginning of the
  // entire animation
  .to(selector, {}, 'start')
  // this tween starts 0.5 seconds after
  // the previous tween
  .to(selector, {}, 'start+=0.5')

Vous pouvez maintenant réécrire le code ci-dessus comme suit:

gsap.timeline()
  .to(selector, {}, '<')
  .to(selector, {}, '<0.5')

Valeurs par défaut héréditaires pour la chronologie

Si les valeurs de certains des paramètres de votre chronologie restent les mêmes tout au long des interpolations enfants, il est révolu le temps de devoir écrire ces valeurs encore et encore. GreenSock 3 vous permet de définir ces propriétés une fois dans la chronologie parent et elles seront héritées par les tweens enfants.

Par exemple, au lieu d'écrire:

const tl = new TimelineMax()
tl.to(selector, 2, {
  ease:  Power2.easeInOut,
  rotation:  -180
})
  .to(selector, 2, {
    ease:  Power2.easeInOut,
    rotation:  -360
})

Maintenant, vous pouvez simplement écrire:

const tl = gsap.timeline({defaults: {
  duration: 2,
  ease:  'power2.inOut'
}} )

tl.to(selector, {
  rotation:  -180  
})
.to(selector, {
  rotation:  -360
})

Images clés

Votre code GreenSock 3 devient encore plus concis et lisible avec des images clés. Les images clés, un concept assez familier aux développeurs CSS, sont parfaites dans les cas où vous souhaitez animer le même élément de différentes manières. Au lieu de créer une interpolation distincte pour chaque étape de l'animation, vous pouvez désormais transmettre un tableau d'images clés au {} vars objet et toutes les étapes de l'animation seront parfaitement séquencées à l'intérieur de la même interpolation. Voici un exemple de fonctionnement:

gsap.to(selector, {keyframes: {
  {x: 250, duration: 1},
  {y: 100, duration: 1, delay: 0.5}
}})

Plus de fonctions utilitaires

Cette dernière version de la bibliothèque GreenSock est livrée avec un tas de nouvelles méthodes utilitaires telles que snap(), qui vous permet d'aligner une valeur sur un incrément ou sur la valeur la plus proche d'un tableau, et random(), ce qui permet de générer un nombre aléatoire basé sur des paramètres ou de sélectionner au hasard un élément dans un tableau, et bien plus encore.

Animations simples

Voici un exemple d'utilisation des trois méthodes GSAP de base: to(), from(), et fromTo():

Voir le stylo
GSAP3-to-from-from-exemples par SitePoint (@SitePoint)
sur CodePen.

GSAP facilite les animations réalistes

Facilite sont des composants fondamentaux de l'animation. Ils incarnent le timing des préadolescents et ajoutent ainsi de l'intérêt et du naturel au mouvement que vous créez à l'écran.

GSAP vous permet d'ajouter des tonnes d'accélérations au moyen de l'égaliseur GreenSock Ease, un outil pratique qui offre une représentation visuelle des options d'accélération GSAP lorsque vous sélectionnez et ajustez le meilleur ajustement pour l'effet particulier que vous recherchez.

Essayons quelques conseils pour notre oiseau musical:

Voir le stylo
Exemple GSAP3-eases par SitePoint (@SitePoint)
sur CodePen.

Un exemple d'animation d'images clés avec GSAP

Comme je l'ai souligné ci-dessus, GreenSock 3 vous offre la possibilité d'implémenter un certain nombre d'interpolations sur le même élément de manière plus efficace et lisible en utilisant des images clés.

Voici un exemple:

Voir le stylo
Exemple d'images clés GSAP3 par SitePoint (@SitePoint)
sur CodePen.

L'utilisation d'images clés GSAP sur l'élément oiseau SVG me permet d'appliquer un certain nombre d'interpolations sans avoir à écrire chaque interpolation séparément. L’avantage est que je n’ai pas besoin de répéter une partie du code - par exemple, le code du sélecteur ('.bird') ou l'un des paramètres qui restent les mêmes tout au long de l'animation.

Prendre le contrôle des animations complexes avec la chronologie GSAP

Les préadolescents GreenSock sont puissants et vous pouvez faire beaucoup avec eux. Cependant, pour vous assurer qu'une interpolation se déplace après l'autre, vous devez définir le delay propriété de la seconde interpolation d'un montant qui tient compte de la durée de la première interpolation. Cependant, cela pourrait rendre votre code d'animation difficile à maintenir, en particulier dans les animations plus complexes. Que faire si vous devez ajouter d'autres préadolescents ou modifier le duration propriété dans l'un des retards de l'un des préadolescents? Vous devrez ensuite modifier les valeurs de la totalité ou de la plupart des delay propriété sur les autres préadolescents. Pas pratique du tout.

Une approche plus simple, plus stable et maintenable consisterait à utiliser le calendrier du GSAP. Avec une chronologie, toutes les interpolations qu'il contient sont exécutées par défaut les unes après les autres, sans qu'il soit nécessaire d'utiliser des délais.

Encore une fois, si vous observez comment le mouvement naturel de différentes pièces se produit, vous vous rendrez vite compte que ces pièces ne se déplacent pas toutes en succession mécanique les unes par rapport aux autres. Très probablement, certaines pièces commencent à bouger tandis que d'autres sont déjà en mouvement. Ou, certaines parties s'arrêtent un peu avant ou un peu après certaines autres parties. La chronologie GSAP met à disposition quelques options pratiques pour vous permettre de régler avec précision le début et la fin des interpolations les unes par rapport aux autres. Les voici:

  • Le temps absolu, comme un nombre. Par exemple, 2 signifie que l'interpolation suivante s'anime deux secondes après le début de la chronologie.
  • Temps relatif par rapport à la fin de la chronologie entière: '+=2' ou '-=2'. Cela signifie que l'interpolation s'anime deux secondes après la fin de la chronologie ou chevauche la fin de la chronologie de deux secondes respectivement.
  • Étiquette: 'myLabel'. L'interpolation s'anime au point d'insertion d'une étiquette spécifique. Si vous n'avez pas créé ce libellé, GSAP l'ajoute à la fin de la chronologie.
  • Par rapport à une étiquette: 'myLabel+=2' ou 'myLabel-=2'. L'interpolation s'anime deux secondes après ou deux secondes avant la fin de la 'myLabel' étiquette respectivement.
  • Au début de l'animation la plus récemment ajoutée (nouveauté de GSAP 3): '<'.
  • À la fin de l'animation la plus récemment ajoutée (nouveauté de GSAP 3): '>'.
  • Par rapport au départ de l'animation la plus récemment ajoutée (nouveauté de GSAP 3): '<2' ou '<-2'. L'interpolation s'anime deux secondes après le départ de l'animation la plus récemment ajoutée ou deux secondes avant le début de l'animation la plus récemment ajoutée respectivement.
  • Par rapport à la fin de l'animation la plus récemment ajoutée (nouveauté de GSAP 3): '>2' ou '>-2'. L'interpolation s'anime deux secondes après la fin de la dernière animation ajoutée ou deux secondes avant la fin de l'animation la plus récemment ajoutée respectivement.

Un dernier avantage de l'utilisation d'une chronologie est nidification. Vous pouvez créer des chronologies qui se concentrent sur des parties spécifiques de l'animation et les imbriquer dans une chronologie principale. Cette technique est vraiment utile lorsque vous avez besoin de coordonner les différentes parties de l'animation en un tout harmonieux et bien synchronisé. C'est également un moyen de rendre votre code plus lisible et maintenable.

Jetez un œil à la démo ci-dessous pour un exemple de la façon dont vous utiliseriez des chronologies imbriquées:

Voir le stylo
Exemple de chronologie GSAP3 par SitePoint (@SitePoint)
sur CodePen.

Pour affiner votre animation, il peut être utile de la ralentir pendant le développement. Pour ce faire, utilisez:

master.timeScale(0.2)

Il est désormais beaucoup plus facile de contrôler les horaires relatifs et d’autres petits détails. N'oubliez pas de supprimer cette ligne de code en production, cependant!

Le plugin MotionPath

GSAP met à disposition un tas de plugins incroyables qui vous permettent de créer des effets compliqués et amusants en quelques lignes de code intuitif.

L'un des types d'animation les plus intéressants que vous puissiez réaliser est de représenter un objet alors qu'il se déplace en douceur le long d'un chemin. Pas facile à réaliser, du moins sans GSAP.

Le nouveau plugin MotionPath permet de faire bouger n'importe quel élément le long d'un chemin SVG. L'implémentation la plus simple du plugin ressemble à ceci:

// register the plugin (just once)
gsap.registerPlugin(MotionPathPlugin)

    gsap.to('.bird', {
      x: 20,
      y: 50,
      motionPath: '#path'
    } )

Tant que vous avez un chemin SVG avec le id de chemin, vous êtes prêt à partir. Vous pouvez également saisir directement les valeurs de chemin au lieu de id et cela fonctionnera.

Vous pouvez affiner l'effet en utilisant différentes propriétés que vous pouvez définir à l'intérieur d'un objet motionPath, comme vous pouvez le voir dans la démo ci-dessous:

Voir le stylo
Exemple de chemin de mouvement GSAP3 par SitePoint (@SitePoint)
sur CodePen.

Pour en savoir plus sur les fonctionnalités impressionnantes que ce plugin met à votre disposition, rendez-vous sur la documentation.

ScrollTrigger est le dernier plugin que GreenSock a lancé et il possède des capacités étonnantes qui vous permettent de prendre le contrôle total des animations de défilement de manière efficace et intuitive. Par exemple:

  • vous pouvez animer à peu près tout sur le scroll avec ce plugin - comme les éléments DOM, CSS, SVG, WebGL, Canvas
  • vous pouvez facilement parcourir les animations
  • vous pouvez épingler des éléments en place
  • vous pouvez créer des animations intelligentes directionnelles

Et les ajustements au redimensionnement de l'écran et aux excellentes performances sont pris en charge.

Après avoir importé le plugin dans votre projet, ce que vous pouvez facilement faire via le CDN sur le site Web de GSAP, et l'avoir enregistré pour qu'il s'intègre parfaitement à la bibliothèque principale, le moyen le plus simple de commencer à l'utiliser est le suivant:

// register ScrollTrigger
gsap.registerPlugin(ScrollTrigger)

/* implement the plugin to animate an element
 300 px to the right when the element is in view */
gsap.to(element, {
  x: 300,
  duration: 2,
  scrollTrigger: element
})  

Lorsque l'élément indiqué dans le scrollTrigger propriété est à l'intérieur de la fenêtre, l'animation a lieu.

Pour implémenter la myriade de paramètres que ce plugin rend disponible, utilisez simplement un scrollTrigger objet littéral. Par exemple:

Voir le stylo
GSAP3-ScrollTriggerExample par SitePoint (@SitePoint)
sur CodePen.

le scrollTrigger objet de la démo ci-dessus comprend le trigger, qui est l'élément que vous souhaitez animer tel qu'il apparaît dans la fenêtre.

Il comprend également le start , que vous pouvez utiliser pour indiquer au plugin la position à laquelle l'élément doit être pendant le défilement pour que l'animation commence. Dans le cas présent, l'élément commencera à se déplacer dès que sa partie supérieure atteindra le centre de la fenêtre.

Vous pouvez spécifier ce que vous voulez que votre élément de déclenchement fasse lorsque les utilisateurs le défilent ou qu'ils reviennent à sa position en définissant le toggleActions propriété de la scrollTrigger objet. GSAP met à disposition différentes options pour un contrôle maximal, que vous pouvez définir lorsque les événements suivants se déclenchent: onEnter, onLeave, onEnterBack, et onLeaveBack. Par défaut, ces options sont définies comme suit: 'play none none none'. Dans la démonstration ci-dessus, j'ai ajusté mon animation afin que l'image soit révélée chaque fois qu'elle se trouve dans la position souhaitée dans la fenêtre et qu'elle soit masquée lorsqu'elle n'est plus visible, en utilisant la ligne de code suivante: toggleActions: 'play reverse restart reverse'.

Pour en savoir plus sur ce puissant plugin, consultez ces ressources:

Conclusion

Cette introduction rapide vient de gratter la surface de ce que vous pouvez faire avec GreenSock. Si vous êtes curieux, commencez à vous plonger dans sa documentation accessible et complète.

Maintenant, c’est à vous. Prenez la dernière version de GreenSock 3 et faites bouger les choses sur le Web!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *