GSAP a un écosystème de plugins qui étend ses capacités de base. Certains sont gratuits, d'autres nécessitent un abonnement Club GSAP. Ce chapitre couvre les plus utiles et les patterns avancés pour finir une animation proprement.

TextPlugin — animer du texte caractère par caractère

# Inclus dans le package gsap

import { TextPlugin } from 'gsap/TextPlugin'
gsap.registerPlugin(TextPlugin)

gsap.to('.terminal', {
  duration: 2,
  text: 'npm install gsap',
  ease: 'none',  // toujours none pour le text typing
})

Pour un effet machine à écrire complet :

const phrases = ['Développeur', 'Designer', 'Créateur']
let current = 0
 
function typePhrase() {
  const tl = gsap.timeline({
    onComplete: () => {
      current = (current + 1) % phrases.length
      setTimeout(typePhrase, 500)
    },
  })
 
  tl
    .to('.typewriter', {
      text: phrases[current],
      duration: 1.2,
      ease: 'none',
    })
    .to('.typewriter', {
      text: '',
      duration: 0.6,
      ease: 'none',
      delay: 1.5,
    })
}
 
typePhrase()

TextPlugin remplace le contenu textuel d'un élément progressivement. Il respecte les balises HTML si vous passez { delimiter: '' }.

Flip — animations de layout

Flip résout le problème d'animer des changements de layout qui ne peuvent pas être animés directement en CSS (changement de position dans le DOM, changement de display, réorganisation de grille).

import { Flip } from 'gsap/Flip'
gsap.registerPlugin(Flip)

Le pattern en trois étapes : capture l'état avant, modifie le DOM, anime depuis l'état capturé vers le nouvel état.

// 1. Capturer l'état actuel
const state = Flip.getState('.card')
 
// 2. Modifier le DOM (changement de layout)
container.classList.toggle('grid-view')
 
// 3. Animer la transition
Flip.from(state, {
  duration: 0.6,
  ease: 'power2.out',
  stagger: 0.05,
  absoluteOnLeave: true,  // les éléments qui partent gardent leur position absolue
})

Exemple : filtrer une grille

const cards = document.querySelectorAll('.card')
const filterBtns = document.querySelectorAll('.filter-btn')
 
filterBtns.forEach((btn) => {
  btn.addEventListener('click', () => {
    const category = btn.dataset.category
 
    // Capturer avant le changement
    const state = Flip.getState(cards)
 
    // Modifier la visibilité
    cards.forEach((card) => {
      card.classList.toggle(
        'hidden',
        category !== 'all' && card.dataset.category !== category
      )
    })
 
    // Animer
    Flip.from(state, {
      duration: 0.5,
      ease: 'power2.inOut',
      stagger: 0.04,
      onLeave: (elements) =>
        gsap.to(elements, { opacity: 0, scale: 0.8, duration: 0.3 }),
      onEnter: (elements) =>
        gsap.from(elements, { opacity: 0, scale: 0.8, duration: 0.3 }),
    })
  })
})

Flip calcule la différence entre la position avant et après, puis joue une animation entre les deux. Le DOM est déjà dans son état final — GSAP simule la transition.

MotionPathPlugin — animer sur un chemin SVG

import { MotionPathPlugin } from 'gsap/MotionPathPlugin'
gsap.registerPlugin(MotionPathPlugin)

<svg viewBox="0 0 800 400">
  <path id="track" d="M 50,200 C 150,50 650,350 750,200" fill="none"/>
  <div id="car"></div>
</svg>

gsap.to('#car', {
  duration: 3,
  ease: 'power1.inOut',
  motionPath: {
    path: '#track',
    align: '#track',
    autoRotate: true,       // tourne selon la direction du chemin
    alignOrigin: [0.5, 0.5], // point d'ancrage de l'élément
  },
})

Combiné avec ScrollTrigger :

gsap.to('#dot', {
  motionPath: {
    path: '#curve',
    align: '#curve',
    autoRotate: true,
  },
  ease: 'none',
  scrollTrigger: {
    trigger: '.path-section',
    start: 'top center',
    end: 'bottom center',
    scrub: 1,
  },
})

L'élément suit le chemin au rythme du scroll — effet classique pour les timelines interactives ou les processus en étapes.

DrawSVGPlugin — tracer des SVG (Club GSAP)

DrawSVGPlugin permet d'animer le tracé d'un SVG progressivement — comme si quelqu'un dessinait à la main.

// Nécessite un abonnement Club GSAP
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'
gsap.registerPlugin(DrawSVGPlugin)
 
gsap.from('#path', {
  drawSVG: '0%',   // part de 0% tracé
  duration: 2,
  ease: 'power2.inOut',
})
 
// Animer une portion spécifique
gsap.to('#path', {
  drawSVG: '25% 75%',  // trace de 25% à 75% du chemin
  duration: 1,
})

Parfait pour des logos animés, des illustrations qui se dessinent, des icônes qui s'animent au hover.

SplitText — animer les lettres et mots (Club GSAP)

SplitText découpe un texte en caractères, mots, ou lignes, chacun dans un span indépendant — ce qui permet de les animer individuellement.

import { SplitText } from 'gsap/SplitText'
gsap.registerPlugin(SplitText)
 
const split = new SplitText('.headline', { type: 'chars,words' })
 
gsap.from(split.chars, {
  opacity: 0,
  y: 40,
  rotationX: -90,
  stagger: 0.02,
  duration: 0.6,
  ease: 'back.out(1.7)',
  onComplete: () => split.revert(),  // nettoyer les spans après l'animation
})

split.chars est un tableau de tous les caractères. split.words pour les mots, split.lines pour les lignes.

CustomEase — courbes d'ease sur mesure

import { CustomEase } from 'gsap/CustomEase'
gsap.registerPlugin(CustomEase)
 
// Définir un ease custom via une courbe de Bézier (format SVG path)
CustomEase.create('myEase', 'M0,0 C0.14,0 0.242,0.438 0.272,0.561 0.313,0.728 0.354,0.963 0.362,1 0.37,0.985 0.414,0.961 0.455,0.963 0.51,0.967 0.596,1 1,1')
 
gsap.to('.element', {
  y: -100,
  duration: 1.5,
  ease: 'myEase',
})

Les courbes se créent visuellement dans l'outil CustomEase Editor de GreenSock, puis on copie le path SVG.

Observer — interactions unifiées

Observer unifie les événements de scroll, wheel, touch, et pointer en une API cohérente.

import { Observer } from 'gsap/Observer'
gsap.registerPlugin(Observer)
 
Observer.create({
  target: window,
  type: 'wheel,touch,pointer',
  onDown: () => navigateToPrevSection(),
  onUp: () => navigateToNextSection(),
  tolerance: 10,     // seuil minimal de mouvement
  preventDefault: true,
})

Utile pour les expériences fullscreen avec navigation au scroll/swipe, sans avoir à gérer trois types d'événements différents.

Performance — bonnes pratiques

will-change

Pour des animations très fréquentes (parallax, cursor), indiquer au navigateur à l'avance :

gsap.set('.parallax', { willChange: 'transform' })
 
// Retirer après l'animation si elle n'est pas en boucle
gsap.to('.parallax', {
  y: -200,
  onComplete: () => gsap.set('.parallax', { willChange: 'auto' }),
})

Trop de will-change simultanés dégradent les performances — utiliser avec parcimonie.

Lazy kill

Tuer les ScrollTriggers d'éléments qui quittent le viewport dans des listes longues :

ScrollTrigger.create({
  trigger: '.item',
  onLeave: (self) => self.kill(),
})

force3D

Pour les animations critiques en performance :

gsap.to('.fast-element', {
  x: 100,
  force3D: true,  // force GPU compositing via translateZ(0)
})

GSAP active force3D automatiquement sur les animations x/y — c'est mentionné pour les cas où vous animez des propriétés qui ne déclenchent pas la composition GPU naturellement.

Récapitulatif des plugins

Plugin	Gratuit	Usage
ScrollTrigger	✓	Animations au scroll
Flip	✓	Transitions de layout
MotionPathPlugin	✓	Animation sur chemin SVG
Observer	✓	Scroll/swipe unifié
TextPlugin	✓	Typing effect
CustomEase	✓	Courbes custom
DrawSVGPlugin	Club	Tracé de SVG
SplitText	Club	Animation lettre par lettre
MorphSVGPlugin	Club	Morphing entre formes SVG
ScrambleText	Club	Texte qui se brouille
GSDevTools	Club	Panel de debug en temps réel

Vous avez maintenant une vision complète de GSAP : des tweens basiques jusqu'aux plugins avancés, en passant par les timelines, ScrollTrigger, et l'intégration React. La clé pour progresser rapidement : construire des choses. Prenez un projet, ajoutez une animation d'entrée avec from(), une timeline pour séquencer, et un ScrollTrigger pour la déclencher. La syntaxe devient intuitive après quelques heures de pratique.

TextPlugin — animer du texte caractère par caractère

# Inclus dans le package gsap

import { TextPlugin } from 'gsap/TextPlugin'
gsap.registerPlugin(TextPlugin)

gsap.to('.terminal', {
  duration: 2,
  text: 'npm install gsap',
  ease: 'none',  // toujours none pour le text typing
})

Pour un effet machine à écrire complet :

const phrases = ['Développeur', 'Designer', 'Créateur']
let current = 0
 
function typePhrase() {
  const tl = gsap.timeline({
    onComplete: () => {
      current = (current + 1) % phrases.length
      setTimeout(typePhrase, 500)
    },
  })
 
  tl
    .to('.typewriter', {
      text: phrases[current],
      duration: 1.2,
      ease: 'none',
    })
    .to('.typewriter', {
      text: '',
      duration: 0.6,
      ease: 'none',
      delay: 1.5,
    })
}
 
typePhrase()

TextPlugin remplace le contenu textuel d'un élément progressivement. Il respecte les balises HTML si vous passez { delimiter: '' }.

Flip — animations de layout

import { Flip } from 'gsap/Flip'
gsap.registerPlugin(Flip)

Le pattern en trois étapes : capture l'état avant, modifie le DOM, anime depuis l'état capturé vers le nouvel état.

// 1. Capturer l'état actuel
const state = Flip.getState('.card')
 
// 2. Modifier le DOM (changement de layout)
container.classList.toggle('grid-view')
 
// 3. Animer la transition
Flip.from(state, {
  duration: 0.6,
  ease: 'power2.out',
  stagger: 0.05,
  absoluteOnLeave: true,  // les éléments qui partent gardent leur position absolue
})

Exemple : filtrer une grille

const cards = document.querySelectorAll('.card')
const filterBtns = document.querySelectorAll('.filter-btn')
 
filterBtns.forEach((btn) => {
  btn.addEventListener('click', () => {
    const category = btn.dataset.category
 
    // Capturer avant le changement
    const state = Flip.getState(cards)
 
    // Modifier la visibilité
    cards.forEach((card) => {
      card.classList.toggle(
        'hidden',
        category !== 'all' && card.dataset.category !== category
      )
    })
 
    // Animer
    Flip.from(state, {
      duration: 0.5,
      ease: 'power2.inOut',
      stagger: 0.04,
      onLeave: (elements) =>
        gsap.to(elements, { opacity: 0, scale: 0.8, duration: 0.3 }),
      onEnter: (elements) =>
        gsap.from(elements, { opacity: 0, scale: 0.8, duration: 0.3 }),
    })
  })
})

Flip calcule la différence entre la position avant et après, puis joue une animation entre les deux. Le DOM est déjà dans son état final — GSAP simule la transition.

MotionPathPlugin — animer sur un chemin SVG

import { MotionPathPlugin } from 'gsap/MotionPathPlugin'
gsap.registerPlugin(MotionPathPlugin)

<svg viewBox="0 0 800 400">
  <path id="track" d="M 50,200 C 150,50 650,350 750,200" fill="none"/>
  <div id="car"></div>
</svg>

gsap.to('#car', {
  duration: 3,
  ease: 'power1.inOut',
  motionPath: {
    path: '#track',
    align: '#track',
    autoRotate: true,       // tourne selon la direction du chemin
    alignOrigin: [0.5, 0.5], // point d'ancrage de l'élément
  },
})

Combiné avec ScrollTrigger :

gsap.to('#dot', {
  motionPath: {
    path: '#curve',
    align: '#curve',
    autoRotate: true,
  },
  ease: 'none',
  scrollTrigger: {
    trigger: '.path-section',
    start: 'top center',
    end: 'bottom center',
    scrub: 1,
  },
})

L'élément suit le chemin au rythme du scroll — effet classique pour les timelines interactives ou les processus en étapes.

DrawSVGPlugin — tracer des SVG (Club GSAP)

DrawSVGPlugin permet d'animer le tracé d'un SVG progressivement — comme si quelqu'un dessinait à la main.

// Nécessite un abonnement Club GSAP
import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'
gsap.registerPlugin(DrawSVGPlugin)
 
gsap.from('#path', {
  drawSVG: '0%',   // part de 0% tracé
  duration: 2,
  ease: 'power2.inOut',
})
 
// Animer une portion spécifique
gsap.to('#path', {
  drawSVG: '25% 75%',  // trace de 25% à 75% du chemin
  duration: 1,
})

Parfait pour des logos animés, des illustrations qui se dessinent, des icônes qui s'animent au hover.

SplitText — animer les lettres et mots (Club GSAP)

SplitText découpe un texte en caractères, mots, ou lignes, chacun dans un span indépendant — ce qui permet de les animer individuellement.

import { SplitText } from 'gsap/SplitText'
gsap.registerPlugin(SplitText)
 
const split = new SplitText('.headline', { type: 'chars,words' })
 
gsap.from(split.chars, {
  opacity: 0,
  y: 40,
  rotationX: -90,
  stagger: 0.02,
  duration: 0.6,
  ease: 'back.out(1.7)',
  onComplete: () => split.revert(),  // nettoyer les spans après l'animation
})

split.chars est un tableau de tous les caractères. split.words pour les mots, split.lines pour les lignes.

CustomEase — courbes d'ease sur mesure

import { CustomEase } from 'gsap/CustomEase'
gsap.registerPlugin(CustomEase)
 
// Définir un ease custom via une courbe de Bézier (format SVG path)
CustomEase.create('myEase', 'M0,0 C0.14,0 0.242,0.438 0.272,0.561 0.313,0.728 0.354,0.963 0.362,1 0.37,0.985 0.414,0.961 0.455,0.963 0.51,0.967 0.596,1 1,1')
 
gsap.to('.element', {
  y: -100,
  duration: 1.5,
  ease: 'myEase',
})

Les courbes se créent visuellement dans l'outil CustomEase Editor de GreenSock, puis on copie le path SVG.

Observer — interactions unifiées

Observer unifie les événements de scroll, wheel, touch, et pointer en une API cohérente.

import { Observer } from 'gsap/Observer'
gsap.registerPlugin(Observer)
 
Observer.create({
  target: window,
  type: 'wheel,touch,pointer',
  onDown: () => navigateToPrevSection(),
  onUp: () => navigateToNextSection(),
  tolerance: 10,     // seuil minimal de mouvement
  preventDefault: true,
})

Utile pour les expériences fullscreen avec navigation au scroll/swipe, sans avoir à gérer trois types d'événements différents.

Performance — bonnes pratiques

will-change

Pour des animations très fréquentes (parallax, cursor), indiquer au navigateur à l'avance :

gsap.set('.parallax', { willChange: 'transform' })
 
// Retirer après l'animation si elle n'est pas en boucle
gsap.to('.parallax', {
  y: -200,
  onComplete: () => gsap.set('.parallax', { willChange: 'auto' }),
})

Trop de will-change simultanés dégradent les performances — utiliser avec parcimonie.

Lazy kill

Tuer les ScrollTriggers d'éléments qui quittent le viewport dans des listes longues :

ScrollTrigger.create({
  trigger: '.item',
  onLeave: (self) => self.kill(),
})

force3D

Pour les animations critiques en performance :

gsap.to('.fast-element', {
  x: 100,
  force3D: true,  // force GPU compositing via translateZ(0)
})

GSAP active force3D automatiquement sur les animations x/y — c'est mentionné pour les cas où vous animez des propriétés qui ne déclenchent pas la composition GPU naturellement.

Récapitulatif des plugins

Plugin	Gratuit	Usage
ScrollTrigger	✓	Animations au scroll
Flip	✓	Transitions de layout
MotionPathPlugin	✓	Animation sur chemin SVG
Observer	✓	Scroll/swipe unifié
TextPlugin	✓	Typing effect
CustomEase	✓	Courbes custom
DrawSVGPlugin	Club	Tracé de SVG
SplitText	Club	Animation lettre par lettre
MorphSVGPlugin	Club	Morphing entre formes SVG
ScrambleText	Club	Texte qui se brouille
GSDevTools	Club	Panel de debug en temps réel

GSAP

Plugins et techniques avancées

TextPlugin — animer du texte caractère par caractère

Flip — animations de layout

Exemple : filtrer une grille

MotionPathPlugin — animer sur un chemin SVG

DrawSVGPlugin — tracer des SVG (Club GSAP)

SplitText — animer les lettres et mots (Club GSAP)

CustomEase — courbes d'ease sur mesure

Observer — interactions unifiées

Performance — bonnes pratiques

will-change

Lazy kill

force3D

Récapitulatif des plugins

GSAP

Plugins et techniques avancées

TextPlugin — animer du texte caractère par caractère

Flip — animations de layout

Exemple : filtrer une grille

MotionPathPlugin — animer sur un chemin SVG

DrawSVGPlugin — tracer des SVG (Club GSAP)

SplitText — animer les lettres et mots (Club GSAP)

CustomEase — courbes d'ease sur mesure

Observer — interactions unifiées

Performance — bonnes pratiques

will-change

Lazy kill

force3D

Récapitulatif des plugins