Animations de scroll GSAP, avec goût

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

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