“Website Animation” klingt erstmal nach einem einzigen Ding. Ist es nicht. Wenn du dir zehn gute Scroll-Sites anschaust, Apple-Produktseiten, Agentur-Portfolios, Studio-Websites, dann läuft darunter fast immer eine Handvoll von sechs Grundmustern, oft kombiniert. Kein Geheimwissen, aber die wenigsten können sie sauber benennen, geschweige denn sagen, wann welches Muster das richtige ist. Genau das hole ich hier nach, mit echtem Code und zwei Beispielen aus meiner eigenen Arbeit.
Die sechs Grundmuster
1. Scroll Trigger: Animation startet, wenn das Element auftaucht
Das mit Abstand häufigste Muster. Ein Element sitzt still da, sobald es in den sichtbaren Bereich scrollt, feuert eine Animation, einmalig. Fade-in, Slide-up, fertig. Kein Loop, keine Endlosschleife im Hintergrund.
Mit GSAP und dem ScrollTrigger-Plugin sieht das minimal so aus:
gsap.from(".card", {
opacity: 0,
y: 80,
scrollTrigger: {
trigger: ".card",
start: "top 80%",
end: "bottom 20%",
},
});start: "top 80%" heißt: sobald die Oberkante der Karte 80% der Viewport-Höhe erreicht, geht’s los. Wichtig für die Praxis: die Trigger-Zone sollte am oberen Bildschirmrand liegen, nicht in der Mitte, sonst wirkt es, als würde jede Sektion viel zu früh aufwachen.
Genau dieses Muster nutzt mein Skill Cinemagraph Section: ein Foto scrollt in den Viewport, ein kurzes Video spielt genau einmal ab, hält am letzten Frame, scrollt man raus und wieder rein, läuft es erneut. Kein Autoplay-Loop im Hintergrund, der Akku und Bandbreite frisst, nur eine Bewegung genau dann, wenn wirklich hingeschaut wird.
2. Pin: Element bleibt fixiert, der Rest scrollt weiter
Ein Abschnitt bleibt eingefroren am Bildschirm stehen, während der Scroll darüber weiterläuft, zum Beispiel als Content, der über ein fixiertes Hero-Bild hinwegzieht. Das ist der Baustein hinter fast jeder “Kamera bleibt stehen, Story läuft weiter”-Sektion.
gsap.to(".panel", {
scrollTrigger: {
trigger: ".panel",
pin: true,
scrub: 1,
end: "+=300%",
},
});scrub: 1 bindet die Animation direkt an die Scrollgeschwindigkeit statt sie einmal abzufeuern, end: "+=300%" sagt, wie lange (in Vielfachen der Element-Höhe) das Pinning anhält, bevor es losgelassen wird. Der Punkt, an dem viele Umsetzungen scheitern: das Pinning sauber wieder freigeben, sonst klebt die Section fest und der Rest der Seite wirkt kaputt.
3. Parallax: Ebenen bewegen sich unterschiedlich schnell
Vordergrund schneller, Hintergrund langsamer, das erzeugt räumliche Tiefe rein durch Geschwindigkeitsunterschied. Kein 3D nötig, nur unterschiedliche Scroll-Multiplikatoren pro Ebene.
gsap.to(".layer-fg", { y: -150, scrollTrigger: { scrub: true } }); // 1.4x
gsap.to(".layer-mid", { y: -100, scrollTrigger: { scrub: true } }); // 1.0x
gsap.to(".layer-bg", { y: -50, scrollTrigger: { scrub: true } }); // 0.5xDosierung ist hier der ganze Trick. Zu starker Unterschied zwischen den Ebenen wirkt schnell nach Windows-98-Bildschirmschoner statt nach Tiefe. Faktoren zwischen 0.5x und 1.5x der eigentlichen Scrollgeschwindigkeit sind meistens der Sweet Spot.
4. Horizontal Scroll: vertikaler Input wird zu horizontalem Output
Der Nutzer scrollt wie gewohnt nach unten, eine Sektion übersetzt das intern in eine horizontale Bewegung, typisch für Projekt-Galerien oder Case-Study-Karten.
gsap.to(".track", {
x: () => -(track.scrollWidth - window.innerWidth),
scrollTrigger: {
trigger: ".gallery",
pin: true,
scrub: 1,
end: () => "+=" + (track.scrollWidth - window.innerWidth),
},
});Technisch ist das im Kern eine Kombination aus Pin (die Sektion bleibt stehen) und einer transformierten X-Achse (translateX) statt Y. Der Container braucht overflow: hidden, sonst sieht man den ganzen Track auf einmal statt nur den sichtbaren Ausschnitt.
5. Scroll Progress: 0 bis 100% direkt als Wert nutzen
Statt nur “sichtbar ja/nein” wird die exakte Scroll-Position innerhalb eines Abschnitts als Zahl zwischen 0 und 1 verfügbar gemacht, und die kann dann irgendeine Eigenschaft steuern: Opacity, Skalierung, Rotation, Balkenbreite eines Fortschrittsbalkens.
ScrollTrigger.create({
trigger: ".section",
start: "top top",
end: "bottom bottom",
onUpdate: (self) => {
gsap.set(".progress-bar", { scaleX: self.progress });
},
});Das ist kein Effekt für sich, sondern die Grundlage für alles, was sich “richtig” scrollgesteuert anfühlt statt nur getriggert.
6. Scroll-Linked Animation: der Scroll ist die Zeitleiste
Der Unterschied zu Scroll Trigger in einem Satz: Trigger sagt “starte, wenn ich dich erreiche”, Scroll-Linked sagt “folge exakt meiner Scroll-Position, in beide Richtungen”. Kein Timer, keine feste Dauer, die Animation läuft rückwärts, wenn man zurückscrollt.
Das lässt sich auf beliebige Properties anwenden, spannend wird’s, wenn man damit einzelne Video-Frames adressiert statt CSS-Werte:
video.addEventListener("loadedmetadata", () => {
ScrollTrigger.create({
trigger: ".scene",
start: "top top",
end: "bottom bottom",
onUpdate: (self) => {
video.currentTime = self.progress * video.duration;
},
});
});Genau dieses Prinzip, Scroll-Position rechnet direkt auf einen Frame-Index um, ist der Kern meines zweiten Skills, Scroll World Pro: eine Kamerafahrt, die schnittlos von Szene zu Szene fliegt, komplett gesteuert durch die Scroll-Position, kombiniert mit Pin (die Kamera-Ebene bleibt fixiert, während der Scroll die Zeitleiste vorantreibt). Kein Video, das einfach durchläuft, egal ob gescrollt wird, sondern eine Fahrt, die exakt anhält, wenn man aufhört zu scrollen.
Der Werkzeugkasten dahinter
Für die meisten dieser Muster reicht GSAP mit dem ScrollTrigger-Plugin komplett aus, das ist auch das, was in allen Code-Beispielen oben steckt. Je nach Projekt kommen dazu:
- Motion (ehemals Framer Motion, für React, Vue und plain JS), wenn UI-Komponenten selbst animiert werden sollen, nicht nur Scroll-Sektionen
- Lenis, wenn zusätzlich ein sanfteres, träges Scroll-Gefühl gewünscht ist (Smooth Scrolling, unabhängig von den Scroll-Animationen selbst)
- Three.js, sobald tatsächliches 3D statt nur simulierter Tiefe durch Parallax gebraucht wird
Kein Muster hier braucht zwingend eine Library, reines CSS mit scroll-timeline kommt inzwischen erstaunlich weit für Scroll Trigger und Scroll Progress. Für Pin, Horizontal Scroll und vor allem frame-genaues Scroll-Linked auf Video ist GSAP ScrollTrigger nach wie vor der pragmatischste Weg, weil Cross-Browser-Kanten (Safari, mobile Viewport-Sprünge) schon eingepreist sind.
Ein Tipp am Rande, den ich selbst regelmäßig nutze: Motion bringt ein eigenes AI-Toolkit mit MCP-Server, das ein KI-Coding-Tool direkt an die aktuelle Dokumentation anschließt, inklusive Beispielsuche und CSS-Spring-Generator. Statt dass die KI aus veraltetem Trainingswissen halluziniert, holt sie sich die echte, aktuelle API ab. Für alles, was mit Motion gebaut wird, spart das spürbar Nacharbeit.
Und man muss das nicht mehr selbst coden
Der ganze Code oben war noch vor kurzem der eigentliche Aufwand, GSAP-Timelines von Hand tunen, Trigger-Werte durchprobieren, Edge Cases auf Safari mobile debuggen. Genau das ist inzwischen an KI delegierbar. Ein Tool wie Claude Code liest einen dieser sechs Muster-Namen samt Zielverhalten und schreibt die ScrollTrigger-Konfiguration selbst, inklusive der ganzen kleinen Stolperfallen (Pin sauber freigeben, overflow: hidden nicht vergessen, Reduced-Motion respektieren), ohne dass man selbst jede Zeile tippt.
Genau dafür sind Cinemagraph Section und Scroll World Pro gebaut: keine fertigen Widgets zum Einbinden, sondern Anleitungen, die ein KI-Coding-Tool Schritt für Schritt durch genau die Muster oben führen, bis eine fertige, auf das jeweilige Projekt zugeschnittene Sektion dabei rausfällt. Man muss dafür kein GSAP können, man muss wissen, welches der sechs Muster man will.
Welches Muster für welchen Bedarf
Kurz zusammengefasst, bevor man anfängt zu programmieren:
| Bedarf | Muster |
|---|---|
| Element soll auftauchen, wenn man hinscrollt | Scroll Trigger |
| Ein Abschnitt soll stehen bleiben, während Content daran vorbeizieht | Pin |
| Die Seite soll räumliche Tiefe bekommen | Parallax |
| Eine Galerie soll sich seitlich statt vertikal bewegen | Horizontal Scroll |
| Irgendein Wert soll 1:1 an die Scroll-Position gekoppelt sein | Scroll Progress / Scroll-Linked |
Und die eine Regel, die wichtiger ist als jede einzelne Technik: Animation muss einen Zweck haben, nicht nur beeindrucken. Sobald eine Bewegung vom Inhalt ablenkt statt ihn zu unterstützen, ist es die falsche Wahl, egal wie sauber der Code dahinter ist.
Beide Skills, die die letzten beiden Muster oben in der Praxis zeigen, Cinemagraph Section und Scroll World Pro, lassen sich live auf den jeweiligen Seiten durchscrollen. Wenn du sowas für dein eigenes Projekt brauchst, schreib mir.
Kommentare