Gérer les amortis et le rythme des animations avec GSAP

Il est possible de contrôler l’accélération d’une animation dans GSAP en utilisant le paramètre ease. Ainsi, pour créer un ease, tu peux le définir par un type d’accélération et un amorti. Ça donnerait ça :

gsap.from( 
  "sélecteurCSS", 
  {
    …
    ease : "accélération.amorti"
  } 
);
gsap.to( 
  "sélecteurCSS", 
  {
    …
    ease : "accélération.amorti"
  } 
);

Utiliser les ease par défaut de GSAP

Ce n’est pas très parlant aux premiers abords mais les accélérations peuvent être de différents types :

  • none
  • power1
  • power2
  • power3
  • power4
  • back
  • elastic
  • bounce
  • rough
  • slow
  • steps
  • circe
  • expo
  • sine
  • Custom

Elles sont assez différentes, mais tu ne peux pas vraiment dire ce qu’elles font réellement juste avec leurs noms.

Et puis il y a trois types d’amorti. Tu peux utiliser :

Il existe un très bon visualiseur que tu peux utiliser, où tu peux voir les différents types d’accélération et leur fonctionnement. Ainsi, lorsque tu cliques sur l’un des rythmes proposé, il te montre ce que ça va donner.

Une fois ton rythme trouvé tu peux copier/coller le résultat et faire de ton animation un mouvement fluide et agréable à regarder.

Il n’y a pas de combinaison parfaite, mais le subtile mélange d’un rythme, d’un amorti et d’une durée bien sentie peuvent changer le rendu final de ton animation.

Créer un Easing Personnalisé