CSS Scroll-Driven Animations Builder

Generate CSS for the modern scroll-driven animations APIs: animation-timeline: scroll() for progress tied to scroll position, and animation-timeline: view() for progress tied to an element entering and leaving the viewport. Pick the timeline source, axis, animation-range, and watch it run in a sandboxed iframe.

Preset

Scroll progress bar Fade-in on entry (view) Parallax translate Heading underline grow Sticky element rotate Image cover reveal

Timeline type

Axis

scroll() scroller

Which ancestor scroll container drives the animation.

animation-range

start

end

cover = element fully overlaps the viewport. contain = element fully contained. entry/exit = the moment of entering/leaving. *-crossing = the crossing of the opposite edge.

Animated element selector

@keyframes name

@keyframes body

The keyframes drive the animation; scroll progress acts as the playhead.

Wrap the animation in @supports (animation-timeline: scroll())

Preview HTML (inside a scrolling container)

Live preview

Support: Chrome 115+, Edge 115+ (Aug 2023). Safari 26 and Firefox enable behind flags. Wrap in @supports so non-supporting browsers see your fallback styles (e.g. opacity: 1 by default) instead of getting stuck on frame 0.

Generated CSS

scroll() vs view() — which to pick

Use scroll(<axis>, <scroller>) when the timeline should track the page's scroll progress — a top-of-page progress bar, a horizontally-scrolling parallax stage. Use view(<axis>, <inset>) when each instance of the animated element should run as that element moves through the viewport — a "fade up on entry" pattern, sticky-scroll storytelling, sequenced reveals. The animation-range values are different too: scroll() ranges are 0%–100% of scroll, while view() ranges use the cover/contain/entry/exit phases that describe an element's relationship with the viewport.