# 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.
>
> 2026-05-22 — y7.hk

## 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

```tsx
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.