GSAP

Pourquoi choisir GSAP ?

Le CSS gère très bien les transitions simples et les keyframes ; pour un effet de survol ou un fondu d’apparition, c’est l’outil idéal. Cependant, dès que vous devez coordonner plusieurs éléments, lier une animation au défilement ou contrôler la lecture de manière dynamique, le CSS devient limité. C’est là que GSAP (GreenSock Animation Platform) entre en jeu.

GSAP vous offre une API concise et expressive pour animer des valeurs dans le temps, ainsi qu’un modèle de timeline pour les séquencer. Il s’exécute sur requestAnimationFrame, anime avec efficacité, et son écosystème de plugins couvre le scrolling, le dragging, le morphing et bien plus encore. Pour les sites marketing léchés, les visites guidées de produits et le storytelling de données, c’est la référence.

Tweens

Un tween modifie une ou plusieurs propriétés sur une durée donnée.

// tweens.js
import gsap from "gsap";

gsap.to(".box", { x: 200, duration: 1, ease: "power2.out" });
gsap.from(".title", { y: 40, opacity: 0, duration: 0.8 });
gsap.fromTo(".card", { scale: 0.8 }, { scale: 1, duration: 0.4 });

to anime vers une valeur, from anime d’une valeur vers l’état actuel, et fromTo spécifie les deux. GSAP gère nativement les transformations (x, y, scale, rotation), qui sont les propriétés traitées par le compositeur pour garantir la fluidité de l’animation.

Timelines

Une timeline ordonnance des tweens sur une horloge commune, avec des paramètres de position qui permettent un timing précis.

// timeline.js
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });

tl.from(".nav", { y: -20, opacity: 0 })
  .from(".hero h1", { y: 40, opacity: 0 }, "-=0.3")
  .from(".hero p", { y: 20, opacity: 0 }, "-=0.2")
  .from(".hero button", { scale: 0.9, opacity: 0 }, "-=0.2");

Le "-=0.3" signifie « commencer 0,3 seconde avant la fin du tween précédent », ce qui permet de chevaucher les étapes pour un flux plus naturel. Les timelines peuvent être mises en pause, inversées, accélérées, naviguées (seek) et étiquetées, ce qui les rend bien plus contrôlables qu’une chaîne d’appels setTimeout. Elles rendent également le nettoyage trivial : tuez la timeline et tous les tweens s’arrêtent.

Stagger et easing

Le Stagger permet de décaler une même animation sur plusieurs cibles, ce qui est la clé pour obtenir ces effets de listes et de grilles peaufinés que l’on voit sur les sites modernes.

// stagger.js
gsap.from(".card", {
  y: 30,
  opacity: 0,
  duration: 0.5,
  stagger: 0.08,
});

L’Easing contrôle le ressenti. power2.out commence rapidement puis se stabilise, back.out dépasse légèrement la cible, et elastic rebondit. L’easing de GSAP est l’un de ses points forts et est difficile à égaler avec le seul CSS.

ScrollTrigger

ScrollTrigger lie l’animation à la position du défilement, permettant ainsi le storytelling basé sur le scroll qui définit bon nombre de sites primés.

// scroll.js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.to(".panel", {
  xPercent: -100,
  ease: "none",
  scrollTrigger: {
    trigger: ".panels",
    start: "top top",
    end: "+=2000",
    scrub: true,
    pin: true,
  },
});

scrub: true lie la progression de l’animation à la barre de défilement, et pin: true maintient la section en place pendant le scroll. ScrollTrigger prend également en charge le snap, les toggles et les callbacks, et gère pour vous le redimensionnement ainsi que le rafraîchissement.

Performance

Le mouvement doit paraître fluide et naturel, ce qui implique d’animer les bonnes propriétés.

• Animez transform et opacity, que le compositeur peut gérer sans recalculer le layout.
• Évitez d’animer width, height, top, left ou margin, car ils forcent le layout à chaque frame.
• Animez moins d’éléments simultanément et mettez en pause les animations hors écran.
• Utilisez will-change avec parcimonie sur les éléments sur le point d’être animés.
• Détruisez les timelines lorsqu’un composant est démonté pour éviter les fuites de mémoire et le travail inutile.

Consultez le guide sur la Web Performance pour comprendre comment l’animation interagit avec des métriques telles que l’INP.

React et le nettoyage

Le hook officiel useGSAP de @gsap/react limite la portée des sélecteurs à un conteneur et effectue le nettoyage automatiquement, ce qui permet d’éviter les pièges classiques lors de l’animation d’un DOM géré par React.

// Hero.jsx
import { useRef } from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

export function Hero() {
  const ref = useRef(null);

  useGSAP(() => {
    gsap.from(".title", { y: 40, opacity: 0 });
  }, { scope: ref });

  return <section ref={ref}><h1 className="title">Hello</h1></section>;
}

Le hook gère la double invocation du StrictMode et annule les animations lors du démontage (unmount), vous évitant ainsi les fuites de tweens ou les éléments laissés dans un état d’animation incomplète.

Accessibilité

Respectez toujours prefers-reduced-motion. Pour les utilisateurs sensibles aux mouvements, remplacez les animations par un simple fondu ou supprimez-les complètement.

// reduced.js
const mm = gsap.matchMedia();

mm.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.from(".card", { y: 30, opacity: 0, stagger: 0.08 });
});

mm.add("(prefers-reduced-motion: reduce)", () => {
  gsap.from(".card", { opacity: 0 });
});

Il s’agit d’une petite quantité de code qui fait une réelle différence pour un groupe significatif d’utilisateurs.

Bonnes pratiques

• Utilisez des timelines plutôt que des timeouts enchaînés pour toute séquence.
• Animez les propriétés transform et opacity, et non les propriétés de mise en page (layout).
• Appliquez un effet de stagger sur les listes pour un rendu plus fluide et naturel.
• Enregistrez les plugins une seule fois et réutilisez-les.
• Nettoyez les timelines lors du démontage du composant, particulièrement dans React.
• Respectez la préférence prefers-reduced-motion.
• Mettez en pause ou stoppez les animations hors écran.

Erreurs courantes

• Animer des propriétés de mise en page (layout), ce qui provoque du jank.
• Enchaîner des appels setTimeout qui dérivent et sont difficiles à annuler.
• Laisser des timelines s’exécuter après le démontage d’un composant.
• Abuser des animations au point que la page semble surchargée.
• Ignorer les préférences de réduction du mouvement (reduced-motion).
• Exécuter des animations de défilement lourdes sur des appareils peu puissants sans effectuer de tests.

Et après ?

GSAP transforme l’animation, d’une corvée en un véritable outil de design. Commencez par maîtriser les bases des animations CSS pour savoir quand vous avez besoin de plus, puis ajoutez GSAP pour le séquençage et le scroll. Associez-le à Three.js pour des scènes 3D et gardez un œil sur les métriques dans le guide sur la Web Performance. Enfin, animez une section hero et ressentez la différence qu’apporte une séquence bien rythmée.