GSAP

Was ist es?

GSAP (GreenSock Animation Platform) ist die High-Performance-Animation-Engine für alles, was im Browser bewegt. Framework-agnostic, präziser als CSS, schneller als jQuery-Era. ScrollTrigger ist der De-facto-Standard für Scroll-Choreografien.

Quickstart

pnpm add gsap

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

gsap.to('.box', {
  x: 200,
  scrollTrigger: { trigger: '.box', scrub: true }
})

Typische Patterns

• gsap.timeline() für sequenzielle / parallele Animationen:

  const tl = gsap.timeline()
  tl.from('.title', { y: 50, opacity: 0 })
    .from('.btn', { scale: 0 }, '-=0.3')
  

• ScrollTrigger mit scrub, pin, markers (dev) für Scroll-Storytelling.
• gsap.context() in React für sauberes Cleanup:

  useEffect(() => {
    const ctx = gsap.context(() => { gsap.to(...) }, ref)
    return () => ctx.revert()
  }, [])
  

• SplitText / DrawSVG (Club-Plugins) für Text- und SVG-Effekte.
• FLIP-Plugin für Layout-Transitions ohne Framer Motion.

Gotchas / Was oft schiefgeht

• Cleanup in React ist Pflicht — gsap.context().revert() oder ScrollTrigger.kill(), sonst Leaks bei Re-Mount.
• ScrollTrigger.refresh() nach DOM-Änderungen (z. B. Image-Load), sonst falsche Trigger-Punkte.
• Mit Next.js: gsap ist client-only — Dynamic-Import oder "use client".
• Premium-Plugins (SplitText, MorphSVG) brauchen Club-Membership + npm-Auth-Setup.
• from() vs to(): from() setzt Start-State, animiert nach aktuellem Style. Verwechslung führt zu Flash-of-Wrong-State.

Wann nicht?

Einfache UI-Transitions in React → Framer Motion ist idiomatischer. Wenn Bundle-Size kritisch und nur 1-2 Animationen → CSS reicht.