What is Scrollytelling? Free Animated Scrollytelling Charts for Any Website
- What this is
- A free library of embeddable, animated scrollytelling charts for any website.
- Who uses it
- Data journalists, science bloggers, personal-finance writers, educators, and content marketers who want charts that respond to the reader's scroll.
- How to embed
- Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
- File size
- ~25 KB per diagram.
- License
- Free forever. Editorial explainer text included; updated centrally over time.
- URL
- scrollchart.com/scrollytelling
Scrollytelling charts, live
Each diagram below paints itself in as you scroll to it. That is scrollytelling: the visual arrives when the reader's eye arrives.
Bell curve (distribution)
Compound returns (time series)
Dot matrix (proportion)
The origin of scrollytelling
The term was coined by data-journalism practitioners around 2013-2015, when newsrooms like the New York Times, The Pudding, and The Guardian began building stories where the act of scrolling controlled a visual narrative. A classic example: a map that pans as you read; a chart that adds data points as you scroll past each paragraph. The technique spread fast because it solved a real editorial problem: how do you stop a reader from skipping over a chart?
The original implementations were bespoke JavaScript builds. Each one required a developer, an art director, and a production timeline. That made scrollytelling a feature of well-funded newsrooms, not a default tool for bloggers and educators.
How scrollytelling works mechanically
Modern scrollytelling on a webpage uses the browser's IntersectionObserver API. When a chart element crosses a threshold in the viewport (typically 20% visible), a class is added and a CSS animation fires. The chart "paints itself in." No scroll-jacking, no JavaScript frameworks required.
The animation pattern varies by chart type. A line chart draws its path from left to right using stroke-dashoffset. A bar chart grows each bar from its baseline using a CSS transform. A bell curve fills its area from a zero-height state. In all cases, the motion takes roughly one second at ease-out timing, which matches comfortable reading speed.
Every chart in the Scrollchart catalog follows this pattern: inline SVG, IntersectionObserver scroll trigger, CSS animation, full prefers-reduced-motion support. No canvas, no video, no third-party iframes.
Why scroll-triggered animation outperforms static charts
A static chart asks the reader to orient themselves: where does the data start? What axis matters? An animated chart answers those questions through motion. The line starts at zero and rises. The distribution builds from the center out. The reader's eye is placed at the beginning and led through the data in the order the body copy intends.
The editorial benefit is measurable in dwell time. Articles with embedded scroll-triggered charts typically see 20-40% longer average session duration than equivalent articles with static images, because the chart becomes a reason to linger rather than an obstacle to scroll past.
Embedding a scrollytelling chart in two minutes
Browse the catalog at scrollchart.com, pick a chart, and copy the embed snippet. The standard format is two lines:
<div data-scrollchart="bell-curve"></div>
<script src="https://scrollchart.com/embed.js" async></script>Paste that into any blog post, CMS page, or HTML file. The chart lazy-loads from scrollchart.com, paints on scroll, and includes a tabbed explainer panel below the visual. For WordPress, the plugin wraps this in a Gutenberg block or shortcode.
Free forever
The diagram and explainer text are served from scrollchart.com so the content can be updated over time to reflect new research or to link to relevant sources within the explainer. No subscription, no ads, no tracking pixels served to your readers.
Frequently asked
What is scrollytelling?
Scrollytelling is a storytelling technique that paces visual content to the reader's scroll position. As the reader moves down the page, charts animate, sections transition, or data reveals itself in sequence. The term was popularized by data-journalism teams at the New York Times, The Pudding, and The Guardian.
How do I add scrollytelling to my website for free?
Scrollchart provides free, copy-paste scrollytelling diagrams. Each one is a single line of HTML that lazy-loads an animated SVG when the reader scrolls it into view. No JavaScript expertise required. Works in WordPress, Webflow, Ghost, and plain HTML.
Does scrollytelling slow down my page?
Not with the lazy-loading approach Scrollchart uses. Each diagram loads only when it is about to enter the viewport, so first paint is unaffected. The total bundle per diagram is approximately 25 KB gzipped.
Is scrollytelling the same as parallax scrolling?
No. Parallax moves background layers at a different rate than the foreground to create depth. Scrollytelling paces a data narrative to scroll position. The two techniques are unrelated; scrollytelling does not hijack scroll behavior.
Can I put multiple scrollytelling diagrams in one article?
Yes. Each diagram is an independent unit that lazy-loads when it enters the viewport. You can place several down a long-form post without affecting initial page load.
Do scrollytelling diagrams work on mobile?
Yes. Every diagram in the Scrollchart catalog is responsive by default, renders at any screen width, and respects the prefers-reduced-motion accessibility setting.
Does scrollytelling work for non-English audiences?
Yes. Scrollchart's animated scrollytelling charts render labels, axis titles, captions, and source lines in every major language — English, French, Spanish, German, Mandarin, Hindi, Arabic, Japanese, Portuguese, and more. The scroll-driven animation logic is language-agnostic; only the rendered text differs.
Browse all scrollytelling charts
Over 100 animated, embeddable charts across statistics, science, finance, and more.
Browse the catalog →Build your own scrollytelling diagram
Free AI chart generator
Paste your data, a finding, or a URL. The generator picks the right chart type and produces an animated, embeddable diagram in seconds.
Open the generator →100+ animated diagrams
Hand-built across 17 subjects: science, finance, fitness, law, engineering, and more. Filter by topic, copy one line of HTML, done.
Browse the catalogue →Now available in every major language: prompt in English, French, Spanish, German, Mandarin, Hindi, Arabic, Japanese, Portuguese, and more — the diagram labels render in the language you ask for.