GSAP

GSAP a quatre méthodes de tween. Chacune répond à un scénario précis. Les comprendre, c'est maîtriser 80% des animations quotidiennes.

gsap.to()

L'élément part de son état actuel et va vers les valeurs cibles.

// L'élément est à x: 0 dans le DOM
gsap.to('.box', {
  x: 400,        // va vers x: 400
  duration: 1,
})

Cas d'usage : tout ce qui est déclenché par un événement (clic, hover, scroll). L'état initial est l'état visible actuel.

gsap.from()

L'élément part des valeurs définies et revient vers son état actuel dans le DOM.

// L'élément est positionné normalement dans la page
gsap.from('.card', {
  y: 60,         // part de y: 60 (décalé vers le bas)
  opacity: 0,    // part de invisible
  duration: 0.8,
})

C'est la méthode reine pour les animations d'entrée. L'élément est positionné correctement en CSS, GSAP l'anime depuis un état "hors champ" vers sa position finale.

// Animation d'entrée classique pour un titre
gsap.from('h1', {
  y: 40,
  opacity: 0,
  duration: 1,
  ease: 'power3.out',
})

gsap.fromTo()

Contrôle total : vous définissez l'état de départ et l'état d'arrivée.

gsap.fromTo(
  '.element',
  { x: -100, opacity: 0 },  // from
  { x: 0, opacity: 1, duration: 0.6 }  // to
)

Utile quand vous ne pouvez pas faire confiance à l'état DOM (animations répétées, éléments créés dynamiquement).

gsap.set()

Définit des valeurs instantanément, sans animation. Equivalent d'un duration: 0.

// Positionner avant d'animer
gsap.set('.menu', { x: -300, visibility: 'hidden' })
 
// Plus tard, animer vers la position visible
gsap.to('.menu', { x: 0, visibility: 'visible', duration: 0.4 })

Les eases

L'ease définit la courbe d'accélération d'une animation. C'est ce qui fait la différence entre une animation mécanique et une animation qui semble naturelle.

La nomenclature GSAP

Chaque ease a un nom et une variante de direction :

power2.out
──────────
  │      │
  nom    direction : in | out | inOut

• in : accélère au début, lent au début
• out : décélère à la fin, le plus utilisé pour les entrées d'éléments
• inOut : accélère puis décélère, symétrique

Les eases disponibles

// Polynomiales (power0 = none, power1 = expo légère... power4 = forte)
ease: 'power1.out'
ease: 'power2.out'   // valeur par défaut — bon équilibre
ease: 'power3.out'
ease: 'power4.out'   // très rapide puis s'arrête net
 
// Physiques
ease: 'bounce.out'   // rebondit à la fin
ease: 'elastic.out(1, 0.3)'  // ressort, paramétrable
ease: 'back.out(1.7)'        // dépasse puis revient
 
// Linéaire
ease: 'none'   // vitesse constante
 
// Sinus / circulaire
ease: 'sine.out'
ease: 'circ.out'
ease: 'expo.out'

Règle pratique :

• Entrées d'éléments → power2.out ou power3.out
• Sorties d'éléments → power2.in
• Effets de rebond → back.out(1.7) ou elastic.out
• Animations mécaniques / scroll → none

L'outil Ease Visualizer

GreenSock propose un visualiseur en ligne pour prévisualiser chaque ease. Testez-les — l'ease change radicalement le ressenti d'une animation.

Callbacks

GSAP appelle des fonctions à des moments précis du cycle de vie d'un tween.

gsap.to('.box', {
  x: 400,
  duration: 1,
  onStart: () => console.log('animation démarrée'),
  onComplete: () => console.log('animation terminée'),
  onUpdate: () => {
    // Appelé à chaque frame — éviter les opérations lourdes ici
  },
  onRepeat: () => console.log('répétition'),
})

Répétition

gsap.to('.pulse', {
  scale: 1.2,
  duration: 0.6,
  repeat: -1,      // -1 = infini
  yoyo: true,      // fait l'aller-retour : 1 → 1.2 → 1 → 1.2...
  ease: 'sine.inOut',
})

yoyo: true joue l'animation dans les deux sens alternativement. Sans yoyo, l'élément revient en saut au point de départ entre chaque répétition.

Delay et décalages

// Delay simple
gsap.to('.element', {
  opacity: 0,
  delay: 0.5,    // attend 0.5s avant de démarrer
  duration: 1,
})

Pour animer plusieurs éléments avec décalage entre eux, c'est stagger (couvert au chapitre 5). Ne pas faire ça manuellement avec des delay incrémentaux — c'est fragile et difficile à maintenir.

Contrôler un tween

gsap.to() retourne une instance de tween qu'on peut contrôler.

const tween = gsap.to('.box', {
  x: 400,
  duration: 2,
  paused: true,  // ne démarre pas immédiatement
})
 
// Contrôles
tween.play()
tween.pause()
tween.reverse()
tween.restart()
tween.progress(0.5)  // saute à 50% de l'animation
tween.kill()         // détruit le tween, libère les ressources

paused: true est utile pour préparer une animation et la déclencher sur un événement.

const enterAnim = gsap.from('.hero-text', {
  y: 30,
  opacity: 0,
  duration: 0.8,
  paused: true,
})
 
document.querySelector('.cta').addEventListener('click', () => {
  enterAnim.restart()
})

defaults() — éviter la répétition

Si plusieurs tweens partagent les mêmes options, gsap.defaults() les définit globalement.

gsap.defaults({
  duration: 0.8,
  ease: 'power2.out',
})
 
// Ces deux tweens utilisent maintenant duration: 0.8 et ease: 'power2.out'
gsap.to('.box1', { x: 100 })
gsap.to('.box2', { y: 50 })

Les defaults s'appliquent à la session entière. Pour des defaults locaux à un groupe d'animations, c'est le rôle des timelines (chapitre suivant).

Vous contrôlez maintenant les tweens individuels. La vraie puissance de GSAP vient des timelines — le moyen de séquencer et d'orchestrer des animations complexes sans gérer des délais à la main.