Zum Inhalt springen
Alle Technologien

GSAPdie Profi-Bibliothek für Web-Animationen

GSAP (GreenSock Animation Platform) ist eine etablierte JavaScript-Bibliothek für Animationen, die unabhängig vom Framework läuft, ob in Vanilla JavaScript, React, Vue, Svelte oder direkt in einem WordPress-Theme. Ihre Stärke sind präzise steuerbare Timelines, scroll-getriebene Effekte über das ScrollTrigger-Plugin und aufwändigere, exakt getaktete Sequenzen, die mit rein deklarativen Ansätzen schnell mühsam werden. Wir nutzen GSAP gezielt und dosiert: Bewegung soll Orientierung geben und Aufmerksamkeit lenken, nicht die Seite überladen. Wo eine React-App vor allem Gesten, Layout-Wechsel und Ein-/Ausblend-Effekte braucht, greifen wir stattdessen zu Framer Motion. Wir wählen das Werkzeug pro Aufgabe.

Wofür sich GSAP eignet

  • Scroll-getriebene Effekte mit ScrollTrigger
  • Choreografierte Hero- und Intro-Sequenzen
  • Scroll-Storytelling auf Marketing-Sites
  • SVG-, Pfad- und Text-Animationen
  • Framework-unabhängige Animation (auch im WordPress-Theme)

GSAP in der Praxis

lib/scroll-reveal.ts
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

// Timeline, an den Scrollfortschritt gekoppelt (scrub)
const tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.panel',
    start: 'top 80%',
    end: 'bottom 60%',
    scrub: true,
  },
})

tl.from('.panel h2', { y: 60, opacity: 0, duration: 0.6 })
  .from('.panel p', { y: 40, opacity: 0, stagger: 0.15 }, '<0.2')
  .to('.panel', { backgroundColor: '#0f172a', duration: 1 }, 0)

So arbeiten wir mit GSAP

  1. Motion-Konzept: Zweck jeder Animation klären, keine Deko um der Deko willen
  2. GSAP-Setup und Timeline-Struktur (modular, wiederverwendbar)
  3. ScrollTrigger-Integration für scroll-getriebene Abläufe
  4. prefers-reduced-motion respektieren: reduzierte oder abgeschaltete Varianten
  5. Performance-Check: GPU-freundliche Properties, kein Layout-Thrashing, flüssige Framerate als Ziel
  6. Übergabe: dokumentierte Timelines und Konventionen für Ihr Team

Das liefern wir bei GSAP

  • Umgesetzte Animationen als modulare, wiederverwendbare GSAP-Timelines
  • ScrollTrigger-Setup für scroll-getriebene Effekte
  • Reduced-Motion-Fallbacks für Barrierefreiheit
  • Performance-geprüfte Umsetzung, getestet auf realen Geräten
  • Übergabe-Doku: Struktur der Timelines und Anpassungs-Hinweise

Häufige Fragen zu GSAP

Interesse an GSAP?

Lassen Sie uns über Ihr Projekt sprechen. Wir beraten Sie gerne unverbindlich.

Jetzt kontaktieren