Storytelling for TYPO3

Annual reports and product launches need more than text and images

Static pages with long blocks of text work well for documentation and blog posts. Annual reports, product launches and company histories are different: they need a format that carries the visitor through a narrative. Scrollytelling, storytelling driven by the reader’s own scrolling, has established itself as the format that sits between static text and elaborate video production. The TYPO3 Storytelling extension brings parallax scrolling, animated content blocks and scroll-triggered animations straight into the CMS, so nobody has to commission an external service or an agency to hand-code a one-off page for every story.

The advantage over a custom build: editors maintain the content in the TYPO3 backend, reorder blocks and configure animations without pulling in a developer.

Annual reports, product launches and campaign landing pages are the typical use cases

The most prominent use case is the digital annual report. Companies, foundations and NGOs increasingly publish their results as an interactive web story instead of a PDF. A scrollytelling annual report opens with the headline figure (revenue, donation volume, membership), which counts up as the reader scrolls. The second section brings charts that compare the figures with the previous year. In the third, portraits and quotes tell the story behind the numbers. The whole story is a single page that the visitor scrolls through.

A second use case is product presentation in B2B. A machinery manufacturer unveils a new production line. As the visitor scrolls, the 3D rendering of the machine rotates, technical specifications fade in and animations walk through the production process. This is not a video (no loading, no buffering) but a scroll-driven animation that visitors move through at their own pace.

Third use case: campaign landing pages. An aid organization shows the journey of a donation, from the click on the donate button through the choice of project to the report from the destination country. Each scroll section holds a photo, a short text and an animation that visualizes the progress.

The architecture renders sections as scroll-driven content blocks

The extension defines its own content element type, “Storytelling”, which is made up of sections. Each section is a backend record with fields for headline, text, image or video (FAL), background color, animation type and scroll trigger. Editors sort the sections in the backend, and together they form the scroll story.

In the frontend, each section renders as its own viewport-filling block. Animations are triggered through CSS transitions and the IntersectionObserver API: when a section scrolls into view, the configured animation starts (fade-in, slide-left, zoom, counter). Parallax effects move background images more slowly than the foreground, which creates a sense of depth.

The extension ships with a set of predefined animations. Custom animations can be added as CSS classes, which then become selectable as an animation type in the backend. The JavaScript footprint is minimal: no framework, just the native IntersectionObserver and requestAnimationFrame. That keeps the bundle below 20 KB.

Lazy loading of images is decisive for performance. A scrollytelling report with 15 sections and one high-resolution image per section generates 30 to 50 MB of requests without lazy loading. With lazy loading, the browser only fetches the visible section and the next one.

Common problems concern mobile performance and accessibility

The biggest challenge for scrollytelling on mobile devices is performance. Parallax effects that run smoothly on desktop stutter on older smartphones. The reason: mobile browsers handle scroll events differently from desktop browsers and throttle requestAnimationFrame in the background. The fix: disable parallax on mobile viewports and replace it with simple fade-in animations. Which animations are active at which breakpoints should be configurable via TypoScript.

Second problem: accessibility (WCAG 2.1). Scroll-driven animations are a genuine barrier for users with vestibular disorders, who can experience dizziness or nausea from on-screen motion. The CSS prefers-reduced-motion setting has to be respected. When reduced motion is switched on, the extension should turn off all animations and show the content as static blocks. Not every storytelling extension implements this correctly.

Third issue: SEO. Google can crawl JavaScript-based animations, but the content must also be accessible without JavaScript. Sections have to be rendered as regular HTML blocks, not as empty containers that JavaScript fills in later. The extension should follow progressive enhancement: content first, animation second.

TYPO3 v12 is supported, v13 requires an update to the content element registration

Scrollytelling extensions for TYPO3 come in several variants from different vendors. Actively maintained extensions are compatible with v12. For v13, the content element registration (NewContentElementWizard) and the TCA configuration need an update, because v13 fills the new content element wizard from the TCA and only reads FlexForms without the <TCEforms> wrapper. For new scrollytelling projects, Gosign uses an architecture that keeps the animation logic in a standalone JavaScript module, separate from the TYPO3 integration. Future upgrades then only have to touch the TYPO3 layer.