Scroll animations

CSS scroll-driven animations: fade/slide reveals withview(), progress bars withscroll(), 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

Duration (s)

Distance (px)

Easing (fallback)

CSS class prefix

Include prefers-reduced-motion guard

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 aprefers-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.

~~~