Scroll-Driven Animations: Triggering CSS Animations on Scroll

Scroll Animations Without JavaScript

The CSS Scroll-Driven Animations specification introduces two new animation timelines: scroll() (linked to scroll position) and view() (linked to element visibility). These replace JavaScript scroll listeners for common patterns like progress bars, parallax effects, and reveal animations.

Scroll Progress Timeline

.progress-bar {
  animation: fill-bar linear;
  animation-timeline: scroll();
}

@keyframes fill-bar {
  from { width: 0%; }
  to { width: 100%; }
}

The animation progresses from 0% to 100% as the user scrolls from top to bottom. No JavaScript, no IntersectionObserver, no scroll event handlers.

View Progress Timeline

The view() timeline triggers based on an element's visibility in the viewport:

.fade-in {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes appear {
  from { opacity: 0; transform: translateY(2rem); }
  to { opacity: 1; transform: translateY(0); }
}

Animation Range

Browser Support

Scroll-driven animations are supported in Chrome 115+ and Edge 115+. Firefox and Safari support is in progress. Use @supports (animation-timeline: scroll()) for progressive enhancement — the animation simply will not play in unsupported browsers, which is a graceful degradation.