Scroll Animation Generator
Make elements fade, slide, zoom or wipe in as visitors scroll — with modern CSS scroll-driven animations, a tiny fallback for browsers that lack them, and respect for people who prefer less motion.
At a glance
- 14 reveal effects — fades in four directions, slide, zoom, blur, flips, rotate and three wipes — plus parallax, a reading progress bar and a shrinking header.
- Uses CSS scroll-driven animations (
animation-timeline: view()andscroll()withanimation-range), which run in Chrome and Edge 115+ and Safari 26+ without JavaScript. - Firefox only has scroll-driven animations in test builds so far, so an optional script of about 20 lines takes over there — IntersectionObserver for reveals, a scroll listener for the rest — and stops at once where CSS can do the job.
- Or choose Plays once in view: a short transition when each element appears, with a delay, a stagger for elements that appear together, and an option to replay.
- Every motion is wrapped in
prefers-reduced-motion: no-preference, and elements are only hidden when something will reveal them, so content never disappears. - The generated CSS was checked with Lightning CSS, and the fallback scripts were run in tests; copy the CSS, the script, the HTML or a complete demo page.
Step by step
How to animate elements on scroll with CSS
- 1
Choose what to animate
Reveal elements as they scroll in, add Parallax, a Progress bar or a Shrinking header.
- 2
Pick an effect
Choose fade up, zoom, blur, a wipe or another effect, and adjust its distance, size, blur or angle.
- 3
Choose how it plays
Follows the scroll ties the animation to the scroll position; Plays once in view runs it once, with a duration, delay and stagger.
- 4
Watch the preview
Scroll inside the preview box, or press Replay. Change the range until it starts and finishes where you want.
- 5
Add it to your page
Copy the CSS, put the HTML tab’s head line in your <head>, add the class to your elements, and include the JavaScript if there is one.
Features
Everything you need, nothing you don’t
Modern CSS first
Scroll-driven animations follow the scroll position on the compositor, with no scroll listeners. The tool writes them with the correct order of animation and animation-timeline, which the shorthand otherwise resets.
Works everywhere
The fallback script switches itself on only in browsers that need it, and the line for the page head stops elements from flashing before it runs.
See it while you tweak it
Scroll the preview box to watch the effect. Browsers without scroll-driven animations see the fallback, just as your visitors would.
Exact control
Pick when the animation runs — while the element comes into view, until it reaches the middle, or the whole time it is on screen — or set the range by hand, and read it back in plain words.
Kind to everyone
People who ask their system to reduce motion see no movement, and nothing stays invisible if a script fails or is blocked.
No library
No AOS, GSAP or other dependency: plain CSS and, where needed, a few lines of JavaScript you can read.
What scroll-driven animations are
A normal CSS animation runs over time. A scroll-driven animation runs over a scroll distance instead: animation-timeline: view() ties it to the element’s journey through the screen, and animation-timeline: scroll() ties it to how far the whole page has scrolled. Scroll down and the animation moves forward; scroll back up and it moves back.
animation-range says which part of that journey the animation covers. entry 0% cover 40% starts as the element’s top edge appears at the bottom of the screen and finishes when it is 40% of the way through its time on screen.
The range names
| Range | Covers the time when the element… |
|---|---|
entry | comes into view at the bottom of the screen |
exit | leaves at the top of the screen |
cover | is at least partly on screen, from first to last pixel |
contain | is completely on screen (or fills it, if it is taller than the screen) |
entry-crossing | crosses the bottom edge of the screen |
exit-crossing | crosses the top edge of the screen |
Browser support
Figures from MDN’s browser compatibility data, October 2026.
| Browser | Scroll-driven animations | What the generated code does |
|---|---|---|
| Chrome and Edge | since version 115 | runs the CSS |
| Safari (macOS and iOS) | since version 26 | runs the CSS |
| Firefox | test builds only | runs the fallback script |
| Older browsers | no | runs the fallback script, or shows content without animation |
FAQ
Frequently asked questions
Do scroll animations need JavaScript?
animation-timeline does it in CSS. Firefox only has it in test builds, so the tool adds a short optional script that does the same job there. Plays once in view always uses a small script, because only Chrome 146 and later can start an animation on scroll with CSS alone (animation-trigger).Why must animation-timeline come after the animation shorthand?
animation shorthand resets every animation property it does not mention, including animation-timeline. Written before the shorthand, the timeline would be thrown away and the animation would run on the clock instead. The generated CSS always puts it after.How do I make elements fade in on scroll?
class="reveal" to the elements. For a scroll-linked version that is all you need in Chrome, Edge and Safari; add the script and the head line for other browsers.Is this an alternative to AOS (Animate On Scroll)?
What happens for people who prefer reduced motion?
@media (prefers-reduced-motion: no-preference), so people who have asked their device to reduce motion see the content straight away with no animation. The reading progress bar still works, because it shows information rather than decoration.Will hidden elements stay invisible if the script fails?
Can I animate several elements one after another?
Are my settings saved?
Keep going
Related tools
Bento Grid Generator
Free bento grid generator: draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.
CSS Glassmorphism Generator
Free glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live, and copy CSS, Tailwind or React code.
CSS Neumorphism Generator
Free neumorphism generator: soft UI box-shadows from any colour and light angle, with contrast checks, pressed states, Tailwind classes and a UI kit.
CSS to Tailwind Converter
Convert CSS to Tailwind classes online: hover, media queries, dark mode and gradients become variants, colours match the palette. Tailwind v4 and v3, free.
Image Compressor
Compress JPG, PNG, WebP and AVIF images online for free. Shrink photos by up to 90% or hit an exact KB target — right in your browser, with no upload.
Word Counter
Free online word counter: count words, characters, sentences and paragraphs as you type, with reading time, keyword density, readability and limits.
Last updated Report a problem or suggest a feature