Storytelling for TYPO3

Jahresberichte und Produktpräsentationen brauchen mehr als Text und Bild

Statische Seiten mit langen Textblöcken funktionieren für Dokumentation und Blog-Artikel. Aber Jahresberichte, Produktlaunches und Unternehmensgeschichten brauchen ein Format, das den Besucher durch eine Erzählung führt. Scrollytelling, also Storytelling über Scroll-Interaktion, hat sich als das Format etabliert, das zwischen statischem Text und aufwändigem Video liegt. Die TYPO3 Storytelling-Extension bringt Parallax-Scrolling, animierte Inhaltsblöcke und Scroll-Trigger-Animationen direkt ins CMS, ohne dass ein externer Dienst oder eine Agentur pro Seite ein Unikat programmieren muss.

Der Vorteil gegenüber einer Custom-Entwicklung: Redakteure können Inhalte im TYPO3-Backend pflegen, Blöcke umsortieren und Animationen konfigurieren, ohne den Entwickler zu involvieren.

Typical use cases include Jahresberichte, Produktlaunches und Kampagnen-Landingpages

Das prominenteste Szenario sind digitale Jahresberichte. Unternehmen, Stiftungen und NGOs veröffentlichen ihre Geschäftszahlen zunehmend als interaktive Web-Story statt als PDF. Ein Scrollytelling-Jahresbericht zeigt im ersten Abschnitt die Headline-Zahl (Umsatz, Spendenvolumen, Mitgliederzahl), die beim Scrollen animiert hochzählt. Im zweiten Abschnitt erscheinen Diagramme mit Vergleichszahlen zum Vorjahr. Im dritten Abschnitt erzählen Porträtfotos und Zitate die Geschichte hinter den Zahlen. Die gesamte Story ist eine einzige Seite, die der Besucher durchscrollt.

Ein zweites Szenario sind Produktpräsentationen im B2B-Bereich. Ein Maschinenbauer stellt eine neue Fertigungsanlage vor. Beim Scrollen dreht sich das 3D-Rendering der Maschine, technische Daten blenden sich ein, Animationen zeigen den Produktionsprozess. Das ist kein Video (kein Laden, kein Buffering), sondern eine Scroll-gesteuerte Animation, die der Besucher in seinem eigenen Tempo durchgeht.

Drittes Szenario: Kampagnen-Landingpages. Eine Hilfsorganisation zeigt den Weg einer Spende: vom Klick auf den Spendenbutton über die Projektauswahl bis zum Bericht aus dem Zielland. Jeder Scroll-Abschnitt enthält ein Foto, einen kurzen Text und eine Animation, die den Fortschritt visualisiert.

Technical architecture renders Sektionen als Scroll-gesteuerte Content-Blöcke

Die Extension definiert einen eigenen Content-Element-Typ “Storytelling”, der aus Sektionen besteht. Jede Sektion ist ein Backend-Record mit Feldern für Headline, Text, Bild/Video (FAL), Hintergrundfarbe, Animationstyp und Scroll-Trigger. Die Sektionen werden im Backend sortiert und bilden zusammen die Scroll-Story.

Im Frontend rendert jede Sektion einen eigenen Viewport-füllenden Abschnitt. Animationen werden über CSS-Transitions und den IntersectionObserver ausgelöst: Wenn eine Sektion in den sichtbaren Bereich scrollt, startet die konfigurierte Animation (Fade-In, Slide-Left, Zoom, Counter). Parallax-Effekte verschieben Hintergrundbilder langsamer als den Vordergrund, was Tiefenwirkung erzeugt.

Die Extension liefert ein Set von vordefinierten Animationen mit. Custom Animationen lassen sich über CSS-Klassen ergänzen, die im Backend als Animationstyp auswählbar sind. Die JavaScript-Basis ist minimal: kein Framework, nur native IntersectionObserver und requestAnimationFrame. Das hält die Bundle-Grösse unter 20 KB.

Für die Performance ist entscheidend, dass Bilder lazy geladen werden. Ein Scrollytelling-Bericht mit 15 Sektionen und je einem hochauflösenden Bild erzeugt ohne Lazy Loading 30 bis 50 MB an Requests. Mit Lazy Loading lädt der Browser nur die sichtbare und die nächste Sektion.

Common problems involve mobile Performance und die Barrierefreiheit

Das grösste Problem bei Scrollytelling auf Mobilgeräten ist die Performance. Parallax-Effekte, die auf Desktop flüssig laufen, ruckeln auf älteren Smartphones. Der Grund: Mobile Browser rendern Scroll-Events anders als Desktop-Browser und drosseln requestAnimationFrame im Hintergrund. Die Lösung: Parallax auf mobilen Viewports deaktivieren und durch einfache Fade-In-Animationen ersetzen. Die Extension sollte über TypoScript konfigurierbar sein, welche Animationen auf welchen Breakpoints aktiv sind.

Zweites Problem: Barrierefreiheit (WCAG 2.1). Scroll-gesteuerte Animationen sind für Nutzer mit vestibulären Störungen (Schwindel, Übelkeit bei Bewegung) problematisch. CSS prefers-reduced-motion muss respektiert werden. Die Extension sollte bei aktivierter Reduce-Motion-Einstellung alle Animationen deaktivieren und die Inhalte als statische Blöcke anzeigen. Nicht alle Storytelling-Extensions implementieren das korrekt.

Drittes Thema: SEO. Google kann JavaScript-basierte Animationen crawlen, aber der Inhalt muss auch ohne JavaScript zugänglich sein. Die Sektionen müssen als reguläre HTML-Blöcke gerendert werden, nicht als leere Container, die erst per JavaScript befüllt werden. Die Extension sollte Progressive Enhancement verfolgen: Erst der Inhalt, dann die Animation.

TYPO3 v12 wird unterstützt, v13 requires ein Update der Content-Element-Registrierung

Scrollytelling-Extensions für TYPO3 gibt es in verschiedenen Varianten von verschiedenen Anbietern. Die Kompatibilität mit v12 ist bei aktiv gepflegten Extensions gegeben. Für v13 ist ein Update der Content-Element-Registrierung (NewContentElementWizard) und der TCA-Konfiguration nötig, weil v13 die FlexForm-basierte Content-Element-Konfiguration angepasst hat. Gosign setzt bei neuen Scrollytelling-Projekten auf eine Architektur, die die Animationslogik als eigenständiges JavaScript-Modul von der TYPO3-Integration trennt, um bei zukünftigen Upgrades nur die TYPO3-Schicht anpassen zu müssen.