Future CSS: Native scroll animations

Originally published on alexpate.com.

Linking an animation to the user’s scroll position usually means reaching for a chunk of JavaScript. Soon you might not need any.

CSS Scroll-driven Animations are a new proposal for creating animations that are tied to the scroll offset of an element.

How can I use it?

The quickest way to show this is with a demo.

Example

Scroll down

This demo isn't supported in your browser.
Try a Chromium-based browser.

This first demo shows a simple progress bar that scales in width as you scroll down the page. You’ll recognise the @keyframe animation from regular CSS animations, but the magic happens in the animation-timeline and scroll-timeline properties.

For simplicity I’ve stripped out the other styles (colours, layout), but you can find the full demo source on GitHub.

.container {
  timeline-scope: --scale-progress;
}

.scrollContainer {
  scroll-timeline: --scale-progress block;
}

.progress {
  animation: scaleProgress linear;
  animation-timeline: --scale-progress;
  animation-duration: auto;
}

@keyframes scaleProgress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

Three properties are doing the work here.

timeline-scope sets a scope for the animation. Our progress element sits outside the scroll container, so we have to widen the scope manually; if it lived inside the scroll container, we wouldn’t need this property at all.

scroll-timeline links the animation to the element’s scroll position. Here we’re linking to the block axis, so the animation tracks vertical scrolling.

animation-timeline points the animation at the timeline scope we set earlier. It has to sit on the same element as the animation property.

Support. Can you use it today?

When this post was first written, scroll-driven animations were experimental and hidden behind a Chrome flag. As of August 2026 the picture is much better: they’re supported in Chrome and Edge (since 115) and in Safari (since 26, on both macOS and iOS). Firefox is the holdout, with support still limited to Nightly builds behind a flag.

That makes them a good candidate for progressive enhancement today: gate the effect behind @supports (animation-timeline: auto) and let unsupported browsers fall back to a static layout. That’s exactly what the demo above does.

How can I use it?

Example

Support. Can you use it today?

Further reading