1 Einleitung
Das Web entwickelt sich ständig weiter. Durch neue CSS-Features und Komponentenbibliotheken wird es immer leichter, gut aussehende und strukturierte Layouts zu erstellen. Moderne Technologien wie CSS Grid und Flexbox sowie zahlreiche weitere Features erleichtern die Umsetzung komplexer Layouts. Komponentenbibliotheken und neue HTML-Elemente helfen dabei, häufige UI-Patterns effizient zu implementieren und zu gestalten.
Um in Zeiten all dieser Neuerungen trotzdem herauszustechen und die Besucher:innen deiner Seite zu begeistern, lohnt es sich, einen genaueren Blick auf Animationen zu werfen.
Im Folgenden möchte ich euch anhand eines simplen Beispiels zeigen, wie ihr mit der GSAP-Animationsbibliothek schnell und einfach Animationen einbauen könnt, die eure Webseiten auf subtile Art interessanter gestalten.
2 Animationen
Animationen in Web-Apps kennen wir alle. Es gibt viele verschiedene – von einfachen Opacity-Änderungen bei Backdrops bis zu komplexen Fade-ins bei Dropdown-Menüs.
Ich unterscheide hier zwischen zwei Arten von Animationen:
Funktionale Animationen sind in vielen Web-Apps und Komponentenbibliotheken etabliert und unterstützen Nutzer:innen bei der Bedienung dynamischer Elemente. Sie sind oft nahezu notwendig – mindestens aber sehr sinnvoll –, um interaktive Elemente verständlicher zu machen. Dazu gehört beispielsweise die Ein- und Ausblendanimation von Dropdown-Elementen oder eine Animation beim Öffnen eines Accordions. Typischerweise sind diese Animationen direkt in die Komponenten integriert und gehören zur Funktionalität der Komponente.
Dekorative Animationen hingegen dienen in erster Linie der User Experience. Sie erhöhen die Immersion, wirken interessant auf die Nutzer:innen und unterstützen die Markenwirkung einer Anwendung. Wichtig ist: Sie sind nicht zwingend notwendig, um Funktionen in der App verständlich zu machen. Zu den einfachsten dekorativen Animationen gehört etwa, Elemente sanft einzublenden, sobald sie in den sichtbaren Bereich (Viewport) des Nutzers gelangen.
Einfach kann man sich den Unterschied so erklären: Funktional erklärt, dekorativ emotionalisiert.
Heute ist für uns diese zweite Art, die dekorativen Animationen, interessant.
Dekorative Animationen ermöglichen es uns, unsere Apps ansprechender zu gestalten und sie von der Masse abzuheben. Ein großer Vorteil: Wir können sie nachträglich einbauen, und sie sind keine Pflicht – die App ist nicht auf sie angewiesen. Meist sind auch keine besonderen Strukturen für dekorative Animationen erforderlich. Bestehende Elemente und Styles können bleiben, wie sie sind. Dadurch können wir Progressive Enhancement anwenden und bestehende Anwendungen in beliebigem Umfang verbessern. In stressigen Projekten können wir zunächst auf dekorative Animationen verzichten, ohne befürchten zu müssen, dass sich dadurch später die Entwicklungszeit deutlich verlängert.
Hinweis: Dekorative Animationen werten Anwendungen zwar auf, können aber je nach Zielgruppe und Gerät auch problematisch sein. Sie können die Ladezeiten erhöhen und die Performance der Seite beeinträchtigen. Nutzer:innen, die sensitiv gegenüber vielen Bewegungen sind oder sich einfach persönlich davon gestört fühlen, können dekorative Animationen als negativ wahrnehmen. Wichtig ist bei der Umsetzung daher, die Präferenzen der Nutzer:innen über Media Queries (prefers-reduced-motion) zu respektieren sowie Animationen subtil und gezielt einzusetzen. Hier gilt oft: weniger ist mehr.
Auch der Kontext der App ist relevant. In einem internen Daten-Management-Tool, das rein für seine Funktion verwendet wird und keine Nutzer:innen „catchen” soll, sind dekorative Animationen unwichtiger als in einer E-Commerce-App, die Nutzer:innen zum Kauf eines Produktes bewegen soll.
Ihr solltet euch also vor dem Einsatz überlegen, wie relevant dekorative Animationen für euren Anwendungsfall sind und ob der Nutzen die Kosten überwiegt.
3 Umsetzung mit GSAP
Wie können wir nun also am besten dekorative Animationen in unsere Apps einbauen?
Es gibt viele Möglichkeiten, dekorative Animationen umzusetzen. Natürlich kann man alles nativ implementieren und hätte so im Idealfall die performantesten Animationen und könnte an vielen Stellen auf JavaScript verzichten. Allerdings ist dies fehleranfällig und meist mit einer deutlich höheren Entwicklungszeit verbunden. Erinnern wir uns: Dekorative Animationen stellen keine Kernanforderung dar – wir wollen damit unsere Nutzer:innen begeistern. Das heißt im Umkehrschluss allerdings, dass wir nicht allzu viel Zeit damit verbringen können, diese einzubauen.
Glücklicherweise gibt es mit GSAP (GreenSock Animation Platform) eine seit dem 30.04.2025 frei für viele kommerzielle Einsatzzwecke nutzbare Animationsbibliothek, die uns das Erstellen zahlreicher dekorativer Animationen extrem erleichtert.
Beispiel: Reveal-Animation für Infokarten
Stellen wir uns eine einfache Zeile von Karten vor, die unsere Vorfreude auf die kommenden Jahreszeiten steigern sollen:
- Karte 1: „Frühling”
- Karte 2: „Sommer”
- Karte 3: „Herbst”
- Karte 4: „Winter”
Im Layout sind diese Karten nebeneinander in einer Row angeordnet.
HTML-Grundstruktur
Als Ausgangspunkt reicht eine einfache Struktur wie:
<section class="feature-section">
<div class="feature-card green">
<h3>Frühling</h3>
<ul>
<li>Frisches Erwachen</li>
<li>Neue Lebensenergie</li>
</ul>
</div>
<div class="feature-card orange">
<h3>Sommer</h3>
<ul>
<li>Endlose Sonnentage</li>
<li>Outdoor-Abenteuer</li>
</ul>
</div>
<div class="feature-card purple">
<h3>Herbst</h3>
<ul>
<li>Goldenes Blättermeer</li>
<li>Zeit für Reflektion</li>
</ul>
</div>
<div class="feature-card cyan">
<h3>Winter</h3>
<ul>
<li>Maximale Gemütlichkeit</li>
<li>Stille & Regeneration</li>
</ul>
</div>
</section>Die Karten stylen wir mit etwas CSS, und dann sieht es so aus, wenn wir auf einer Seite zu den Karten scrollen:
Ohne Animation erscheinen sie einfach „hart” im Viewport, sobald die Seite geladen ist. Funktioniert, aber jetzt schauen wir uns an, wie wir das ganze interessanter gestalten können.
Reveal Animation
Mit einer scroll-basierten Reveal-Animation wollen wir erreichen, dass die Karten sanft nach oben gleiten und gleichzeitig aus einer geringeren Opacity eingeblendet werden, sobald sie in den sichtbaren Bereich gescrollt werden.
Als erstes müssen wir das GSAP ScrollTrigger Plugin registrieren. Das passiert direkt vor der Benutzung von GSAP.
// ScrollTrigger bei GSAP registrieren
gsap.registerPlugin(ScrollTrigger);Dann fügen wir eine Reveal Animation hinzu:
// Reveal-Animation für alle Karten
gsap.from(".feature-card", {
scrollTrigger: {
trigger: ".feature-section",
start: "top 80%",
},
y: 40,
opacity: 0,
scale: 0.95,
duration: 1,
});Mit gsap.from() definieren wir eine Animation, indem wir den Animationsstart angeben. Das Animationsende ist automatisch auf den Ausgangszustand festgelegt.
Die Parameter in scrollTrigger definieren dabei wann die Animation ausgeführt wird. Über den CSS Selektor .feature-section schaut GSAP wann das objekt im Viewport ist. Es startet, wenn die Box bei 80% der Viewport Höhe ist.
Die anderen Parameter definieren die Animation. Mit y beginnt die Karte die Animation um 40 Pixel nach unten verschoben. Die opacity ist anfangs bei 0, dadurch wird die Karte sanft eingeblendet. Mit scale erreichen wir, dass die Karten während der Animation leicht größer werden. Duration definiert die Animationsdauer in Sekunden, und mit ease kann eine Easing-Funktion ausgewählt werden.
Wenn wir jetzt zu den Karten scrollen, sieht das ganze so aus:
Sobald die Karten bei 80% des Viewports ankommen, werden sie sanft eingeblendet. Sieht schon mal ganz gut aus.
Stagger-Effekt: Karten zeitversetzt einblenden
Im nächsten Schritt möchten wir die Animation noch etwas lebendiger machen: Statt alle Karten gleichzeitig einzublenden, sollen sie leicht zeitversetzt erscheinen.
GSAP bietet dafür die Option stagger. Wir ergänzen sie einfach in unserem Animations-Objekt:
gsap.from(".feature-card", {
scrollTrigger: {
trigger: ".feature-section",
start: "top 80%",
},
y: 40,
opacity: 0,
scale: 0.95,
duration: 1,
ease: 'power2.out',
stagger: 0.12,
});Wenn Nutzer:innen jetzt zu den Karten scrollen, sehen sie die folgende Animation:
Der Inhalt wird jetzt interessant eingeblendet und Nutzer:innen werden in der natürlichen Leserichtung in den Inhalt eingeführt. Und das beste ist: Wir haben das Ganze mit 10 Zeilen Code erreicht, und konnten unsere Webseite schnell und einfach aufwerten.
Einsatz in Frameworks und Komponenten-basierter Entwicklung
Die gezeigte Logik funktioniert auch in etablierten Frontend-Frameworks. Wichtig ist dabei:
Die GSAP-Animationen dürfen erst gestartet werden, wenn das DOM gemountet ist. Wenn sich die DOM-Struktur ändert (z. B. durch bedingtes Rendern oder dynamische Listen), müssen die Animationen ggf. neu initialisiert oder aktualisiert werden. Dazu können einfach die von den jeweiligen Frameworks bereitgestellten Lifecycle-Methoden verwendet werden.
Weiter ist es wichtig Event Listener für Animationen aufzuräumen, sollte eine Komponente nicht mehr gebraucht werden. GSAP bietet dazu die context() Funktion an. GSAP Animationen, die innerhalb eines Kontextes angelegt wurden, können über die context.revert() Funktion aufgeräumt werden.
Auch hier bietet es sich bei der Benutzung von Frameworks an, in den typischen unMount Lifecycle Hooks context.revert() auszuführen.
Hier ein Beispiel dazu:
const ctx = gsap.context(() => {
gsap.from(".feature-card", {
scrollTrigger: {
trigger: ".feature-section",
start: "top 80%",
},
y: 40,
opacity: 0,
duration: 0.6,
ease: "power2.out",
});
});
// Cleanup: Entfernt alle Listener für die Animationen (in Lifecycle Methoden anwenden)
ctx.revert();MatchMedia: Nutzerpräferenzen respektieren und Animationen Responsive machen.
Wenn wir dekorative Animationen einsetzen, sollten wir immer die Umgebung und die Präferenzen der Nutzer:innen berücksichtigen. GSAP bietet dafür mit matchMedia() eine elegante Möglichkeit, Animationen an Media Queries zu koppeln – ganz ähnlich wie wir es von CSS kennen.
Statt Animationen global zu definieren, können wir sie in matchMedia.add() kapseln und an bestimmte Bedingungen knüpfen, zum Beispiel Bildschirmbreiten oder die vom System gesetzte Präferenz prefers-reduced-motion.
Hier ist ein einfaches Beispiel, das die oben gezeigte Reveal-Animation nur dann aktiviert, wenn Nutzer:innen keine reduzierte Bewegung wünschen:
const mm = gsap.matchMedia();
mm.add("(prefers-reduced-motion: no-preference)", () => {
gsap.from(".feature-card", {
scrollTrigger: {
trigger: ".feature-section",
start: "top 80%",
},
y: 40,
opacity: 0,
scale: 0.95,
duration: 1,
ease: "power2.out",
stagger: 0.12,
});
});In diesem Beispiel wird die Animation nur erstellt, wenn das System angibt, dass keine reduzierte Bewegung bevorzugt wird. Ist prefers-reduced-motion aktiv, werden die Animationen erst gar nicht initialisiert – die Seite bleibt statisch und damit angenehmer für sensible Nutzer:innen.
Der große Vorteil: Wir müssen keine separaten Codepfade pflegen, sondern können Animationen gezielt an Viewport-Breite, Device-Typ oder Nutzerpräferenzen knüpfen. matchMedia() kümmert sich zudem darum, Kontext und Cleanup zu handhaben, sobald sich die Media Query ändert (z. B. beim Resize).
MatchMedia ersetzt dabei gsap.context. Wenn wir nun unsere Animationen aufräumen wollen, können wir das über MatchMedia erledigen:
// Cleanup: Entfernt alle Listener für die Animationen
mm.revert();So kombinieren wir dekorative Animationen mit verantwortungsvollem Umgang mit Nutzerpräferenzen und schaffen ein besseres, inklusives Nutzungserlebnis.
Komplexere Animationen - was mit GSAP noch möglich ist
Das Beispiel mit den Karten ist nur ein sehr kleiner Ausschnitt dessen, was mit GSAP möglich ist. Die Bibliothek bietet eine Vielzahl weiterer Funktionen und Plugins, mit denen sich deutlich komplexere Animationen umsetzen lassen.
Neben gsap.from() gibt es etwa gsap.to(), gsap.fromTo() und Timelines (gsap.timeline()), mit denen sich mehrere Animationsschritte präzise hintereinander und zueinander koordinieren lassen. ScrollTrigger kann dabei nicht nur genutzt werden, um einzelne Elemente beim Scrollen einzublenden – die Scrollposition selbst kann als „Timeline-Scrubber” dienen. So können wir Animationen direkt an den Scrollfortschritt koppeln, etwa für Parallax-Effekte oder komplexe Storytelling-Seiten.
Mit Plugins wie SplitText lassen sich Texte in Wörter, Zeilen oder einzelne Buchstaben zerlegen, um sie individuell zu animieren – etwa für Typing-Effekte, spannende Headlines oder Hero-Animationen. In Kombination mit ScrollTrigger können so ganze Textpassagen dynamisch ins Bild kommen, ohne dass wir dafür komplizierte eigene Logik schreiben müssen.
Auch horizontales Scrollen lässt sich mit GSAP abbilden, obwohl der Browser standardmäßig vertikal scrollt. Zum Beispiel können wir Sektionen „pinnen” und den vertikalen Scroll in horizontale Bewegung von Content umwandeln. Das eignet sich gut für Storytelling-Elemente, Timelines oder Produkt-Galerien.
Die hier gezeigten Beispiele kratzen also nur an der Oberfläche. Wenn ihr tiefer einsteigen wollt, lohnt sich ein Blick in die Dokumentation und die zahlreichen Codepens und Demos auf der GSAP-Website unter gsap.com. Schreibt auch gerne in die Kommentare, wenn ihr zu einem bestimmten Use Case mehr wissen möchtet.
4 Fazit
Dekorative Animationen sind kein Muss, können aber einen entscheidenden Unterschied machen, wenn es um Wahrnehmung, Markenwirkung und Nutzererlebnis geht. Richtig eingesetzt, unterstützen sie die inhaltliche Struktur, lenken den Blick und sorgen dafür, dass sich eine Anwendung wertiger und „lebendiger” anfühlt – ohne dabei die eigentliche Funktionalität zu überlagern.
Mit GSAP steht uns ein Werkzeug zur Verfügung, das viele typische Fallstricke bei JavaScript-Animationen abnimmt: sauberes Timing, performante Transitions, Scroll-Integration, Lifecycle-Handling und Respekt vor Nutzerpräferenzen. Gerade weil dekorative Animationen oft „nice-to-have” sind, ist es wichtig, sie effizient umsetzen zu können – mit möglichst wenig Code und ohne das bestehende Layout umzubauen. Genau hier spielt GSAP seine Stärken aus.
Wesentlich ist dabei, einige Grundprinzipien im Blick zu behalten:
Dekorative Animationen sollten immer subtil und zielgerichtet eingesetzt werden – weniger ist oft mehr. Nutzerpräferenzen wie prefers-reduced-motion müssen respektiert werden. Animationen sollten als Ergänzung verstanden werden, nicht als Voraussetzung für die Bedienbarkeit. Wenn ihr in bestehenden Projekten experimentell starten wollt, bietet sich ein kleines, klar begrenztes Szenario an – etwa die hier gezeigte Reveal-Animation für einzelne Content-Blöcke. Von dort aus könnt ihr schrittweise komplexere Effekte ausprobieren und sehen, wie sie sich auf User Experience und Performance auswirken.
