Scrollytelling: Wie du eine Geschichte über die Scroll-Achse erzählst
von Richard Albrecht am 15.09.2026
In Kürze: Scrollytelling verknüpft den Scroll-Fortschritt mit dem Ablauf einer Geschichte: Text, Bild und Grafik verändern sich, während die Nutzer nach unten scrollen. Technisch lässt sich das seit 2026 mit CSS scroll-driven animations ohne JavaScript umsetzen, für komplexe Abläufe bleibt GSAP ScrollTrigger die stärkere Wahl. Wichtig sind ein echter Erzählgrund und die Rücksicht auf prefers-reduced-motion.
Scrollytelling ist ungefähr so alt wie „Snow Fall“, die Multimedia-Reportage der New York Times von 2012. Seitdem taucht es in Wellen auf: mal als Auszeichnungsgewinner, mal als der Effekt, wegen dem eine Website auf dem Notebook des Chefs ruckelt.
Der Unterschied zwischen beiden Ausgängen hat weniger mit der Technik zu tun als mit der Frage, ob es überhaupt etwas zu erzählen gibt. Genau da fangen wir an.
Inhaltsverzeichnis:
Was Scrollytelling ausmacht
Wann es trägt und wann es stört
Die vier Grundmuster
Technik 2026: CSS oder JavaScript?
CSS scroll-driven animations
GSAP ScrollTrigger
Die Entscheidungshilfe
Performance und Barrierefreiheit
Fazit
Was Scrollytelling ausmacht
Scrollytelling koppelt den Scroll-Fortschritt an eine Dramaturgie. Der Nutzer steuert dabei das Tempo, die Reihenfolge liegt fest. Das unterscheidet es von einer normalen Seite mit Animationen, bei der Elemente beim Erscheinen einblenden und danach nichts weiter passiert.
Der Kern ist eine Verabredung: Ich scrolle, und dafür bekomme ich einen Erzählschritt. Wird diese Verabredung gebrochen, etwa weil zwei Bildschirmhöhen Scrollen zu keiner Veränderung führen, wirkt die Seite kaputt. Aus meiner Erfahrung ist das der häufigste Grund, warum Nutzer abspringen: Sie halten die Verzögerung für einen Ladefehler.
Wann es trägt und wann es stört
Scrollytelling lohnt sich bei Inhalten mit einer Abfolge, die inhaltlich begründet ist. Ein Produktionsprozess vom Rohstoff zum fertigen Teil, die Entwicklung einer Zahl über zehn Jahre, der Aufbau eines Geräts von außen nach innen: In allen drei Fällen gibt es eine natürliche Reihenfolge, die das Scrollen abbildet.
Ungeeignet ist es überall dort, wo Nutzer etwas suchen. Auf einer Leistungsübersicht, in einer Preistabelle oder im Kontaktbereich steht die Animation zwischen dem Nutzer und seinem Ziel. Wir empfehlen deshalb, Scrollytelling auf einzelne Kapitel einer Seite zu begrenzen und Orientierungsseiten davon freizuhalten.
Ein dritter Fall wird oft übersehen: Wiederkehrende Besucher. Eine Animation, die beim ersten Mal beeindruckt, kostet beim fünften Besuch nur noch Zeit. Bei Seiten mit hoher Wiederkehrrate lohnt es sich, den Ablauf beim zweiten Besuch zu verkürzen.
Die vier Grundmuster
In der Praxis reichen vier Muster aus, um fast jede Scrollytelling-Idee umzusetzen. Sie lassen sich kombinieren, sollten aber pro Kapitel einzeln bleiben.
Muster | Was passiert | Typischer Einsatz |
|---|---|---|
Sticky Stage | Eine Grafik bleibt stehen, der Text daneben läuft durch | Erklärung eines Aufbaus in mehreren Schritten |
Scrubbing | Eine Animation läuft exakt im Takt des Scrollens vor und zurück | Produktdrehung, Zeitleiste |
Reveal | Elemente erscheinen, sobald sie in den Sichtbereich kommen | Aufzählungen, Zahlen, Zitate |
Parallax | Ebenen bewegen sich unterschiedlich schnell | Tiefenwirkung im Titelbereich |
Die stärkste Wirkung bei geringstem Risiko hat die Sticky Stage, weil der Text lesbar bleibt und die Grafik ruhig steht. Parallax ist das Muster mit dem schlechtesten Verhältnis aus Aufwand und Nutzen und wird von uns nur noch sehr sparsam eingesetzt.
Technik 2026: CSS oder JavaScript?
Bis vor Kurzem war Scrollytelling gleichbedeutend mit JavaScript. Das hat sich geändert. Seit die CSS scroll-driven animations breit verfügbar sind, lässt sich ein guter Teil davon ohne eine einzige Zeile Skript umsetzen.
CSS scroll-driven animations
Die Spezifikation stellt zwei Zeitachsen bereit. Mit animation-timeline: scroll() hängt eine Animation am Scroll-Fortschritt eines Containers, mit animation-timeline: view() am Sichtbarkeitsfortschritt eines einzelnen Elements. Damit sind Lesefortschrittsbalken, Reveal-Effekte und einfaches Scrubbing in wenigen Zeilen erledigt.
Der praktische Vorteil liegt in der Ausführung. Diese Animationen laufen im Compositor und bleiben deshalb flüssig, selbst wenn der Haupt-Thread gerade mit anderer Arbeit beschäftigt ist. Bei JavaScript-Lösungen ist genau das die klassische Ruckel-Ursache.
Beim Browser-Support solltest du 2026 genau hinschauen. Chrome und Edge unterstützen die Funktion seit Version 115, Safari seit Version 18. Bei Firefox ist die Lage unübersichtlicher: In den stabilen Builds sitzt sie noch hinter einem Flag, während sie in Nightly aktiv ist. Als Interop 2026-Priorität steht die Vereinheitlichung auf der Agenda. Global liegt die Abdeckung damit bei ungefähr 84 Prozent.
GSAP ScrollTrigger
Für alles, was über einzelne Effekte hinausgeht, bleibt GSAP ScrollTrigger das ausgereiftere Werkzeug. Wir setzen es in Projekten ein, in denen mehrere Elemente aufeinander abgestimmt animiert werden, in denen ein Bereich gepinnt und dabei durchgescrubbt wird, oder in denen die Animation auf Zwischenzustände reagieren muss.
CSS deckt diese Fälle derzeit nicht vollständig ab. Pin-Verhalten und komplexe Timelines mit mehreren verschachtelten Abläufen sind mit GSAP schlicht schneller gebaut und leichter zu warten.
Die Entscheidungshilfe
Unsere Regel im Projektalltag lautet: Reveal-Effekte und Fortschrittsanzeigen bekommen CSS. Sobald mehr als zwei Elemente koordiniert werden oder ein Bereich gepinnt wird, kommt GSAP. Gemischt wird innerhalb eines Kapitels nicht, weil zwei Zeitachsen im selben Abschnitt schwer zu debuggen sind.
Daraus folgt für die meisten Unternehmensseiten: Der überwiegende Teil der gewünschten Effekte ist heute reine CSS-Arbeit, und die schwere Bibliothek braucht es nur für die ein bis zwei echten Erzählkapitel.
Performance und Barrierefreiheit
Zwei Punkte entscheiden darüber, ob Scrollytelling ein Gewinn oder ein Problem wird. Beide werden gern erst nach dem Launch bemerkt.
Der erste ist die Cumulative Layout Shift. Elemente, die beim Scrollen ihre Größe oder Position ändern, verschieben umliegende Inhalte, und das schlägt direkt auf die Core Web Vitals durch. Sauber gelöst wird das, indem animierte Bereiche eine feste Höhe reserviert bekommen und ausschließlich transform und opacity animiert werden.
Der zweite ist prefers-reduced-motion. Wer diese Systemeinstellung aktiviert hat, bekommt von Bewegung oft Schwindel oder Übelkeit. Wer diese Einstellung ignoriert, baut aus meiner Sicht einen handfesten Fehler ein. Praktisch heißt das: Bei aktivierter Einstellung werden die Zustände direkt gesetzt statt animiert, und die Inhalte bleiben vollständig zugänglich.
Dazu kommt eine Selbstverständlichkeit, die trotzdem regelmäßig verletzt wird: Der Inhalt muss auch ohne Animation vorhanden sein. Wenn Text erst per Skript eingefügt wird, ist er für Suchmaschinen, Screenreader und für jeden Nutzer mit blockiertem JavaScript nicht existent.
Fazit
Scrollytelling ist ein Erzählformat, kein Effektpaket. Es wirkt, wenn der Inhalt eine Reihenfolge hat, die das Scrollen sinnvoll abbildet, und es stört überall dort, wo Nutzer etwas suchen.
Technisch ist der Einstieg 2026 so leicht wie nie: Ein Lesefortschrittsbalken und saubere Reveal-Effekte sind mit CSS in einer Stunde gebaut. Fang damit an, bevor du eine Bibliothek einbindest. Und plane von Anfang an ein, wie die Seite aussieht, wenn jemand Bewegung abgeschaltet hat.
