GSAP (GreenSock) – Grundlagen

GSAP (GreenSock Animation Platform) ist eine professionelle JavaScript-Animationsbibliothek, die HTML-Elemente, SVGs, Canvas-Objekte und beliebige JavaScript-Objekte mit höchster Performance und präziser Kontrolle animiert.

Was ist GSAP?

GreenSock Animation Platform, kurz GSAP, wurde ursprünglich 2008 als Flash-Bibliothek entwickelt und 2012 für das Web portiert. Seither hat sie sich zur De-facto-Industriestandard-Animationsbibliothek entwickelt. GSAP wird von namhaften Studios und Marken wie Google, Apple, Amazon und zahlreichen kreativen Agenturen eingesetzt.

Das Alleinstellungsmerkmal von GSAP liegt in der Kombination aus extremer Performance (konsistent 60fps auch bei komplexen Szenen), einfacher API, Timeline-Koordination und einem umfangreichen Plugin-Ökosystem.

GSAP ist kostenlos für die meisten Nutzungsszenarien. Das Premium-Plugin-Paket „Club GSAP" enthält erweiterte Plugins für ScrollTrigger, MorphSVG, SplitText und andere.

Erklärung

Installation

```bash npm install gsap

```

``javascript import { gsap } from 'gsap'; ``

Grundlegende Tweens

Ein „Tween" ist eine einzelne Animation in GSAP:

```javascript // gsap.to() – animiert von aktuellem Zustand zu Zielwerten gsap.to('.box', { x: 200, // entspricht translateX(200px) y: -50, rotation: 45, opacity: 0.5, duration: 1, ease: 'power2.out' });

// gsap.from() – animiert von Ausgangswerten zum aktuellen Zustand gsap.from('.titel', { y: 60, opacity: 0, duration: 0.8, ease: 'power3.out' });

// gsap.fromTo() – volle Kontrolle über Start- und Endwert gsap.fromTo('.element', { x: -100, opacity: 0 }, // von { x: 0, opacity: 1, duration: 0.6, ease: 'expo.out' } // nach ); ```

GSAP-Kurzschreibweisen:

• x, y statt translateX, translateY (in px)
• xPercent, yPercent für prozentuale Verschiebung
• rotation statt rotate (in Grad)
• scale, scaleX, scaleY

Easing-System

GSAP bietet über 30 vordefinierte Easings und ein leistungsstarkes CustomEase-Plugin:

```javascript // Basis-Easings: ease.in, ease.out, ease.inOut ease: 'power1.out' // sanft ease: 'power2.out' // Standard ease: 'power3.out' // kräftiger ease: 'power4.out' // sehr kräftig

ease: 'expo.out' // explosiv am Anfang, sanft am Ende ease: 'back.out(1.7)' // federt minimal über das Ziel hinaus ease: 'elastic.out(1, 0.3)' // elastische Schwingung ease: 'bounce.out' // Aufprall-Effekt ease: 'steps(5)' // schrittweise ```

Timelines

Timelines sind das eigentliche Herzstück von GSAP. Sie koordinieren mehrere Tweens mit präziser zeitlicher Kontrolle:

```javascript const tl = gsap.timeline({ defaults: { ease: 'power2.out', duration: 0.6 } });

tl.from('.header', { y: -60, opacity: 0 }) .from('.text', { y: 40, opacity: 0 }, '-=0.3') // 0.3s Überlapp .from('.button', { scale: 0, opacity: 0 }, '+=0.1') // 0.1s Pause .from('.bild', { x: 100, opacity: 0 }, '<'); // gleichzeitig mit vorherigem ```

Position-Parameter:

• '-=0.3' – 0.3 Sekunden früher als Ende des vorherigen Tweens
• '+=0.2' – 0.2 Sekunden Pause nach dem Ende
• '<' – gleichzeitig mit Start des vorherigen Tweens
• '1.5' – absoluter Zeitpunkt in der Timeline (Sekunden)
• 'label' – springt zu einem Label in der Timeline

``javascript // Labels und komplexere Szenarien tl.add('intro') .from('.logo', { opacity: 0 }, 'intro') .from('.nav', { y: -20, opacity: 0 }, 'intro+=0.2'); ``

Stagger (Gestaffelte Animationen)

``javascript // Alle .karte-Elemente gestaffelt einblenden gsap.from('.karte', { y: 60, opacity: 0, duration: 0.5, stagger: { amount: 0.6, // Gesamtzeit aller Verzögerungen from: 'start', // Reihenfolge: start, end, center, edges, random ease: 'power1.in' } }); ``

Beispiele

Hero-Animation

```javascript const hero = gsap.timeline({ defaults: { ease: 'power3.out' } });

hero .from('h1 span', { y: '100%', opacity: 0, duration: 1, stagger: 0.08, clipPath: 'inset(0 0 100% 0)' }) .from('.hero-untertitel', { y: 30, opacity: 0, duration: 0.8 }, '-=0.4') .from('.hero-cta', { scale: 0.8, opacity: 0 }, '-=0.2'); ```

Navigation mit Timeline

```javascript const navTl = gsap.timeline({ paused: true });

navTl.to('.nav-menu', { xPercent: 0, duration: 0.5, ease: 'expo.out' }) .from('.nav-item', { x: 40, opacity: 0, stagger: 0.08 }, '-=0.3');

document.querySelector('.hamburger').addEventListener('click', () => { navTl.reversed() ? navTl.play() : navTl.reverse(); }); ```

GSAP mit ScrollTrigger (Plugin)

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

gsap.from('.statistik', { textContent: 0, duration: 2, snap: { textContent: 1 }, scrollTrigger: { trigger: '.statistik-section', start: 'top 80%', toggleActions: 'play none none reset' } }); ```

Mehr zum ScrollTrigger-Plugin unter Scrollytelling – Animation beim Scrollen.

In der Praxis

GSAP ist die Wahl für professionelle Webprojekte, wenn:

• Komplexe, sequenzielle Animationsszenen benötigt werden
• Genaueste Kontrolle über Timing und Easing erforderlich ist
• Browser-Kompatibilität kritisch ist (GSAP normalisiert Browser-Unterschiede)
• Team-übergreifend an Animationen gearbeitet wird (gute Lesbarkeit von Timeline-Code)

Wann CSS bevorzugen: Für einfache Hover-Effekte, Einzel-Transitions und Standard-Einblendungen ist natives CSS performanter und schlanker. GSAP entfaltet seinen Mehrwert bei Sequenzen, interaktiven Szenen und komplexen Choreografien.

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Ist GSAP kostenlos? Ja, für private und kommerzielle Webprojekte kostenlos. Nur für spezifische Premium-Plugins (Club GSAP) fallen Kosten an. Viele Premium-Plugins sind auf CodePen kostenlos nutzbar.

Muss ich jQuery für GSAP verwenden? Nein. GSAP 3 hat keine Abhängigkeiten. Es funktioniert standalone mit modernen JavaScript-Projekten.

Kann GSAP CSS-Variablen animieren? Ja: gsap.to(':root', { '--farbe': '#ff0000', duration: 1 }) – nützlich für dynamische Theme-Wechsel.

Wie verhält sich GSAP mit `prefers-reduced-motion`? GSAP reagiert nicht automatisch. Man muss selbst prüfen: ``javascript if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) { // GSAP-Animationen initialisieren } ``

Verwandte Einträge

• Scrollytelling – Animation beim Scrollen – ScrollTrigger-Plugin für Scroll-basierte Animationen
• SVG Animationen – GSAP als bevorzugtes Tool für SVG-Animation
• Framer Motion für React – Alternative für React-Ökosystem
• Performance-Optimierung bei Web-Animationen – GSAP vs. natives CSS aus Performance-Sicht
• Web Animations API (WAAPI) – Die native API als GSAP-Alternative

Weiterführend

• GSAP Dokumentation: docs.greensock.com (2024)
• GSAP Learning Center: greensock.com/learning – offizielle Video-Tutorials
• Cassie Evans: Making Things Move with GSAP (2022) – cassie.codes
• Jack Doyle: GSAP 3 Release Notes (2019) – greensock.com/blog
• Creative Coding Club: GSAP Animation Courses – creativecoding.club