IntermediateAnimation30 Min.22. Mai 2026

GSAP-Scroll-Animationen, mit Geschmack

Scroll-Reveals, die teuer wirken, ohne Besucher seekrank zu machen: Scoping, Staggers, Eases und der Reduced-Motion-Vertrag.

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

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.

Tutorials