Guide
What is scrollytelling? How to make a scroll-driven story
Scrollytelling — scroll plus storytelling — is a way of telling a story on the web where scrolling drives the visuals. As the reader moves down the page, a pinned image changes, a video plays forward, a map flies to the next place or a chart draws itself, always in step with the text. Newsrooms made it famous; today anyone can make one without writing code.
Last updated:
What is scrollytelling?
In a scrollytelling story the screen is a stage. Text arrives in short cards while the visual behind it stays in place and changes at the right moment. The reader never clicks a “next” button: their scroll is the timeline, so they can slow down, go back and read at their own pace.
- Scrolling is the only control the reader needs.
- Visuals stay pinned while short text cards pass over them.
- Each step of the text triggers a change: a new image, a map location, a video frame or a highlighted number.
- It works on phones, tablets and desktops, and in any language, including right-to-left ones such as Arabic.
Scrollytelling vs. a slideshow or a video
Scrollytelling sits between an article, a slideshow and a video. The differences explain why readers stay with it.
| Aspect | Slideshow or video | Scrollytelling |
|---|---|---|
| Control | Click or press play, then watch | The reader’s scroll moves the story forward and back |
| Reading | Captions or narration | Full text, readable at the reader’s pace |
| Accessibility | Hard to search, skim or read with a screen reader | Real web text: searchable, skimmable and screen-reader friendly |
| Search engines | Little indexable text | Every chapter is indexable HTML |
| Data and maps | Flattened into images | Live charts and maps that respond to the story |
Scrollytelling techniques
Sticky backgrounds
A full-screen photo, video or color stays pinned while the chapter’s text cards scroll over it — the classic scrollytelling layout.
Scroll frames
A series of images crossfades as each text card reaches the middle of the screen, turning before-and-after photos or a sequence of moments into one continuous scene.
Scroll-scrubbed video
Instead of playing on its own, a background video moves forward and backward exactly with the scroll, so the reader controls time.
Map fly-tos
A pinned map moves from place to place as the story reaches each location, highlighting the marker that the text is talking about.
Pan and zoom
One large image — a painting, a diagram or a satellite view — is explored by moving the camera from detail to detail.
Animated charts and numbers
Bar, line and donut charts draw themselves and key figures count up as they scroll into view, so the data lands with the sentence that explains it.
Scroll-linked animation
Lottie animations can play when they come into view or follow the scroll position frame by frame.
Navigation aids
A reading progress bar and a chapter menu that highlights the current chapter help readers know where they are in a long story.
How to make a scrollytelling story without code
- 1
Write the script in chapters
Split the story into chapters and, inside each one, into short beats of one to three sentences. Each beat is a moment where the visual can change.
- 2
Choose a visual for every beat
Decide what the reader should see at each beat: a photo, a video moment, a place on a map, a number or a chart.
- 3
Create one section per chapter
In StoryFlowBuilder, add a section for each chapter and give it a sticky background: an image, a video or a map.
- 4
Add text cards and link the changes
Place a text card for each beat. Link scroll frames, map markers or chart reveals to their cards so the visual changes exactly when the card reaches the middle of the screen.
- 5
Add rhythm and navigation
Use entrance animations sparingly, then add a chapter menu, a reading progress bar and a scroll cue so readers can find their way.
- 6
Check phones and reduced motion
Preview desktop, tablet and mobile, adjust positions for small screens and make sure the story still reads well for people who turn off motion.
- 7
Publish or export
Publish the story on its own StoryFlowBuilder page or export a self-contained HTML5 package to host on your own website.
Make scrollytelling with StoryFlowBuilder
StoryFlowBuilder is a no-code scrollytelling editor that runs in the browser. Sticky backgrounds, scroll frames, scroll-scrubbed video, map backgrounds that fly between markers, animated charts, Lottie, chapter menus and progress bars are all settings in a panel — no code, no plugins. Stories work on every screen size, support Arabic and other right-to-left languages, and can be published online or exported as standard web files.
See all StoryFlowBuilder features →Who uses scrollytelling?
Journalists use scrollytelling for investigations, elections and climate stories; NGOs and researchers for reports that need evidence; universities and museums for guided explanations and virtual exhibitions; and brands for product launches and annual reports that people actually finish reading.
Learn more about StoryFlowBuilder →