Scrollytelling: Guide mit Beispielen & Technik

Scrollytelling kann eine Geschichte im Web sehr wirkungsvoll erzählen — und wird gleichzeitig oft dort eingesetzt, wo es nicht passt. Der Begriff beschreibt das Prinzip, bei dem die Scroll-Position des Nutzers direkt die Erzählung steuert: Text erscheint, Grafiken morphen, Zahlen wachsen, 3D-Szenen entfalten sich. Wer einmal in eine gut gemachte Scrollytelling-Experience geraten ist, scrollt weiter — nicht weil er muss, sondern weil er wissen will, was als nächstes passiert.

In diesem Guide erkläre ich, was Scrollytelling genau ist, wo es herkommt, wann es sich lohnt (und wann nicht), welche Technologien heute eingesetzt werden — und zeige ein konkretes Projekt, das wir gebaut haben.

Was ist Scrollytelling?

Scrollytelling ist kein Synonym für Parallax-Effekte (bei denen Hintergrundelemente sich langsamer bewegen als der Vordergrund) — auch wenn Parallax ein beliebtes Mittel innerhalb des Formats ist. Der entscheidende Unterschied: Beim Scrollytelling gibt es eine Handlung, die sich entfaltet. Ohne Scroll kein Fortschritt in der Erzählung.

Erleben, bevor wir erklären

Bevor wir tiefer einsteigen: Erleben Sie es. Scrollen Sie einfach weiter.

Was Sie gerade gesehen haben, ist das Grundprinzip: Drei Zustände, gesteuert durch Ihre Scroll-Position. Ein Apfel erscheint, verblasst, und aus seinen Bestandteilen entsteht eine Konstellation. Kein Klick nötig, keine Interaktion außer dem natürlichsten aller Web-Gesten.

Woher kommt Scrollytelling? Eine kurze Geschichte

Das Format hat einen präzisen Ursprung: "Snow Fall: The Avalanche at Tunnel Creek", veröffentlicht von der New York Times am 20. Dezember 2012. Der Journalist John Branch erzählte darin die Geschichte einer Lawine in den Cascade Mountains — aber nicht als reinen Text. Video, Fotos, Grafiken und Karten wurden beim Scrollen eingeblendet, überlagert, animiert. Das Stück wurde über 3,5 Millionen Mal aufgerufen in den ersten sechs Tagen und gewann einen Pulitzer Prize.

"Snow Fall" bewies: Das Web kann ein Erzählmedium sein, das Druck und Fernsehen überlegen ist, wenn Interaktion und Visuelles zusammenwachsen. In der Redaktion wurde "to snowfall" danach zum Verb für Projekte, die diesen Standard anstrebten.

Was folgte, war eine Dekade der Reifung. Der Datenjournalismus-Bereich entdeckte das Format (The Guardian, The Pudding, Reuters Graphics), Produktseiten wie etwa Apples Mac-Pro-Seite (2013) trugen es ins Marketing, und heute gehört scrollbasiertes Storytelling zum Standard-Repertoire von Agenturen, die mehr als eine Visitenkarte im Web bauen wollen.

Spotify Wrapped ist ein verwandtes Prinzip: Persönliche Daten werden in einer schrittweisen, narrativen Abfolge enthüllt — auch wenn dort Klick statt Scroll steuert. Das Prinzip ist dasselbe: eine Erzählung, die Schritt für Schritt aufgedeckt wird.

Wann lohnt sich Scrollytelling — und wann nicht?

Das ist die Frage, die die meisten Artikel nicht ehrlich beantworten. Scrollytelling ist kein Upgrade für jede Website. Es ist ein Werkzeug mit einem klaren Einsatzbereich.

Wann Scrollytelling stark ist

Storytelling-Content mit emotionalem Kern. Wenn Ihre Botschaft eine Dramaturgie hat — einen Anfang, einen Wendepunkt, ein Ende — kann Scrollytelling diese Kurve physisch erfahrbar machen. Produktgeschichten, Unternehmenshistorien, wissenschaftliche Zusammenhänge, humanitäre Berichte.

Produkt-Launches, bei denen ein Feature erklärt werden muss. Apple setzt das seit Jahren ein: Das iPhone dreht sich langsam, die Kamera fährt herein, die technischen Daten erscheinen Schritt für Schritt. Der Nutzer versteht das Produkt, weil er es auf einer narrativen Reise erlebt.

Datenjournalismus und komplexe Visualisierungen. Wenn Sie eine Karte zeigen wollen, auf der sich etwas im Laufe der Zeit verändert, oder ein Diagramm, dessen Bedeutung sich erst durch eine Abfolge von Schritten erschließt, ist scroll-gesteuertes Timing einem Klick-Interface fast immer überlegen.

Markenwebsites, bei denen Differenzierung Programm ist. Wenn Ihre Marke behauptet, anders zu sein als alle anderen, sollte Ihre Website das beweisen — nicht erzählen.

Wann Scrollytelling die falsche Wahl ist

Die Ehrlichkeit ist wichtig: Eine Scrollytelling-Experience bindet Entwicklungszeit, erfordert Content-Arbeit (Drehbuch, Assets, Sound), und sie hat einen Performance-Footprint. Auf einer Produktkategorie-Seite, bei der der Nutzer kaufen will und nicht staunen, ist sie kontraproduktiv.

Praxis-Beispiel: "Through the Mind's Eye" auf aphantasie.org

Das bisher aufwendigste Scrollytelling-Projekt, das wir gebaut haben, ist die Experience-Seite auf aphantasie.org. Sie zeigt das Phänomen der Aphantasie — die Unfähigkeit, mentale Bilder zu erzeugen — in einer interaktiven 3D-Erzählung mit dem Titel "Through the Mind's Eye".

Die Dramaturgie: fünf Akte

Die Experience ist in fünf Akte gegliedert, die beim Scrollen nacheinander aktiviert werden:

1. Der leuchtende Apfel. Ein glühender, prozedural modellierter Apfel erscheint in einer atmosphärischen 3D-Szene mit Staubpartikeln und Lichtschleiern — das überwältigend lebendige innere Bild eines Menschen mit Hyperphantasie.
2. Das Verblassen. Das Bild verliert Farbe und Tiefe. Der Apfel wird zur Silhouette.
3. Das Flackern. Die Geometrie beginnt zu springen und zu flimmern — Versuch und Versagen, das Bild festzuhalten.
4. Nur noch die Kontur. Vom Apfel bleibt eine Kontur aus Lichtpunkten, die ebenfalls verblasst, bis fast völlige Dunkelheit herrscht. Wahrnehmung ohne inneres Bild.
5. Die Konstellation. Aus dem Nichts erscheinen Punkte — und verbinden sich zu einer abstrakten Sternenformation. Das ist, was Aphantasie-Betroffene beschreiben: keine Bilder, aber Konzepte, Muster, Strukturen.

Die technische Umsetzung

Die Experience ist in React Three Fiber gebaut — der React-Abstraktion über Three.js, die WebGL-Szenen als deklarative Komponenten beschreibbar macht. Scroll-Fortschritt wird über ScrollControls aus @react-three/drei in eine normierte 0-bis-1-Zahl übersetzt, die dann Kamerafahrten, Material-Übergänge und Partikel-Systeme steuert.

Die fünf Akte entsprechen fünf gewichteten Abschnitten auf der Scroll-Achse. Ein Scroll-Damping glättet die Eingabe, sodass Übergänge nicht abrupt, sondern organisch wirken — und eine Device-Tier-Heuristik schaltet auf schwächeren Geräten Postprocessing-Effekte wie Bloom automatisch ab.

Weitere technische Eckpunkte:

• Gesamtlaufzeit bei normalem Scroll-Tempo: ca. 4 Minuten
• Verfügbar in 5 Sprachen (Deutsch, Englisch, Französisch, Spanisch, Polnisch)
• Statischer Fallback bei prefers-reduced-motion: Text-basierte Beschreibung der fünf Akte, kein Animation-Overhead
• Progressive Enhancement: Die Seite ist ohne WebGL lesbar, die Experience ist ein zusätzlicher Layer

Das Projekt zeigt, was Scrollytelling leisten kann, wenn Inhalt und Medium zusammenpassen: Aphantasie ist für Menschen ohne die Erfahrung abstrakt. Eine statische Seite mit Text und Bildern würde das Paradox — "Ich kann mir keine Bilder vorstellen" — nicht vermitteln. Die Experience macht es körperlich erfahrbar. Alle Details zu Konzept, Dramaturgie und Umsetzung finden Sie in der Case Study zur 3D-Experience.

Technik-Vergleich: Welches Tool für welches Projekt?

CSS Scroll-Driven Animations

In Chrome seit Version 115 nativ unterstützt, in Safari erst ab Version 26; in Firefox noch nicht stabil freigegeben — damit ist das Feature noch nicht Baseline. Mit animation-timeline: scroll() und animation-timeline: view() lassen sich Animationen direkt an den Scroll-Fortschritt koppeln — ohne JavaScript, ohne externe Libraries. Für den Produktiv-Einsatz nur mit Graceful Degradation: Ohne Unterstützung muss die Seite auch statisch funktionieren.

Stärken: Kein JS-Overhead, läuft kompositiert auf dem Browser-Thread, keine externen Abhängigkeiten. Grenzen: Nur für CSS-animierbare Eigenschaften. Komplexe Sequenzen, bedingte Logik oder 3D sind nicht abbildbar.

GSAP ScrollTrigger

Die GreenSock Animation Platform ist eine verbreitete Library für Web-Animationen — framework-agnostisch, ausgereift, mit großer Community. ScrollTrigger ist das Plugin, das Animationen an Scroll-Positionen bindet. Es wird von Agenturen weltweit für Produkt- und Markenwebsites eingesetzt.

Stärken: Sehr präzise Steuerung, pinning (Sektion fixieren während Scroll), scrubbing (Scroll = Animation-Fortschritt), Timeline-Sequenzen. Grenzen: Kein nativer 3D-Support, Bundle-Size. Lizenz: Seit der Übernahme durch Webflow ist GSAP kostenlos inklusive aller Plugins; ausgenommen ist nur der Einsatz in konkurrierenden No-Code-Werkzeugen.

Motion (useScroll, useTransform)

Motion (bis November 2024 „Framer Motion“, seitdem unabhängig und auch für reines JavaScript und Vue verfügbar) ist eine verbreitete Animation-Library für React-Projekte. Mit useScroll und useTransform lässt sich der Scroll-Fortschritt direkt in Animationswerte übersetzen. Der deklarative API-Stil passt gut in React-Komponenten.

Stärken: Nahtlose Integration in React, gute TypeScript-Unterstützung, niedrige Lernkurve für React-Entwickler. Grenzen: Die hier genutzten Hooks sind React-spezifisch, weniger Kontrolle als GSAP bei komplexen Timeline-Sequenzen.

React Three Fiber + ScrollControls

Für 3D-Experiences in React. @react-three/drei stellt ScrollControls bereit, das die Scroll-Position in einen normierten Wert übersetzt, den jede 3D-Komponente nutzen kann. useScroll() gibt Zugriff auf scroll.offset (0 bis 1) und scroll.delta.

Stärken: Voller Zugriff auf WebGL, Shader, Partikel-Systeme, PBR-Materialien. Für Experiences wie "Through the Mind's Eye" war das für uns die naheliegende Wahl. Grenzen: Hohe Lernkurve (Three.js + React + Scroll-Konzepte), GPU-Anforderungen, Performance-Budget muss aktiv gemanagt werden.

Scrollytelling umsetzen: Ein praktischer Leitfaden in 6 Schritten

Schritt 1: Erst die Dramaturgie, dann der Code

Das häufigste Scheitern von Scrollytelling-Projekten beginnt nicht mit schlechtem Code, sondern mit fehlender Dramaturgie. Fragen, die vor dem ersten Commit beantwortet sein müssen:

• Was ist die eine Aussage, die der Nutzer nach der Experience verinnerlicht hat?
• Gibt es einen Wendepunkt — einen Moment, bei dem sich die Perspektive ändert?
• Welches Gefühl soll am Ende stehen? Staunen? Verständnis? Dringlichkeit?

Scrollytelling ohne Dramaturgie ist eine animierte Broschüre. Mit Dramaturgie ist es ein Argument.

Schritt 2: Storyboard erstellen

Zeichnen Sie jeden "Frame" der Experience — nicht als Pixelperfektes Design, sondern als Skizze mit Annotationen. Für jede Szene:

• Was ist sichtbar?
• Was verschwindet?
• Welcher Text wird eingeblendet?
• Was passiert beim Übergang zur nächsten Szene?

Tools: Figma mit Scroll-Prototype-Features, Paper und Stift, Keynote. Das Storyboard wird das Kommunikations-Dokument zwischen Designer, Entwickler und Auftraggeber.

Schritt 3: Asset-Strategie entscheiden

Woher kommen die visuellen Elemente?

Prozedurale Grafik (Code-generiert): SVG-Animationen, WebGL-Geometrien, Canvas-Zeichnungen. Kein Datei-Download, skaliert ohne Qualitätsverlust, vollständig animierbar.

Bilder und Video: Hochwertig, aber teuer in Bytes. Lazyload, moderne Formate (AVIF, WebP), und überlegen Sie genau, ob ein 8 MB-Video im Viewport gerechtfertigt ist.

Hybrider Ansatz: 3D-Szene mit prozeduralgeometrischen Objekten + Textur-Maps, die Realismus hinzufügen.

Bei "Through the Mind's Eye" ist die Szene vollständig prozedural, ohne fremde Assets: Der Apfel ist eine Punktwolke, erzeugt aus einem Drehprofil, und die Leuchttextur der Punkte wird im Code erzeugt.

Schritt 4: Scroll-Mapping erstellen

Definieren Sie die Werte auf der Scroll-Achse als Tabelle:

Diese Tabelle wird zur Spezifikation für die Implementierung. Jede Spalte ist ein Parameter, der im Code kontrolliert werden muss.

Schritt 5: Performance-Budget definieren

Scrollytelling-Seiten können auf mobilen Geräten der unteren Preisklasse zur Diashow werden. Faustregel:

• Largest Contentful Paint (LCP): höchstens 2,5 Sekunden (Core Web Vitals)
• JavaScript-Bundle: für eine Scroll-Experience unter 150 KB gzip
• WebGL-Szenen: mit devicePixelRatio skalieren (max 2, nicht window.devicePixelRatio blind)
• Bilder/3D-Assets: mit dynamic import lazy loaden, erst wenn der Nutzer in die Nähe der Szene scrollt

Testen Sie auf echten Geräten — nicht nur im Desktop-Browser-DevTools-Emulator.

Schritt 6: Accessibility nicht vergessen

Das ist kein optionaler Schritt. Wer Scrollytelling baut und Accessibility ignoriert, baut für einen Teil der Nutzer eine unbrauchbare Seite.

prefers-reduced-motion: Nutzer mit vestibulären Störungen oder Epilepsie können in den Betriebssystem-Einstellungen Animationen reduzieren. Ihr Code muss das respektieren:

@media (prefers-reduced-motion: reduce) {
  /* Alle Animationen deaktivieren oder auf Fade-only reduzieren */
}

In JavaScript/React: window.matchMedia('(prefers-reduced-motion: reduce)').matches — und wenn true, alle scroll-basierten Animationen durch eine statische Version ersetzen.

Tastatur-Navigation: Wer nicht scrollen kann (oder will), muss die Geschichte trotzdem erleben können. Bieten Sie Buttons an ("Weiter", "Zurück"), die zwischen Szenen springen.

Screen-Reader: Alle narrativen Inhalte müssen als Text zugänglich sein — entweder sichtbar oder via aria-label. Eine schöne Animation, die keine textliche Entsprechung hat, ist für Screen-Reader unsichtbar.

Kosten und Aufwand: Eine ehrliche Einschätzung

Scrollytelling-Projekte unterscheiden sich stark im Aufwand. Was ihn vor allem treibt: die Qualität des Storyboards vor Projektstart (ein durchdachtes Drehbuch spart viel Entwicklungszeit), die Verfügbarkeit von Assets (3D-Modelle, Texturen, Illustrationen), die Anzahl der Szenen und Zustände sowie Anforderungen an Mehrsprachigkeit und Barrierefreiheit.

Einfache Scroll-Effekte mit CSS oder Motion sind deutlich weniger Arbeit als eine immersive 3D-Experience. Die Aphantasie-Experience ("Through the Mind's Eye") gehört mit fünf 3D-Akten, fünf Sprachen und statischer Ersatzansicht bei reduzierter Bewegung zur aufwendigen Sorte. Interaktives 3D im Browser bieten wir ab 9.900 € an — Details auf unserer Preisseite.

Häufige Fragen zu Scrollytelling

Was bedeutet Scrollytelling genau?

Scrollytelling verbindet "Scroll" und "Storytelling": Die Scroll-Position des Nutzers steuert den Fortschritt einer visuellen Erzählung. Statt alle Inhalte auf einmal zu zeigen, werden sie sequenziell eingeblendet, animiert oder transformiert — in einer Dramaturgie, die der Entwickler vorgibt und der Nutzer durch Scrollen erlebt.

Welche Tools und Libraries werden verwendet?

Je nach Projekttyp: CSS Scroll-Driven Animations für einfache Effekte ohne JavaScript, GSAP ScrollTrigger für den professionellen 2D-Bereich, Motion (useScroll, useTransform) für React-Projekte, und React Three Fiber mit ScrollControls für WebGL-3D-Experiences. Die Wahl hängt von der Komplexität, dem Tech-Stack und dem Performance-Budget ab.

Was kostet eine Scrollytelling-Website?

Das variiert erheblich — je nach Szenenzahl, Assets, Sprachen und Technik. Einfache Scroll-Animationen (Fade-in, Parallax) sind deutlich weniger Aufwand als eine interaktive 3D-Experience. Interaktives 3D im Browser bieten wir ab 9.900 € an; Details auf unserer Preisseite. Der größte Kostenblock ist in der Regel der Entwicklungsaufwand, nicht die Technologie.

Schadet Scrollytelling der SEO oder der Performance?

Es kann — wenn es schlecht umgesetzt wird. Probleme entstehen durch unkontrollierte JavaScript-Bundles, unoptimierte 3D-Assets und fehlende statische Fallbacks. Gut umgesetzt (lazyloading, statischer Content-Layer, optimierte Assets) ist eine Scrollytelling-Seite Core-Web-Vitals-kompatibel. SEO funktioniert normal, sofern der textliche Content nicht hinter JavaScript-Bedingungen versteckt ist, die Crawler nicht auflösen können.

Funktioniert Scrollytelling auf mobilen Geräten?

Ja — mit Vorbehalt. Touch-Scroll verhält sich anders als Desktop-Wheel-Scroll, was das Timing von Übergängen beeinflussen kann. Schwere WebGL-Szenen können auf Mittelklasse-Smartphones zur Ruckelgefahr werden. Lösung: Device-Tiers erkennen und die Szene entsprechend vereinfachen (devicePixelRatio begrenzen, weniger Partikel, vereinfachte Geometrien). Testen Sie immer auf echten Geräten, nicht nur im Emulator.

Was ist der Unterschied zwischen Scrollytelling und Parallax?

Parallax beschreibt einen visuellen Effekt: Hintergrundelemente scrollen langsamer als Vordergrundelemente, was Tiefe simuliert. Es ist ein Mittel, kein Konzept. Scrollytelling ist ein narratives Format — es beschreibt das Prinzip, dass Scroll die Geschichte steuert. Parallax kann Teil eines Scrollytelling-Projekts sein, aber Scrollytelling ist weit mehr als Parallax.

Fazit

Scrollytelling ist kein Trend und kein Gimmick. Es ist ein Erzählformat, das seit 2012 gereift ist und heute technisch zugänglicher ist als je zuvor — sowohl durch native CSS-Features als auch durch ausgereifte React-Libraries. Die entscheidende Frage ist nicht "Können wir das umsetzen?", sondern "Hat unsere Geschichte einen Nutzen von dieser Umsetzung?"

Wenn die Antwort ja ist, lohnt sich der Aufwand.