# GSAP-Scroll-Animationen, mit Geschmack

> Scroll-Reveals, die teuer wirken, ohne Besucher seekrank zu machen: Scoping, Staggers, Eases und der Reduced-Motion-Vertrag.
>
> 2026-05-22 — y7.hk

## Das Geschmacks-Framework

Animation ist die Würze, nicht das Gericht. Drei Regeln, die ich auf jeder Seite befolge:

- **Nur transform und opacity.** Animiere nie `top`, `left`, `width`, `height` — sie triggern Layout bei jedem Frame.
- **Ein Entrance-Pattern pro Sektion.** Ein `y: 20 → 0` Fade-up mit `stagger: 0.1` wirkt wie Handwerk; fünf verschiedene Entrances wirken wie Chaos.
- **`prefers-reduced-motion` respektieren.** Nicht verhandelbar.

## Scoped, sauber aufgeräumtes GSAP in 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` gibt dir Selector-Scoping **und** automatisches Cleanup — keine geleakten ScrollTriggers bei Routenwechseln.

## Eases, die sich menschlich anfühlen

| Ease | Fühlt sich an wie |
|------|-----------|
| `power3.out` | selbstbewusste Ankunft |
| `back.out(1.5)` | verspieltes Pop |
| `elastic.out(1, 0.5)` | maximal einmal pro Site |

Der elastische Bounce ist ein Gewürzglas, keine Soßenflasche.