Warum ich immer wieder zu GSAP greife

Zum ersten Mal habe ich GSAP auf der Website zu Saints Row eingesetzt. Das Briefing war alles andere als leise: große Typo, Explosionen, eine Seite, die sich anfühlt wie das Spiel selbst. Mit CSS-Transitions wären wir da nicht weit gekommen, also haben wir zu GreenSock gegriffen. Seitdem ist es in fast jedem meiner Projekte mit echter Animation dabei, auch in diesem hier.

Es ist weder das neueste noch das angesagteste Werkzeug. Aber es kann das, was mir bei Animationen am wichtigsten ist: Es hält sich im Hintergrund und lässt mich über das Timing nachdenken.

Timelines statt Verzögerungen

Die erste Angewohnheit, die mir GSAP abgewöhnt hat, waren Animationsketten mit Verzögerungen. Delays funktionieren genau so lange, bis man einen davon ändert – und dann ist alles danach aus dem Takt.

Eine Timeline beschreibt stattdessen die Abfolge:

gsap
  .timeline({ defaults: { ease: "expo.out" } })
  .fromTo(menu, { clipPath: "circle(0% at 94% 4%)" }, { clipPath: "circle(150% at 94% 4%)", duration: 1 })
  .from(links, { yPercent: 110, stagger: 0.06 }, "-=0.5")
  .from(footer, { autoAlpha: 0, y: 16 }, "-=0.7");

Das ist das mobile Menü auf dieser Seite. "-=0.5" bedeutet: eine halbe Sekunde vor dem Ende des vorigen Schritts beginnen. Die Links tauchen also schon auf, während sich der Kreis noch öffnet. Mache ich den Kreis langsamer, zieht alles andere automatisch mit. Und weil es eine Timeline ist, genügt zum Schließen ein tl.reverse(), nur etwas schneller abgespielt.

Das meiste Gefühl steckt im Easing

Wenn ich eine einzige Sache nennen müsste, die hochwertige Animation von billiger unterscheidet, dann das Easing. Fast alles auf dieser Seite verwendet expo.out: ein schneller Start und eine lange, weiche Landung. Das wirkt reaktionsschnell, weil die Bewegung sofort einsetzt, und trotzdem ruhig, weil nichts abrupt stehen bleibt.

Ich lege es einmal als Standard fest und weiche nur ab, wenn es einen guten Grund gibt:

gsap.defaults({ ease: "expo.out", duration: 1.1 });

ScrollTrigger und SplitText erledigen die schwere Arbeit

Die meisten Text-Animationen hier sind drei Zeilen Code. SplitText zerlegt eine Überschrift in Zeilen und legt jede davon in eine Maske; ScrollTrigger spielt die Animation ab, sobald sie ins Bild scrollt:

SplitText.create(heading, {
  type: "lines",
  mask: "lines",
  autoSplit: true,
  onSplit: (self) => gsap.from(self.lines, { yPercent: 105, stagger: 0.09, scrollTrigger: { trigger: heading, start: "top 88%" } }),
});

autoSplit teilt den Text neu auf, sobald Schriften geladen sind oder sich die Fenstergröße ändert. Darum musste ich mich früher selbst kümmern, und es war eine nie versiegende Quelle für Bugs. Seit GSAP komplett kostenlos ist, Plugins wie SplitText inklusive, gibt es auch keinen Grund mehr, darauf zu verzichten.

Ein Takt für alles

Auf dieser Seite laufen Lenis für weiches Scrollen, eine 3D-Szene und eine Handvoll ScrollTrigger gleichzeitig. Hätte jedes davon seine eigene requestAnimationFrame-Schleife, würden sie um einen Frame auseinanderlaufen – und das spürt man als Ruckeln. Deshalb hängt alles an GSAPs Ticker:

gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);

Astronaut, Sterne und Scrollposition werden im selben Frame und in derselben Reihenfolge aktualisiert. Eine Kleinigkeit, durch die sich die ganze Seite solide anfühlt.

Hinter sich aufräumen

In React ist der useGSAP-Hook der wohl am meisten unterschätzte Teil der Library. Alles, was darin entsteht, wird zurückgesetzt, sobald die Komponente verschwindet – beim Seitenwechsel bleiben also keine ScrollTrigger übrig. Und was erst später entsteht, etwa in einem Promise oder Event-Handler, wird mit contextSafe ebenfalls sauber mit aufgeräumt. Bevor ich das konsequent genutzt habe, waren liegengebliebene ScrollTrigger der häufigste Animationsfehler in meinem Code.

Rücksicht auf alle, die keine Bewegung wollen

Zum Schluss das Wichtigste: Manchen Menschen wird von Animationen schwindlig, oder sie lenken sie zu sehr ab – und das teilen sie ihrem System auch mit. Ich prüfe das, bevor ich irgendetwas einrichte. Wer reduzierte Bewegung eingestellt hat, sieht den Text einfach erscheinen, und der Astronaut bleibt ruhig. Gute Animation ist von vornherein optional.

GSAP macht Animationen nicht von selbst gut. Aber es macht es billig, Dinge auszuprobieren, umzuentscheiden und am Timing zu feilen – und genau dort entsteht das Gute.