15 engaging scrollytelling examples to inspire your content
When was the last time you scrolled through content on the web and thought, “WOW”?
If it’s been a while, you’re not alone. A lot of content on the web today is generic and visually underwhelming. Of course, that isn’t because publishers lack the creativity or desire to build impressive visual stories — it’s because most creators are hampered by limited resources and budgets.
Immersive content platforms are changing that. Now, the design techniques used in immersive and interactive content — such as scrollytelling — are available to anyone. This has led to some outstanding web content, with techniques and approaches you can borrow (or, with apologies to T.S. Eliot, steal).
Read on for a deeper dive into scrollytelling. We talk about how you can use it to build seriously impressive digital content and share 15 great examples of this technology.
What do the BBC, Tripadvisor, and Penguin have in common?
They craft stunning, interactive web content with Shorthand. And so can you! Start creating for free — no code or web design skills required.
Sign up now.
What is
scrollytelling?
“Scrollytelling” (scroll + storytelling) is when elements on a webpage appear, move, disappear, or otherwise change as the user scrolls the page.
Scrollytelling is used to make web content more interactive and immersive by enhancing written text with multimedia like audio, video, and animation. Scrollytelling can enhance anything from a photo essay, infographic, and longform story to an investigative report or content marketing.
Using the scrolling motion to trigger dynamic multimedia elements offers a perfect confluence between basic, text-heavy stories and more complex interactive content. It allows creators to use more compelling and varied content types while maintaining an easy-to-navigate user experience — even for those unfamiliar with the format.
The New York Times published one of the first examples of scrollytelling with "Snow Fall: The Avalanche at Tunnel Creek". The in-depth report uses animated satellite and radar imagery and compelling audio testimony to translate a video documentary onto the page. In 2012, that kind of dynamic scrollytelling required NYT-level resources (including software engineers, graphic designers, writers, and data journalists, among others) and it took time.
Today, scrollytelling is much more accessible. Now, you can level up your visual stories with scrollytelling in a matter of hours — without CSS, Javascript, or a 10-person team.
How to build
scrollytelling
stories for yourself
If you’re excited and ready to dive into scrollytelling, there are a tonne of tools out there to help, and they go well beyond traditional CMS and web builders like Wordpress and Webflow.
Most fall into one of three categories:
- developer tools,
- web designer platforms, or
- immersive content platforms.
Developer tools are designed for developers and enable you to build totally bespoke web content from the ground up. However, if you aren’t adept with code (and neither is anyone on your team) these can be a no-go.
Web designer platforms are built for graphic and web designers. They typically don’t require designers to write code or work directly with a developer but can still be complex and intimidating apps for non-designers.
Immersive content platforms (like Shorthand) are built for content teams and publishers — teams made up primarily of writers and editors. The no-code platform allows you to drag-and-drop dynamic, interactive elements and build stunning digital stories and other forms of web content without any coding or design expertise. If you do have developers and designers on your team, digital storytelling platforms allow you to move faster and reserve specialised bandwidth for tougher assignments.
Create scrollytelling content with Shorthand.
Build stunning scrollytelling content at scale — no code or web design skills required.
Get started.
15 of our favourite
scrollytelling examples
Looking for inspiration for your own scrollytelling project? The 15 scrollytelling examples below are our absolute favourites. They represent a cross-section of topics, formats, and goals, so you can get a sense of what’s possible with a powerful digital storytelling platform like Shorthand.
1. Sydney Opera House at rest
What it is: a photo essay on the Sydney Opera House during the early days of the COVID-19.
Who created it: Sydney Opera House.
Why we picked this example
The large, high-quality photos are at the core of this photo essay about a place, once full of life, that has become vacant due to COVID-19 pandemic lockdowns. The story largely lets the haunting images speak for themselves. But a clever use of scrollytelling, enables the creators to walk the audience through a clear narrative, without the need for a tonne of writing.
2. The tale of two pandemics: COVID-19, Auckland and the Delta variant
What it is: a report on the impact of the ongoing COVID-19 pandemic in Auckland, NZ.
Who created it: Stuff.
Why we picked this example
This report from Stuff uses scrollytelling in a number of ways, but we love the timeline scrolling effect throughout the meat of the report most of all. The date and “days in lockdown” counters increase as readers scroll through. To the right of those, a dynamic graph charts COVID-19 case counts and brilliantly illustrates the divergence between Auckland and the rest of the nation.
3. The lost tablet and the secret documents
What it is: an investigative report on a secretive Russian mercenary group.
Who created it: BBC.
Why we picked this example
This investigative journalism from the BBC chronicles what they learned from a left-behind military tablet. The piece uses interactive maps and satellite imagery, with scrolling text alongside them — to walk readers through those findings. Scrollytelling enables them to keep these dynamic images front and centre on the screen, while adding written context and highlighting key areas.
4. Built to keep Black from white
What it is: an editorial on the history of segregation in America and its legacy today.
Who created it: NBC News.
Why we picked this example
One of the the best examples of interactive maps, this editorial from NBC News won a webby award for Best Individual Editorial Feature. The story uses scrollytelling to bring several maps to life, including showcasing continued racial segregation over time, from 1930 to 2019. In this piece, the maps really tell the story, so written context is added to the map — keeping the imagery visible to readers at the same time.
5. The road was long: a voice from Ukraine
What it is: a first-hand account of leaving Ukraine after the Russian invasion.
Who created it: Internal Displacement Monitoring Centre (iDMC).
Why we picked this example
In this first-hand account, Kristina tells her story of being displaced from Kharkiv by the Russian invasion of Ukraine. Her words are the focal point here, but the publishers include illustrations to break up the text and bring life to the narrative. The article uses scrollytelling to load those illustrations in turn with text, giving an effect almost like turning the pages of a storybook.
6. Cancerfondsrapporten: Segregerad screening
What it is: a nonprofit report on national cancer screening programs in Sweden.
Who created it: Cancerfonden.
Why we picked this example
While content marketing and journalism lead the way, the growing accessibility of powerful visual storytelling tools means even nonprofit reports are ripe for the scrollytelling treatment. In this example, scrollytelling and approachable, interactive design keep what could be a dull report engaging. The report also uses scrollmation to help visualise data throughout.
7. Wata Na Life: Climate change and community resourcefulness in Sierra Leone
What it is: a visual art project and environmental story.
Who created it: Ngadi Smart for WaterAid and the British Journal of Photography.
Why we picked this example
In this example, scrollytelling allows both the visual art and the written story to shine. Images that load as the user scrolls keep the piece engaging, and scrolling text allows for large, high-impact imagery to take the lead.
8. L'impact du numérique sur les villes de l'Afrique de l'Ouest
What it is: a report on the impact of digital technology in West Africa.
Who created it: EPFL.
Why we picked this example
Here, EPFL uses scrollytelling to add compelling, dynamic data visualisations in a number of different ways, from maps to graphs to workflows. These contextualise the numbers and help readers make quick sense of the data, while making the overall report engaging and interactive.
9. The Coptic miracle: How Egypt's historic Christian church survived and thrived
What it is: a history of the development of Coptic Christianity.
Who created it: Arab News.
Why we picked this example
Another stunning use of an interactive map controlled via scrollytelling, this article from Arab News helps readers visualise the spread of Christianity — and later, Coptic Christianity. It walks readers through the timeline of the narrative step-by-step, while adding written context only where necessary.
10. The people racing to replant Africa
What it is: a feature story on an ambitious environmental project in Africa.
Who created it: Pioneers Post.
Why we picked this example
This feature from Pioneers Post uses scrollytelling in a couple ways. For one, dynamic image effects tell the story in an engaging way. Plus, an interactive scroll-powered map showcases both the scale and location of the Great Green Wall of Africa.
11. Road to nowhere: China's Belt and Road Initiative at a tipping point
What it is: an article on China’s Belt and Road Initiative (BRI).
Who created it: Nikkei.
Why we picked this example
This is another varied example of scrollytelling. The article starts with a dynamic data visualisation of China’s spending in various countries. An interactive map showcases the country’s grand ambitions for the BRI, plus actual projects completed. Plus, throughout the article, scrollytelling images help break up walls of text.
12. La carrera lunática de Musk y Bezos
What it is: a digital article on the new billionaire space race.
Who created it: El Periódico
Why we picked this example
In this digital story from El Periódico, clever interactive design reinforces the tone and angle of the story (read: these billionaires are babies). The publisher combines Illustrations with eye-catching imagery to make the story visually compelling, while adding clarity.
13. Amazon alert: Crime and destruction in the rainforest
What it is: an investigative news report on the destruction of the Amazon rainforest.
Who created it: Sky News.
Why we picked this example
This investigative report uses scrollpoints to highlight key details on the interactive map as you scroll and text overlays to add more context. It showcases environmental fines for respective Brazilian politicians over the years and, below that, offers a masterclass in dynamic data visualisation across a number of crucial charts.
14. When marketing goes haywire: a survival guide for modern marketers
What it is: an actionable guide to help marketers weather crises and uncertain times.
Who created it: Smartsheet for Adweek.
Why we picked this example
There’s a lot to modern marketing. This guide from Smartsheet and Adweek uses imagery and scrollmation keep these actionable survival tips engaging, while adding levity to a serious topic.
15. The dream team: the story behind "the most daring gang in Europe" and the guy smart enough to catch them
What it is: a documentary teaser and preview.
Who created it: Plimsoll.
Why we picked this example
Translating the suspense and vibe of a documentary onto a web page is no easy feat. This teaser from Plimsoll uses a combination of scrollmation, animation, and specific imagery to create the mood of the documentary. All the while, scrollytelling engages readers, even walking through the prototypical investigation board, red string and all.
Built with Shorthand