You've seen scrollytelling done well: a classic Apple product page where the device builds itself as you scroll, or a newsroom feature where the photography blends into typography. You’ve decided you want to build something like that, so you searched "scrollytelling tools" and got a mix of vendor pages and some very technical coding tutorials. Not very helpful.
Not sure what scrollytelling is yet? Start here first.
Rest assured, there are plenty of tools for scrollytelling that also include various other capabilities regarding interactive content and publishing content online. The most important ones to look at are Maglr, Shorthand, Ceros, Foleon, Vev, Readymag, Genially, and Flourish. We’ll say honestly: there's no single best one as they're built for different jobs. Though to help you on your journey, we've sorted them by what you want to make.
Before jumping in, take into consideration the following questions to narrow your goals down further:
What are you making? A one-off immersive feature story, a multi-part brand campaign, a recurring newsletter, data-heavy report, and the list goes on. You need decide what elements make up your content to know what to look for.
How technical is your team? Perhaps you’re a solo-designer with a background in coding, or you have a full team of developer on hand. Either way, having some technical capacity (or not) decides which tool works best for you or opens up new options.
How often will you publish? Is this a one-off piece or something ongoing? This could impact pricing and tool choice in whether it facilitates ongoing design.
Is your content visual-narrative or data-driven? A story carried by design is a different job from one carried by (mostly) interactive data. The option for data visualization might push you toward a different tool.
The questions above can help you look for the right features in the tools below. We’ve divided these scrollytelling tools by their format to make your search easier.
Best tools for editorial feature stories
For immersive editorial features, Shorthand and Maglr are the two leading tools. Which one’s right for you comes down to whether you need design flexibility or speed.
Shorthand is the fastest way to a polished feature. It works from a library of ready-made section types , so a writer or editor can build a sleek story without a designer involved. News moves fast, and convenience wins in this case, which is the exact reason that organizations like the BBC and NBC News have used it before. That “templated” approach provides speed and reliability, but can be a trade off if you’re looking for creative originality. Its intuitive drag and drop editor allows for a degree of customization, but not much without the boundaries of the secetions you have chosen.
Best for: fast, polished long-form features where speed matters more than a custom look.
Maglr is the pixel-precise option for custom editorial features. You work on a freeform canvas, placing elements anywhere and placing grid sections wherever you want structure. You can effectively choose which mode you wish to work in on one page. Scroll-based animations can be fully optimized, so the page moves and responds as the reader scrolls. They have a track record with organizations like Al Jazeera and PolskaPress. As is the other way around with Shorthand, a blank canvas that gives full freedom can also make for a steeper learning curve without design experience.
Best for: custom features where you want exact control over the design and the freedom to combine layout and motion your own way.
Readymag is a canvas-based tool with a strong reputation for typography. Similarly to Maglr, you work from a freeform canvas, and it’s particularly known for its fine control over fonts and spacing. The main reason it’s included here is that it fits the solo designer or small studio best: pricing is accessible and the platform leans toward one-off publishing rather than ongoing production with a larger team. Readymag keeps adding general website-building features, so its focus is drifting away from pure editorial work, which might be important to know before choosing.
Best for: a one-off, design-led story from a solo designer or small studio.
The short version: Shorthand for speed and pre-made sections; Maglr for full design control and the freedom to build a custom feature; Readymag for a one-off where there might be a typography focus.
Best tools for brand campaigns, microsites, and marketing pages
Scrollytelling for marketing has one job: to hold attention long enough to land a message and convert. Things like product launch pages or an event microsite rely on polish and shipping speed.
Ceros is built for custom single-page campaigns and marketing assets with conversion as a focus. A design team can work a freeform canvas (Studio) or choose to work with a grid (Flex). Recently, AI has been added to act as a design assistant. Red Bull and United Airlines are examples of organizations that publish brand experiences made in Ceros. Everything Ceros makes is a single-page experience, which fits campaign work. That freedom comes at a price: it’s important to note that it’s priced at the higher end for tools in this space.
Best for: bespoke single-page marketing campaigns and assets, with a design team and the budget to match.
Maglr is most versatile across asset sizes and publishing routes. Similarly to Ceros, both freeform and grid options are available. You can build anything from a small embeddable asset to a full multi-page experience on one canvas, then publish it at its own URL or embed it into an existing site. BMW and Renault have both published campaign work made in Maglr. Should you want multi-page publications and more accessible pricing, then Maglr is Ceros’s best alternative.
Best for: custom, animated campaign pieces, standalone or embedded, that a marketer and designer can build and publish themselves.
Vev is a flexible content layer that connects to your CMS. Campaign pages and sponsored content publish straight into your existing site setup, which is a huge plus if you want content to seamlessly blend into your current website. This is yet again a freeform editor on an infinite canvas that takes its inspiration from Figma. It can handle anything from a small embedded asset to a full multi-page build. The platform’s more on the technical side, and Vev itself also aims at developers, as they’re able to get more out of it, for example, through custom React components and manually editing code.
Best for: teams that want scroll-driven content plugged into their CMS, with room to extend further when developer capacity is available.
Framer is a design-first website builder. Traditional website builders can feel a little clunky, but Framer has nailed a designer-friendly setup that enables more than a standard layout. A design team can go from blank page to published site at speed without needing development. However, it IS a website, which means it comes with the content system and upkeep that implies, rather than a self-contained piece you publish and leave alone. However, that can be to your benefit if you need features that belong more in website building (such as conditional logic).
Best for: design teams building an ongoing marketing site rather than a one-off campaign piece.
The short version: Ceros for high-end campaigns with a design team and budget to match; Maglr for creative freedom across formats, built and published by a small team; Vev for CMS-connected work a developer can extend; Framer when you need an ongoing website.
Best tools for reports, magazines, and corporate publications
Some content is produced on a schedule. For example, annual reports, internal magazines or newsletters. Usually it’s people from various roles within the organization that contribute to the same publication. This warrants features like custom templates, user rights, brand kits, and the overall flow of reviewing, editing, and publishing with a team.
Maglr is built for ongoing publishing with custom template creation including brand styles. A designer sets up the layout, structure, and animations, and that becomes a template colleagues build new issues from. The publishing flow is part of the platform: previews and review rounds move each issue from draft to live, and publishing itself is unlimited. The navigation is automatically baked in, so just add the pages you need and you’re done.
Best for: recurring, multi-page publications by a mixed team
Foleon provides a basic drag-and-drop editor and emphasizes governance. The platform is template-driven and includes brand kits and approval workflows built for large organizations where staying on-brand across hundreds of documents matters more than design range. Examples of clients include Helvetia and Pinsent Masons. Foleon’s pricing model places it at the large-organization end.
Best for: large or regulated organizations where brand governance outweighs design flexibility.
Ceros and Shorthand both fit a shorter corporate documents and the split between them is design ambition versus cost. Ceros is the freeform, high-end option for completely bespoke design. Shorthand is more accessible and more templated which means faster to produce and lighter on budget. However, both share the same boundary in that the result is single-page documents. While multi-page publications are technically possible, it requires set up of a custom navigation, hence both tools stand lower on the list for this category. Shorthand's multi-page capability is currently in beta and aimed at mini-sites and content hubs rather than corporate documents.
Best for: a shorter, single-page publication. Ceros when custom design matters, Shorthand for convenience and speed.
The short version: Maglr when design range and flexibility matters; Foleon when governance stands above everything else. Ceros and Shorthand could fit depending on if you’re ok with a single-page document or building custom navigation. Browse the gallery to see what these look like built.
Best tools for interactive infographics and embedded content
Sometimes you need just a little extra flair added to your existing page rather than a full scrollytelling build, such as an interactive infographic dropped into an article or a chart that animates as you scroll past it. Scrollytelling works for any scrollable element, big or small. Four tools handle smaller assets well.
Genially is the go-to for a quiz or a game. It's built for interactive, gamified learning content, so it includes logic like branching based on what the reader clicks and even syncing learner scores to an LMS over SCORM or LTI. If your interactive content resembles to an interactive learning experience, this would be a good starting point.
Best for: interactive infographics with a quiz or gamified element.
Three tools compete closely here: Ceros, Maglr, and Vev. All three let you build a smaller interactive asset to embed in your own site, though the differences are in how it embeds. Ceros still outputs through an iframe, which works but sits awkwardly now that web components are an option. Maglr outputs a native web component rather than an iframe, and lets you resize the canvas to whatever the asset needs, so it loads as part of the page and helps performance and SEO. A Vev asset can ship as a React component, handy if your site is built in React or you want developers to extend the piece further.
Best for: custom-sized assets (Maglr and Ceros) or flexibility to extend and alter in code (Vev)
The short version: Genially for quizes and game-like assets; Maglr and Ceros for a custom-sized asset, Maglr embedding natively and Ceros through an iframe; Vev when you want to extend it in code.
Best tools for data visualisation
For some stories, data is the story itself (or at least the main carrier). Think of charts that unfold as you scroll or data visualizations that change on click. Most tools mentioned so far can show a basic chart, but they might be too limited if your data is complex and you need functionalities like sorting and filtering.
Flourish is primarily a data-visualization tool, with scroll-driven animation layered on top. An analyst can produce animated charts and scroll-driven data stories without writing code. It leans heavier on data visualization than on editorial layout, so it can feel limiting if your piece also carries large bodies of text. Additionally, scroll-driven storytelling functionalities come with the paid tier rather than the free plan. However, for a data storytelling piece, it's the most direct route.
Best for: data-led stories where the charts carry the narrative.
Combine Flourish with one of the storytelling tools above. If you find Flourish’s editorial side lacking, you could opt to build the narrative in a tool like Maglr or Shorthand and embed a Flourish chart inside it. The trade-off is running two tools instead of one, but Flourish's free tier is generous enough that this often costs nothing extra.
Best for: text-rich stories that also need complex, interactive data visualizations.
Best tools if you're going fully custom
If you don’t mind a challenge, custom code gives you total control over your story. Where you’d need a developer before, AI has paved the way for vibe coding among designers and even marketers.
If you’re serious about a custom build, consider the following coding libraries to create that scrollytelling feeling:
- Scrollama is lightweight and the one that The Pudding leans on for its scroll-driven pieces.
- GSAP is an animation toolkit owned by Webflow (a well-known website builder), but free for commercial use.
- D3 is the standard for bespoke data visualizations and runs on JavaScript.
- Three.js is the go-to if you want highly immersive 3D components.
While a custom approach provides unlimited control, you also take on everything a publishing platform would have handled, such as hosting, analytics, and ongoing maintenance.
Best for: teams with development capacity who want total control and don’t mind extra maintenance.
Scrollytelling tools compared by what they're best for, output size, and price
