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()
  }, [])