High-performance Animation-Engine für komplexe Timelines & ScrollTrigger.
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.
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 }
})
gsap.timeline() für sequenzielle / parallele Animationen:
const tl = gsap.timeline()
tl.from('.title', { y: 50, opacity: 0 })
.from('.btn', { scale: 0 }, '-=0.3')
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()
}, [])
gsap.context().revert() oder ScrollTrigger.kill(), sonst Leaks bei Re-Mount.ScrollTrigger.refresh() nach DOM-Änderungen (z. B. Image-Load), sonst falsche Trigger-Punkte.gsap ist client-only — Dynamic-Import oder "use client".from() vs to(): from() setzt Start-State, animiert nach aktuellem Style. Verwechslung führt zu Flash-of-Wrong-State.Einfache UI-Transitions in React → Framer Motion ist idiomatischer. Wenn Bundle-Size kritisch und nur 1-2 Animationen → CSS reicht.