GSAP ScrollTrigger: Scroll-Animationen für moderne Websites

Warum GSAP ScrollTrigger?

Scroll-Animationen gehören zu den wirkungsvollsten Designelementen moderner Websites. GSAP (GreenSock Animation Platform) mit dem ScrollTrigger-Plugin ist der Industriestandard: Performant, browserübergreifend kompatibel und mit einer API, die auch komplexe Animationen handhabbar macht.

Grundlagen: Dein erstes ScrollTrigger

Ein ScrollTrigger verknüpft eine GSAP-Animation mit dem Scroll-Fortschritt. Du definierst einen Trigger-Element, Start- und Endpunkte und die Animation selbst. Das Ergebnis: Elemente faden ein, sliden herein oder skalieren sich, sobald sie in den Viewport scrollen.

Die wichtigsten Properties

• trigger: Das DOM-Element, das die Animation auslöst
• start: Wann die Animation startet (z.B. "top 80%" – wenn das Element 80% des Viewports erreicht)
• end: Wann die Animation endet
• scrub: Verknüpft die Animation direkt mit dem Scroll-Fortschritt
• once: Animation nur beim ersten Mal auslösen

Pattern 1: Fade-Up auf Scroll

Das klassische Pattern: Elemente starten unsichtbar (opacity: 0, y: 40px) und faden beim Scrollen ein. Verwende gsap.fromTo mit einem ScrollTrigger, der bei "top 88%" startet. Mit stagger-Property animierst du Gruppen von Elementen zeitversetzt.

Pattern 2: Parallax-Effekte

Mit scrub: true verknüpfst du die Animation 1:1 mit dem Scroll. So erzeugst du Parallax-Effekte: Hintergrundbilder bewegen sich langsamer als der Vordergrund. Tipp: Nutze will-change: transform auf den animierten Elementen für Hardware-Beschleunigung.

Pattern 3: Pinning und Horizontal Scroll

ScrollTrigger kann Elemente beim Scrollen fixieren (pinnen). Kombiniert mit horizontalem Scroll erzeugst du beeindruckende Showcase-Sektionen. Beachte: Pinning kann auf mobilen Geräten problematisch sein – teste gründlich und biete einen Fallback.

Performance-Tipps

• Nutze will-change sparsam und nur auf animierten Elementen
• Animiere nur transform und opacity – diese Properties werden GPU-beschleunigt
• Verwende ScrollTrigger.batch() für viele gleichartige Elemente
• Räume ScrollTrigger-Instanzen in onUnmounted auf (Memory Leaks vermeiden)

Accessibility

Respektiere die prefers-reduced-motion Media Query. Nutzer, die reduzierte Bewegung bevorzugen, sollten die Inhalte ohne Animation sehen. Ein einfacher Check: Wenn matchMedia("(prefers-reduced-motion: reduce)").matches, überspringe die Animation und setze die Elemente direkt auf ihren Endzustand.