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 →