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

Le 1er novembre 2019, la GreenSock Animation Platform (GSAP) a publié la version 3, qui est sa principale mise à jour à 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.

Sa syntaxe intuitive permet aux développeurs avec la possibilité 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 de GSAP 3 et vous aider à démarrer comment les utiliser pour faire bouger les choses sur le Web en un rien de temps.

Quoi de neuf dans GSAP 3

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

GreenSock a été entièrement reconstruit en utilisant des 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 le codage rapide

Si vous avez déjà utilisé GSAP, vous connaissez déjà sa syntaxe intuitive et conviviale pour les 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, l'objet gsap :

 // tween
gsap.to (sélecteur, {})

// chronologie
const tl = gsap.timeline ()

De plus, duration n'est plus un paramètre des méthodes to () from () ou fromTo () , mais il est placé à l'intérieur de l'objet vars . En particulier, l'ancien

 TweenMax.to (selector, 1, {})

devient

 gsap.to (sélecteur, {
  durée: 1
})

Beaucoup plus lisible et aussi flexible. En fait, vous pouvez maintenant définir la durée à l'aide d'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. Inutile d’utiliser les anciennes méthodes objet des interpolations régulières:

 gsap.to (sélecteur, {
  x: 50,
  durée: 1,
  échelonnement: 0,5
})

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

 gsap.to (selector, {
  x: 50,
  durée: 1,
  échelonnement: {
    montant: 2,
    de: 'centre'
  }
})

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

 Elastic.easeOut
Elastic.easeIn
Elastic.easeInOut

vous écrivez simplement:

 'elastique' // idem 'elastique.out'
'élastique.in'
'élastique.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 le symbole > pour indiquer l'heure de fin de l'animation la plus récemment ajoutée . Voici un exemple de la façon dont vous pouvez utiliser des étiquettes dans une chronologie:

 gsap.timeline ()
  .add ('démarrer')
  // cette interpolation commence au début de la
  // animation entière
  .to (sélecteur, {}, 'start')
  // cette interpolation démarre 0,5 seconde après
  // l'interpolation précédente
  .to (sélecteur, {}, 'start + = 0.5')

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

 gsap.timeline ()
  .to (sélecteur, {}, '<')
  .to (sélecteur, {}, '<0,5')

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

Si les valeurs de certains 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. GSAP 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 (sélecteur, 2, {
  facilité: Power2.easeInOut,
  rotation: -180
})
  .to (sélecteur, 2, {
    facilité: Power2.easeInOut,
    rotation: -360
})

Maintenant, vous pouvez simplement écrire:

 const tl = gsap.timeline ({defaults: {
  durée: 2,
  facilité: 'power2.inOut'
}})

tl.to (sélecteur, {
  rotation: -180
})
.to (sélecteur, {
  rotation: -360
})

Images clés

Votre code GSAP 3 devient encore plus concis et lisible avec les 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 maintenant passer un tableau d'images clés à l'objet {} vars et toutes les étapes de l'animation seront parfaitement séquencées dans la même interpolation. Voici un exemple de fonctionnement:

 gsap.to (selector, {keyframes: {
  {x: 250, durée: 1},
  {y: 100, durée: 1, délai: 0,5}
}})

Autres fonctions utilitaires

Cette dernière version de la bibliothèque GreenSock est livrée avec un tas de nouvelles méthodes utilitaires comme snap () qui vous permet d'aligner une valeur sur un incrément ou à 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 des tonnes de plus.

Animations simples

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

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

https://static.codepen.io/assets/embed/ei.js

GSAP Eases for Life-like Animations

Eases sont des composants fondamentaux de l'animation. Ils incarnent la synchronisation 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 de facilités au moyen du GreenSock Ease Equalizer un outil pratique qui offre un 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 simplifications pour notre oiseau musical:

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

https://static.codepen.io/assets/embed/ei.js

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

Comme je l'ai souligné ci-dessus, GSAP 3 vous donne la possibilité d'implémenter plusieurs 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 .

https://static.codepen.io/assets/embed/ei.js

L'utilisation d'images clés GSAP sur l'élément SVG bird 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.

continuer la lecture
Animation Web GreenSock 3: découvrez les nouvelles fonctionnalités de GSAP
sur SitePoint .

Source link