Scrollytelling ist eine Erzählform für Websites, bei der die Scrollbewegung die Handlung vorantreibt. Mit jedem Abschnitt erscheinen neue Texte, Bilder, Animationen oder Videos und bauen eine Geschichte in festgelegter Reihenfolge auf. Das Format eignet sich für Markengeschichten, Produktlaunches und erklärungsbedürftige Inhalte. Voraussetzung sind eine durchdachte Dramaturgie und eine markengerechte Gestaltung. Die technische Umsetzung muss schnell laden, barrierefrei bedienbar sein und Inhalte für Suchmaschinen und KI-Systeme lesbar halten.
Scrollytelling: Erzählen durch Scrollen
Der Begriff Scrollytelling setzt sich aus „Scrollen“ und „Storytelling“ zusammen. Die Scrollbewegung ersetzt das Umblättern: Ein Diagramm baut sich auf, ein Produkt dreht sich ins Bild, ein Zitat erscheint, während im Hintergrund ein Video läuft. Das Tempo bestimmen die Besucherinnen und Besucher, die Reihenfolge legt die Gestaltung fest.
Eine klassische Website funktioniert wie ein Nachschlagewerk, in dem Menü und Unterseiten den gezielten Zugriff auf einzelne Informationen erlauben. Eine Scrollytelling Website ist die konsequenteste Form der Storytelling Website und folgt einem Drehbuch. Ein Parallax-Effekt, bei dem sich Vorder- und Hintergrund unterschiedlich schnell bewegen, kann darin vorkommen, ergibt für sich genommen aber noch keine Geschichte. Von einer Präsentation unterscheidet sich das Format durch fließende Übergänge, die der Bewegung von Mausrad oder Finger folgen.
Als Durchbruch des Formats gilt „Snow Fall: The Avalanche at Tunnel Creek“. Die New York Times veröffentlichte die Reportage über ein Lawinenunglück am 20. Dezember 2012, Autor John Branch erhielt dafür 2013 den Pulitzer-Preis für Feature Writing.¹ Laut MIT Open Documentary Lab wird die Reportage vielfach als Ausgangspunkt des Scrollytellings genannt, das seitdem in vielen digitalen Redaktionen etabliert ist.² Aus dem Longform Storytelling des Journalismus hat sich das Prinzip auf die Markenkommunikation übertragen, etwa auf Kampagnenseiten und Unternehmensporträts.
Wie Scrollytelling Aufmerksamkeit lenkt und Komplexes ordnet
Beim interaktiven Storytelling übernimmt die Gestaltung die Blickführung. Informationen erscheinen in einer festgelegten Abfolge, jede Szene bereitet die nächste vor, und die Seite erhält einen Spannungsbogen, wie er aus Film und Reportage bekannt ist. Digitales Storytelling in dieser Form soll Besucher länger bei einem Thema halten und eine emotionale Verbindung zur Marke herstellen. Ob das gelingt, zeigen erst die Nutzungsdaten der jeweiligen Seite.
Klarer ist der Nutzen beim Erklären. Eine Lieferkette, eine Klimabilanz oder ein Produktionsprozess lassen sich Schritt für Schritt aufbauen, sodass Zahlen Kontext und Abläufe eine nachvollziehbare Reihenfolge erhalten. Eine klare Informationsarchitektur kann Scrollytelling allerdings nicht ersetzen. Wer eine Telefonnummer oder einen Preis sucht, braucht einen direkten Weg dorthin. Eine Scrollytelling-Seite ergänzt die bestehende Website deshalb um einen erzählerischen Bereich, während Navigation und Unterseiten erhalten bleiben.
Scrollytelling Beispiele: Einsatzfelder für Marken und Unternehmen
Geeignet ist das Format überall dort, wo eine Entwicklung oder ein Zusammenhang gezeigt werden soll. Eine Markengeschichte lässt sich als Weg erzählen, auf dem Gründung, Wachstum und Werte eines Unternehmens nacheinander sichtbar werden. Im Employer Branding kann eine Seite den Arbeitsalltag aus Sicht der Mitarbeitenden nachzeichnen. Bei Produktlaunches und Kampagnen-Microsites wird ein Produkt Schicht für Schicht vorgestellt, und Jahres- oder Nachhaltigkeitsberichte gewinnen an Zugänglichkeit, wenn Kennzahlen in eine Erzählung eingebettet werden. Auch Case Studies profitieren, weil sich ein Projekt von der Ausgangslage zum Ergebnis verfolgen lässt.
Für Leistungsübersichten, Kontaktseiten oder Shops mit großem Sortiment passt eine klassische Seitenstruktur in der Regel besser.
Dramaturgie und Konzept: Das “Drehbuch” entsteht vor der ersten Animation
Am Anfang eines Scrollytelling-Projekts steht die Geschichte. Zuerst wird festgelegt, welche Wirkung die Seite erzielen soll und welche Handlung am Ende erwartet wird. Daraus ergeben sich Kernbotschaft und Zielgruppe. Eine Recruiting-Seite für Berufseinsteiger folgt einer anderen Dramaturgie als ein Bericht für Investoren.
Aufbau einer Geschichte: Einstieg, Spannungsbogen, Höhepunkt und Handlungsaufforderung
Ein Scrollytelling folgt den Grundregeln des Erzählens. Der Einstieg weckt Interesse, der Mittelteil baut Spannung auf, der Höhepunkt liefert die zentrale Erkenntnis, und am Ende steht eine klare Handlungsaufforderung. Wie lang einzelne Szenen sein dürfen und wo der Höhepunkt sitzt, hängt von Inhalt und Zielgruppe ab.
Vor der Gestaltung entsteht ein Storyboard, das Szene für Szene festhält, welcher Text erscheint, welches Bild sich bewegt und was der Scroll auslöst. Wireframes übertragen diesen Ablauf auf Desktop und Smartphone. Änderungen in dieser Phase kosten deutlich weniger als Korrekturen im fertigen Code. Brand Storytelling entfaltet seine Wirkung, wenn Tone of Voice, Farbwelt, Typografie und Bildsprache sich als roter Faden durch alle Szenen ziehen und die Geschichte erkennbar nach der eigenen Marke klingt.
Gestaltung und Animation: Storytelling im Webdesign
Storytelling im Webdesign stellt besondere Anforderungen an die Gestaltung. Typografie muss auch in Bewegung lesbar bleiben, und das Layout braucht eine eindeutige visuelle Hierarchie, damit der Blick in jeder Szene einen Ankerpunkt findet. Als Mittel stehen scroll-getriggerte Animationen, Parallax, Videos und Zoom-Effekte zur Verfügung, Mikrointeraktionen und weiche Übergänge verbinden die Szenen.
Jede Scroll-Animation sollte einen erzählerischen Zweck erfüllen. Bewegen sich viele Elemente gleichzeitig, konkurrieren sie um Aufmerksamkeit, und die Botschaft tritt in den Hintergrund. Gute Gestaltung setzt Effekte deshalb sparsam und gezielt ein.
Scrollytelling erstellen: Technik, Tools und Pflege
Die Grundlage bilden HTML, CSS und JavaScript. Für anspruchsvolle Animationen hat sich die Bibliothek GSAP mit dem Plugin ScrollTrigger etabliert, die seit der Übernahme durch Webflow einschließlich aller Plugins kostenlos ist, auch für kommerzielle Projekte.³ Vektoranimationen lassen sich mit Lottie einbinden, einem von Airbnb entwickelten Format, das Animationen aus After Effects als JSON-Datei exportiert und im Browser abspielt.⁴
Baukästen und Scrollytelling Tools ermöglichen erste Ergebnisse ohne Programmierkenntnisse und können für einfache Projekte ausreichen. Vor der Entscheidung lohnt sich ein Blick darauf, wie weit sich Animationen an das Corporate Design anpassen lassen, welche Kontrolle über Quellcode und SEO besteht, inwiefern Algorithmen wie KIs den Inhalt lesen können und wie stark die Abhängigkeit vom Anbieter ausfällt. Eine individuelle Entwicklung bietet mehr Gestaltungsspielraum und lässt sich nahtlos in die bestehende Website integrieren.
Auch nach dem Launch muss die Seite pflegbar bleiben, damit Texte, Zahlen und Bilder ohne erneuten Entwicklungsaufwand im CMS aktualisiert werden können. Ebenso früh muss die Ladezeit mitgedacht werden, da hochauflösende Bilder, Videos und Animationsbibliotheken das Datenvolumen erhöhen. Moderne Bildformate wie WebP oder AVIF und Lazy Loading können es im Rahmen halten.
Mobile Nutzung und Barrierefreiheit
Auf dem Smartphone wird im Hochformat und per Touch gescrollt, teils mit geringerer Bandbreite. Szenen, die auf einem großen Bildschirm wirken, können auf einem schmalen Display untergehen. Da Google für Indexierung und Ranking die mobile Version einer Seite heranzieht, berücksichtigen Konzept und Gestaltung das Hochformat von Beginn an.⁵
Für Websites und Apps, über die Unternehmen Produkte und Dienstleistungen an Verbraucher vertreiben, gilt seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz.⁶ Ob eine Scrollytelling-Seite darunter fällt, ist im Einzelfall rechtlich zu prüfen. Unabhängig davon braucht sie eine Fassung ohne Animation, Tastaturbedienung, ausreichende Kontraste und Textalternativen für Bilder und Videos.
Scrollytelling, SEO und GEO: Inhalte für Suchmaschinen und KI-Systeme lesbar halten
Sichtbarkeit entsteht in klassischen Suchmaschinen wie z. B. Google und Bing sowie in KI-gestützten Antwortsystemen wie ChatGPT oder Perplexity. Zur Suchmaschinenoptimierung (SEO) kommt deshalb die Generative Engine Optimization (GEO) hinzu, also die Aufbereitung von Inhalten, damit KI-Systeme sie erfassen, einordnen und als Quelle nennen können. Bei Scrollytelling-Seiten entscheidet die technische Umsetzung darüber, was diese Systeme überhaupt lesen.
Google & Co. verarbeiten JavaScript-Seiten in den Phasen Crawling, Rendering und Indexierung und erfasst nachgeladene Inhalte erst nach dem Rendering.⁹ Bing kann JavaScript nach eigenen Angaben grundsätzlich rendern, unterstützt aber nicht alle Frameworks und empfiehlt für stark JavaScript-basierte Websites eine vorgerenderte Fassung.¹⁰ Bei KI-Crawlern fehlt das Rendering ganz: Laut einer Analyse von Vercel und MERJ aus dem Jahr 2024 führte keiner der großen KI-Crawler JavaScript aus, darunter die Bots von OpenAI und Anthropic.¹¹ Inhalte, die erst per Skript erscheinen, bleiben für diese Systeme unsichtbar. Dasselbe gilt für Texte, die in Grafiken eingebettet sind.
Eine Umsetzung, die SEO und GEO gleichermaßen berücksichtigt, liefert alle Textinhalte bereits im HTML aus, etwa über serverseitiges Rendering, und legt die Animationen als zusätzliche Ebene darüber. Eine saubere Überschriftenhierarchie, Ankerlinks zu einzelnen Kapiteln und klar formulierte Kernaussagen erleichtern Suchmaschinen und KI-Systemen die Einordnung.
Hinzu kommen die Core Web Vitals. Als gut gelten eine Ladezeit des größten sichtbaren Elements (LCP) unter 2,5 Sekunden, eine Reaktionszeit auf Interaktionen (INP) von höchstens 200 Millisekunden und eine Layoutverschiebung (CLS) von höchstens 0,1.¹² Große Bilder und Videos wirken sich auf den LCP aus, umfangreiche Skripte auf die Reaktionszeit. Bei einer interaktiven Website mit vielen Animationen gehören diese Werte deshalb von Beginn an ins Konzept. Ob die Geschichte ihr Ziel erreicht, zeigt nach dem Launch eine Messung von Scrolltiefe, Verweildauer und Conversions.
Fehlerquellen beim Scrollytelling
Effekte ohne erzählerischen Zweck lenken von der Botschaft ab. Lange Ladezeiten und ruckelnde Animationen erhöhen das Risiko, dass Besucher die Seite verlassen, bevor die Geschichte beginnt. Fehlt am Ende ein Call-to-Action, bleibt offen, welcher Schritt folgen soll. Weichen Typografie, Farben oder Tonalität vom restlichen Auftritt ab, entsteht ein Bruch zwischen Scrollytelling-Seite und Website.
Scrollytelling im Markenauftritt: Konzeption, Gestaltung und Umsetzung aus einer Hand
Eine Scrollytelling-Seite gelingt, wenn Konzept, Design und Entwicklung ineinandergreifen. Die Konzeption muss technische Möglichkeiten kennen, die Gestaltung die mobile Wirkung einer Animation einschätzen können, und die Entwicklung muss wissen, welche Markenwirkung eine Bewegung erzielen soll. Als Webdesign Agentur aus Braunschweig verbinden wir diese Bereiche. Wir leiten die Geschichte aus der Markenstrategie ab, entwickeln Storyboard und Gestaltung im Corporate Design und setzen die Seite technisch so um, dass sie zügig lädt und barrierefrei bedienbar ist. Die Zusammenarbeit mit einer Branding-Agentur bietet sich vor allem an, wenn eine Markengeschichte erstmals digital erzählt wird oder ein Launch bevorsteht.
Fazit: Scrollytelling beginnt mit der Geschichte
Scrollytelling verwandelt Inhalte in eine Abfolge von Szenen, die Besucher in ihrem eigenen Tempo erleben. Das Format eignet sich für Markengeschichten, Produktlaunches und komplexe Zusammenhänge, wenn es auf einer klaren Dramaturgie und einer markengerechten Gestaltung aufbaut. Eine Umsetzung, die Ladezeit, mobile Nutzung, Barrierefreiheit und Suchmaschinen berücksichtigt, sorgt dafür, dass die Geschichte ihr Publikum erreicht.
Alles auf einen Blick
- Die Geschichte kommt zuerst: Ziel, Kernbotschaft und Dramaturgie werden festgelegt, bevor über Effekte entschieden wird.
- Das Format passt zu bestimmten Inhalten: Scrollytelling eignet sich für Entwicklungen und Zusammenhänge, für Nachschlage-Inhalte bleibt eine klassische Seite die bessere Wahl.
- Mobile Nutzung und Barrierefreiheit gehören ins Konzept: Touch-Bedienung, reduzierte Bewegung und eine Fassung ohne Animation werden von Beginn an eingeplant.
- SEO, GEO und Performance sichern die Reichweite: Textinhalte im HTML, eine klare Struktur und gute Core Web Vitals machen die Geschichte für Suchmaschinen und KI-Systeme auffindbar.
- Marke, Design und Technik greifen ineinander: Scrollytelling wirkt am stärksten, wenn Konzeption, Gestaltung und Umsetzung aufeinander abgestimmt sind.
