Animated scrollytelling examples

Scrollytelling is a digital storytelling technique where narrative, visuals, data, and motion unfold as a reader scrolls. Instead of clicking through slides or pages, the story progresses fluidly, helping guide attention, reveal context, and build understanding in a way that feels natural to the web.

Shorthand was purpose-built for scrollytelling and is widely regarded as the leading solution in this space. It’s a simple visual editor for creating web-native stories that combine text, media, and animation — making it possible for anyone to produce immersive longform content without needing to design or engineer a custom scrolling experience from scratch.

Yes. Shorthand enables rich, scroll-driven animations that help bring stories to life — from subtle visual reveals to more complex motion and data-led narratives — all without writing code. These effects are designed to enhance clarity and engagement while remaining intuitive to build and easy to edit.

Shorthand’s general approach to animation is to require only simple static image or data uploads to create its effects, making it accessible to designers and non-designers alike. It supports animated charts through a native Chart section, as well as automated image parallax effects using sophisticated computer vision that detects layers and allows for movement and the insertion of text and media between them. To learn more about Shorthand’s animated section types — Scrollmation, Scrollpoints, Reveal, and Chart — visit our sections page.

Scrollytelling is often created using tools such as data visualisation platforms or JavaScript-based animation approaches. While these can be powerful, they typically require technical setup, manual configuration, and a clear understanding of how to structure and maintain a scrolling experience.

Shorthand offers a more streamlined alternative by bringing scrollytelling into a single visual builder designed specifically for storytellers. It reduces complexity, speeds up production, and makes stories easier to edit and evolve over time — while still delivering the kind of polished, scroll-based experiences audiences expect from high-quality web storytelling.

Shorthand supports a broad mix of media and interactive elements, including images, video, audio, embeds, maps, and animated charts. These elements are combined in ways that respond directly to scroll, allowing content to be revealed progressively and at the reader’s own pace.

Because interaction is scroll-led rather than time-based, stories feel intuitive and accessible. Readers stay in control of how quickly they move through the narrative, while creators can still guide attention and emphasis through thoughtful visual design.

Shorthand gives creators a high level of control over how stories look and behave — from layout and spacing to how content is revealed as readers scroll. Effects such as Reveals and Scrollpoints allow you to shape pacing and emphasis, including controlling the speed and type of transition between frames.

This flexibility makes it possible to match different brand styles and storytelling goals, while still working within a framework that ensures consistency, accessibility, and responsiveness across devices.

Yes. Shorthand stories automatically adapt to desktop, tablet, and mobile screens, ensuring layouts, media, and animations work smoothly wherever they’re viewed. Readers get a cohesive experience whether they’re scrolling on a large monitor or a phone.

This allows teams to focus on storytelling rather than worrying about layouts or technical adjustments, confident that their story will feel considered and intentional across all devices.

Shorthand is built to handle the demands of longform, media-rich storytelling, with optimisations that keep scrolling smooth and load times fast. This is especially important for stories that rely on animation, video, or data-heavy visuals.

It also significantly reduces maintenance effort compared to custom-built solutions using JavaScript and libraries. Shorthand’s team maintains and updates the underlying section code as browsers change, so stories continue to perform reliably over time without requiring ongoing developer involvement.

Shorthand is used by editorial teams, marketers, communications professionals, and brand storytellers across industries including media, higher education, non-profits, government, and enterprise organisations.

Editorial teams use Shorthand for immersive journalism and features, while marketing and communications teams use it for campaigns, brand storytelling, and thought leadership. Communications teams also use Shorthand to make annual reports, impact reports, and other publications more engaging and accessible on the web — transforming traditionally static PDFs into scrollytelling experiences that reach wider audiences.

In all cases, scrollytelling helps transform information into stories that are easier to understand, more engaging to explore, and better suited to the web.