Scroll Animation

scroll-driven animations with animation-range, view() and scroll() timelines

↓ scroll down

Slide Up

Animated with scroll-driven CSS

0%

About this tool

What is a scroll-driven CSS animation?
A CSS animation that's tied to the scroll position of the page rather than playing on a timer. As the user scrolls, elements fade in, slide, or scale — without any JavaScript.
What browser support does scroll-driven animation have?
Chrome 115+, Edge 115+, Opera 101+. Firefox and Safari support is limited as of 2025 — the generator adds a @supports check and a fallback for unsupported browsers.
What animation effects can I generate?
Fade in, slide up/down/left/right, scale in, rotate in, and blur in. Each has configurable duration, delay, and easing.
Can I preview the animation in the tool?
Yes. A live preview shows the animation triggered by scrolling within the tool's preview area before you copy the CSS.
About

Scroll inside the preview frame to drive the animation. Output uses the modern CSS Scroll-Driven Animations spec (Chromium 115+, behind flag in Firefox).

view() ties progress to the element entering/leaving the viewport; scroll() ties it to the scroll container itself.