IntermediateAnimation30 min22 mai 2026

Animations de scroll GSAP, avec goût

Des scroll reveals qui semblent chers sans donner le mal de mer aux visiteurs : scoping, staggers, easings et le contrat prefers-reduced-motion.

Le cadre du bon goût

L’animation est l’assaisonnement, pas le plat. Trois règles que je suis sur chaque site :

  • Uniquement transform et opacity. N’anime jamais top, left, width, height — ils déclenchent un layout à chaque frame.
  • Un seul pattern d’entrée par section. Un fade-up y: 20 → 0 avec stagger: 0.1 fait artisanal ; cinq entrées différentes font brouillon.
  • Respecte prefers-reduced-motion. Non négociable.

GSAP scopé et nettoyé dans React

useGSAP(() => {
  gsap.fromTo(".card",
    { y: 20, opacity: 0 },
    {
      scrollTrigger: { trigger: containerRef.current, start: "top 85%" },
      y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: "back.out(1.5)",
    }
  );
}, { scope: containerRef });

scope te donne le scoping des sélecteurs et le nettoyage automatique — aucun ScrollTrigger qui fuit lors des changements de route.

Des easings qui semblent humains

Ease Ressemble à
power3.out une arrivée assurée
back.out(1.5) un pop joueur
elastic.out(1, 0.5) une fois par site, max

Le rebond élastique est un pot d’épices, pas une bouteille de sauce.

Tutoriels