Scrollytelling

Scrollytelling ist ein interaktives Web-Format, bei dem Visualisierungen, Grafiken oder Medien sich synchron zum Scrollen des Nutzers verändern – eine Narration, die der Lesegeschwindigkeit folgt.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Infografik & Datenvisualisierung · Niveau: Einsteiger

Was ist Scrollytelling?

Scrollytelling kombiniert die Vertrautheit des scrollenden Weblesens mit der Dramaturgie eines geführten Erlebnisses. Statt statischer Infografiken, die der Leser allein interpretiert, verändert sich beim Scrollytelling der Inhalt synchron zur Scrollposition: Ein Diagramm baut sich Schritt für Schritt auf, eine Karte zoomt in eine Region, eine Annotation erscheint an einem Datenpunkt.

Der Begriff ist ein Kofferwort aus „Scrolling" und „Storytelling". Er beschreibt kein technisches Protokoll, sondern eine Designphilosophie: Die Geschichte führt; der Nutzer wählt das Tempo.

Erklärung

Das technische Grundprinzip:

Beim Scrollytelling wird die Scroll-Position des Browsers kontinuierlich ausgelesen (JavaScript: IntersectionObserver API oder ältere scroll-Events). Wenn der Nutzer einen bestimmten Bereich der Seite erreicht (oder verlässt), wird eine Zustandsänderung ausgelöst: Eine neue Datenserie erscheint im Diagramm, eine Annotation wird eingeblendet, eine Karte verschiebt sich.

Technisch gibt es zwei Hauptvarianten:

• Stick and Scroll (auch: „Scrolljacking lite"): Die Visualisierung ist links fixiert (sticky), der Text läuft rechts daneben. Beim Scrollen durch Textblöcke verändert sich die Grafik.
• Full-Screen-Slides: Jede Scrolltiefe wechselt in eine neue Vollbild-Folie. Dramaturgie wie in einer Präsentation, Navigation durch Scrollen.

Flourish Story:

Flourish bietet einen integrierten Story-Mode, der mehrere Flourish-Visualisierungen als Slides hintereinander stellt und durch Scrollen (oder Klicken) navigierbar macht. Jede Slide enthält eine Grafik plus optionalen Text, Header und Footer. Das ist der einfachste Einstieg in Scrollytelling ohne Code.

Shorthand:

Shorthand (shorthand.com) ist eine spezialisierte Plattform für Longform-Web-Features mit professionellem Scrollytelling. Bilder, Videos, Grafiken und Text können mit Scroll-gesteuerten Effekten (Parallax, Fade, Zoom) kombiniert werden. Shorthand ist in vielen internationalen Redaktionen (BBC, Reuters, NZZ) das Standardtool für aufwendige Multimedia-Features. Kein Code nötig; monatliche Abonnementkosten.

Flourish vs. Shorthand:

Flourish ist optimiert für Datenvisualisierungen: Wenn der Kern des Features Diagramme und Karten sind, die schrittweise enthüllt werden, ist Flourish die bessere Wahl. Shorthand ist optimiert für Multimedia-Longform: Wenn Fotos, Videos, große Hintergrundbilder und Grafiken zusammen eine Geschichte erzählen, ist Shorthand besser. Beide sind ohne Programmierkenntnisse nutzbar.

D3.js und Scrollama:

Für vollständig angepasste Scrollytelling-Implementierungen wird im Web die JavaScript-Bibliothek Scrollama (github.com/russellsamora/scrollama) eingesetzt. Scrollama verwendet den IntersectionObserver und löst bei jedem Eintritt in einen Textabschnitt (Step) eine Callback-Funktion aus. Diese Callback-Funktion kann dann eine D3-Visualisierung updaten. Das Muster: Text-Steps links, fixierte D3-Grafik rechts. Beispiele: New York Times, The Guardian, Washington Post.

Cognitive Load und die Grenzen des Scrollytelling:

Scrollytelling ist nicht für jeden Inhalt geeignet. Wenn die Visualisierung zu komplex ist, um in kurzen Schritten verstanden zu werden, überfordert Scrollytelling das Publikum. Cairo (2016) warnt: Interaktivität und Animation sind kein Selbstzweck. Wenn ein statisches Diagramm mit gutem Text dieselbe Botschaft vermittelt, ist es oft die bessere Wahl – schneller zu produzieren, schneller zu konsumieren, auf mobilen Geräten unkomplizierter.

Mobile Herausforderungen:

Scrollytelling ist auf mobilen Geräten grundsätzlich problematisch: Kleine Bildschirme, Touch-Gesten statt Maus, kein Hover. Viele Scrollytelling-Implementierungen degradieren auf Mobilgeräten auf einfachere, statische Darstellungen. Das muss im Design von Anfang an mitgedacht werden.

Wann einsetzen / wann nicht

Einsetzen, wenn:

• Eine komplexe Datenstory in mehrere, schrittweise enthüllte Teile aufgeteilt werden soll.
• Das Publikum geführt werden soll, um Missverständnisse oder selektives Lesen zu vermeiden.
• Die Geschichte visuell stark ist und von Grafiken profitiert, die sich schrittweise verändern.
• Ressourcen für Produktion und technische Umsetzung vorhanden sind.
• Longform-Web-Journalismus oder ein besonderes Content-Format geplant ist (kein tagesaktual Beitrag).

Nicht einsetzen, wenn:

• Tagesaktuelle Berichterstattung gefragt ist – Scrollytelling braucht Produktionszeit.
• Die Botschaft einfach und direkt ist – ein statisches Diagramm mit gutem Text ist besser.
• Das Publikum hauptsächlich auf Mobilgeräten liest, ohne optimierte Mobile-Fallbacks.
• Kein Programmierwerkzeug oder kein Zugang zu Flourish/Shorthand vorhanden ist.
• Interaktivität erwartet wird, die über lineares Scrollen hinausgeht (z. B. freie Exploration) – dann ein Dashboard.

Beispiele (5 konkrete)

1. New York Times „Snow Fall" (2012): Das Pionierwerk des modernen Web-Storytellings – nicht technisch Scrollytelling, aber Grundlage. Multimedia-Feature zu einer Lawinenkatastrophe mit Scroll-Effekten, Videos und Karten. Gilt als Startschuss für die longform digital narrative.
2. Reuters „The Financial Crisis": Ein Scrollytelling-Feature erklärt in 12 Schritten, wie die Finanzkrise 2008 eskalierte. Für jeden Schritt eine neue Grafik oder Karte, Text links, Visualisierung rechts fixiert. Musterbeispiel für Datenstorytelling per Scroll.
3. Zeit Online „Klimapfade": Schrittweises Enthüllen verschiedener Klimaszenarien (RCP 2.6, 4.5, 8.5) als Liniendiagramme. Jeder Scroll-Schritt blendet ein neues Szenario ein und kontextualisiert es mit einem Erklärungstext.
4. Tagesspiegel „Berliner Stadtentwicklung": Kartentransformation per Scroll: Die Karte zoomt von der Gesamtstadtansicht in einzelne Bezirke, während paralleler Text die Geschichte jedes Bezirks erzählt.
5. Flourish-basiertes Feature in einer Hochschulzeitung: Studierende eines Datenjournalismus-Kurses erstellen mit Flourish Story ein Scrollytelling-Feature zu regionalen Wahltrends – fünf Diagramm-Slides, je ein Erklärungstext, zusammengesetzt in 4 Stunden ohne Code.

In der Praxis

Einstieg mit Flourish Story:

1. Auf flourish.studio anmelden.
2. Mehrere Visualisierungen als einzelne Projekte erstellen.
3. „New story" im Dashboard wählen.
4. Visualisierungen als Slides importieren.
5. Texte, Überschriften und Trennbilder hinzufügen.
6. Story veröffentlichen und Embed-Code für die eigene Website kopieren.

Einstieg mit Shorthand:

1. Account auf shorthand.com erstellen (kostenpflichtig; Educational-Tarif verfügbar).
2. Neuen Story-Entwurf öffnen.
3. Sections hinzufügen: Text, Grafik-Embed (z. B. Datawrapper oder Flourish), Background-Image.
4. Scroll-Effekte für Sections konfigurieren (Parallax, Fade, Snap).
5. Voransicht in Desktop- und Mobildarstellung prüfen.
6. Veröffentlichen und URL teilen oder Shorthand-iFrame einbetten.

Code-Workflow mit Scrollama + D3:

1. npm install scrollama (oder via CDN).
2. Text-Steps als <div class="step"> mit Datensatz-Attribut definieren.
3. Scrollama mit IntersectionObserver initialisieren.
4. onStepEnter-Callback schreibt den neuen Zustand in die D3-Visualisierung.
5. D3 aktualisiert Datenpunkte, Farben oder Achsen über transition().duration(500).

Vergleich & Abgrenzung

Pageflow ist ein Open-Source-Scrollytelling-CMS, das von der deutschen Journalismusorganisation Hochkant entwickelt wurde. Es ist besonders für Redaktionen mit eigener Serverinfrastruktur interessant, die keine monatlichen Plattformgebühren zahlen wollen.

Häufige Fragen (FAQ)

Wann ist Scrollytelling besser als ein Video? Scrollytelling gibt der Nutzerin oder dem Nutzer die Kontrolle über das Tempo – niemand wird durch lange Passagen durchgepeitscht, niemand muss zurückspulen. Besonders für datendichte Inhalte, die Zeit zur Verarbeitung brauchen, ist Scroll besser als Video. Videos sind besser, wenn emotionale Wirkung durch Ton und bewegte Bilder das Kernmedium ist (Reportage, Interview).

Wie lange sollte ein Scrollytelling-Feature sein? Faustregeln: 5–10 visuelle Schritte (Slides, Scroll-Trigger) sind ideal für ein fokussiertes Feature. Unter 5 Schritten könnte eine statische Infografik genügen; über 15 Schritte verlieren viele Leserinnen und Leser die Geduld. Die Gesamtlänge des Features sollte auf einem durchschnittlichen Gerät nicht mehr als 10–15 Minuten Lesedauer umfassen.

Verwandte Einträge

• Datenstorytelling — Narrative Methoden für Daten
• Flourish — Tool für Scrollytelling via Story-Mode
• Observable Plot — D3-basierte Visualisierungen für Scrollama-Implementierungen

Weiterführend

• Cairo, A. (2016). The Truthful Art, Kap. 12 (Interactive and animated visualizations). New Riders.
• Tufte, E. R. (2001). The Visual Display of Quantitative Information (2. Aufl.). Graphics Press.
• Scrollama: github.com/russellsamora/scrollama (JavaScript-Bibliothek)
• Shorthand Academy: support.shorthand.com/en/articles (Tutorials)
• Nichols, J. (2019). Scrollytelling Best Practices. Source (Open News). source.opennews.org.