Scroll animations

← All tools

CSS scroll-driven animations: fade/slide reveals with view(), progress bars with scroll(), and parallax presets — plus fallback snippets when the browser lacks support.

~~~

This browser supports scroll-driven CSS animations — the live demo uses native timelines.

Scroll-driven CSS is limited here — output still includes @supports fallbacks and optional JS.

Preset

Controls

Live scroll demo

Fade up on scroll
Slide in on scroll
Parallax layer

Scroll inside the box to preview the effect.

~~~

CSS output

Fallback JS (optional)
Scroll-driven animations tie keyframes to scroll position instead of time. Support is growing in Chromium and Safari — always ship a fallback for Firefox and older browsers.
~~~
About this tool
animation-timeline: view() runs animations as elements enter the viewport. scroll() links animation progress to a scroll container — ideal for progress indicators and parallax layers without JavaScript scroll listeners.
Current Chromium, Safari, and Firefox releases support scroll-driven animations, but older browsers may still need the generated @supports guard or optional Intersection Observer fallback. Always ship a prefers-reduced-motion guard so users who disable motion are not forced through parallax. Scroll-driven animations replace scroll listeners; they do not remove the need for accessible focus states.
~~~
Read more
~~~
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →