# Animaciones de scroll con GSAP, con buen gusto

> Scroll reveals que se sienten caros sin marear a los visitantes: scoping, staggers, easings y el contrato de prefers-reduced-motion.
>
> 2026-05-22 — y7.hk

## El marco del buen gusto

La animación es el condimento, no el plato. Tres reglas que sigo en cada sitio:

- **Solo transform y opacity.** Nunca animes `top`, `left`, `width`, `height` — disparan layout en cada frame.
- **Un patrón de entrada por sección.** Un fade-up `y: 20 → 0` con `stagger: 0.1` se lee como artesanía; cinco entradas distintas se leen como caos.
- **Respeta `prefers-reduced-motion`.** No negociable.

## GSAP en React con scope y limpieza automática

```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 da scoping de selectores **y** limpieza automática — sin ScrollTriggers filtrados al cambiar de ruta.

## Easings que se sienten humanos

| Ease | Se siente como |
|------|-----------|
| `power3.out` | llegada segura |
| `back.out(1.5)` | pop juguetón |
| `elastic.out(1, 0.5)` | máximo una vez por sitio |

El rebote elástico es un frasco de especias, no una botella de salsa.