Warum GSAP verwenden?
CSS bewältigt einfache Übergänge und Keyframes gut, und für einen Hover-Effekt oder ein Fade-in ist es das richtige Werkzeug. Sobald man jedoch mehrere Elemente koordinieren, Animationen an den Scroll-Vorgang binden oder die Wiedergabe dynamisch steuern muss, wird CSS unhandlich. Genau hier spielt GSAP (GreenSock Animation Platform) seine Stärken aus.
GSAP bietet eine kompakte, ausdrucksstarke API, um Werte über die Zeit zu animieren, sowie ein Timeline-Modell für die Sequenzierung. Es läuft auf requestAnimationFrame, animiert effizient und sein Plugin-Ökosystem deckt Scrolling, Dragging, Morphing und mehr ab. Für polierte Marketing-Seiten, Produkt-Touren und Data Storytelling ist es der Industriestandard.
Tweens
Ein Tween ändert eine oder mehrere Eigenschaften über einen bestimmten Zeitraum.
// tweens.js
import gsap from "gsap";
gsap.to(".box", { x: 200, duration: 1, ease: "power2.out" });
gsap.from(".title", { y: 40, opacity: 0, duration: 0.8 });
gsap.fromTo(".card", { scale: 0.8 }, { scale: 1, duration: 0.4 });to animiert zu einem Wert, from animiert von einem Wert zum aktuellen Zustand und fromTo spezifiziert beides. GSAP verarbeitet Transforms (x, y, scale, rotation) nativ – dies sind die Eigenschaften, die auf dem Compositor bleiben und die Animation flüssig halten.
Timelines
Eine Timeline sequenziert Tweens auf einer gemeinsamen Clock, wobei Positionsparameter ein präzises Timing ermöglichen.
// timeline.js
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
tl.from(".nav", { y: -20, opacity: 0 })
.from(".hero h1", { y: 40, opacity: 0 }, "-=0.3")
.from(".hero p", { y: 20, opacity: 0 }, "-=0.2")
.from(".hero button", { scale: 0.9, opacity: 0 }, "-=0.2");Das "-=0.3" bedeutet „starte 0,3 Sekunden bevor der vorherige Tween endet“, wodurch Schritte überlappen und ein natürlicher Fluss entsteht. Timelines können pausiert, rückwärts abgespielt, beschleunigt, gesprungen und gelabelt werden, was sie wesentlich steuerbarer macht als eine Kette von setTimeout-Aufrufen. Zudem machen sie das Cleanup trivial: Beende die Timeline und jeder Tween stoppt.
Stagger und Easing
Stagger versetzt dieselbe Animation über viele Ziele hinweg zeitlich versetzt. Das ist das Geheimnis hinter den polierten Listen- und Grid-Effekten, die man auf modernen Websites sieht.
// stagger.js
gsap.from(".card", {
y: 30,
opacity: 0,
duration: 0.5,
stagger: 0.08,
});Easing steuert das Gefühl der Bewegung. power2.out startet schnell und läuft aus, back.out schießt leicht über das Ziel hinaus und elastic federt. Das Easing von GSAP ist eine seiner größten Stärken und mit reinem CSS nur schwer zu erreichen.
ScrollTrigger
ScrollTrigger verknüpft Animationen mit der Scroll-Position und ermöglicht so das scrollgesteuerte Storytelling, das viele preisgekrönte Websites auszeichnet.
// scroll.js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap.to(".panel", {
xPercent: -100,
ease: "none",
scrollTrigger: {
trigger: ".panels",
start: "top top",
end: "+=2000",
scrub: true,
pin: true,
},
});scrub: true koppelt den Fortschritt der Animation an den Scrollbalken, während pin: true den entsprechenden Abschnitt beim Scrollen an Ort und Stelle hält. ScrollTrigger unterstützt zudem Snap-Funktionen, Toggles und Callbacks und übernimmt automatisch das Resizing sowie den Refresh für Sie.
Performance
Bewegungen sollten sich mühelos anfühlen, und das bedeutet, die richtigen Eigenschaften zu animieren.
- Animiere transform und opacity, da der Compositor diese ohne Layout-Berechnung verarbeiten kann.
- Vermeide es,
width,height,top,leftodermarginzu animieren, da diese in jedem Frame ein Layout erzwingen. - Animiere weniger Elemente gleichzeitig und pausiere Animationen, die sich außerhalb des sichtbaren Bereichs (offscreen) befinden.
- Setze
will-changesparsam bei Elementen ein, die kurz vor einer Animation stehen. - Beende Timelines, wenn eine Komponente unmounted wird, um Leaks und unnötige Rechenlast zu vermeiden.
Weitere Informationen dazu, wie Animationen mit Metriken wie INP interagieren, findest du im Guide zu Web Performance.
React und Cleanup
Der offizielle useGSAP Hook von @gsap/react beschränkt Selektoren auf einen Container und führt das Cleanup automatisch durch. Dadurch werden die typischen Fallstricke vermieden, die beim Animieren von vom React verwalteten DOM-Elementen auftreten.
// Hero.jsx
import { useRef } from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
export function Hero() {
const ref = useRef(null);
useGSAP(() => {
gsap.from(".title", { y: 40, opacity: 0 });
}, { scope: ref });
return <section ref={ref}><h1 className="title">Hello</h1></section>;
}Der Hook handhabt die doppelte Aufrufung im StrictMode und macht Animationen beim Unmount rückgängig, sodass keine Tweens im Speicher verbleiben oder Elemente in einem halb-animierten Zustand zurückbleiben.
Barrierefreiheit
Beachten Sie stets prefers-reduced-motion. Ersetzen Sie Bewegungen für Nutzer mit Bewegungsempfindlichkeit durch ein einfaches Einblenden oder lassen Sie die Animation komplett weg.
// reduced.js
const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
gsap.from(".card", { y: 30, opacity: 0, stagger: 0.08 });
});
mm.add("(prefers-reduced-motion: reduce)", () => {
gsap.from(".card", { opacity: 0 });
});Dies ist eine kleine Menge an Code, die für eine bedeutende Gruppe von Nutzern einen echten Unterschied macht.
Best Practices
- Verwende für jede Sequenz Timelines anstelle von verketteten Timeouts.
- Animiere transform und opacity, keine Layout-Properties.
- Nutze Stagger-Effekte bei Listen für ein poliertes, natürliches Gefühl.
- Registriere Plugins nur einmal und verwende sie wieder.
- Bereinige Timelines beim Unmount, insbesondere in React.
- Beachte prefers-reduced-motion.
- Pausiere oder beende Animationen, die sich außerhalb des Sichtfelds (offscreen) befinden.
Häufige Fehler
- Animation von Layout-Properties, was zu Rucklern (Jank) führt.
- Verkettung von
setTimeout-Aufrufen, die zeitlich auseinanderdriften und schwer zu stoppen sind. - Timelines, die nach dem Unmount einer Komponente weiterlaufen.
- Übermäßiger Einsatz von Motion, wodurch die Seite überladen wirkt.
- Ignorieren von Reduced-Motion-Einstellungen.
- Ausführen rechenintensiver Scroll-Animationen auf schwachen Geräten ohne vorherige Tests.
Wie geht es weiter?
GSAP verwandelt Animationen von einer mühsamen Aufgabe in ein echtes Design-Tool. Beginnen Sie mit den Grundlagen der CSS-Animationen, damit Sie wissen, wann Sie mehr benötigen, und setzen Sie dann GSAP für Sequenzen und Scroll-Effekte ein. Kombinieren Sie es mit Three.js für 3D-Szenen und behalten Sie die Metriken im Web Performance-Guide im Auge. Animieren Sie anschließend eine Hero-Section und erleben Sie, welchen Unterschied eine gut getimte Sequenz macht.