CSS Scroll-Driven Animations Are Now Baseline, No JS Required

CSS Scroll-Driven Animations are now Baseline, supported across Chrome, Firefox, and Safari. This means a whole category of JavaScript animation libraries is now replaceable with a few lines of CSS.

The two types

Scroll Progress Timeline

Link animation progress directly to scroll position:

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-image {
  animation: fade-in linear;
  animation-timeline: scroll();
  animation-range: entry 0% entry 100%;
}

The image fades in as it scrolls into view. No IntersectionObserver. No JavaScript.

View Progress Timeline

Trigger animations based on an element's visibility in the viewport:

.reveal {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

What this replaces

• Parallax libraries, animation-timeline: scroll() handles parallax natively
• Scroll-triggered reveal libraries, animation-timeline: view() replaces AOS, ScrollReveal, and similar
• Progress indicators, link animation-timeline: scroll() to a progress bar
• Sticky headers that animate, combine with position: sticky and animation-range

Browser support

Feature	Chrome	Firefox	Safari
scroll() timeline	✅ 115+	✅ 130+	✅ 17.4+
view() timeline	✅ 115+	✅ 130+	✅ 17.4+
animation-range	✅ 115+	✅ 130+	✅ 17.4+

Progressive enhancement

Wrap scroll-driven animations in @supports:

@supports (animation-timeline: scroll()) {
  .parallax { animation-timeline: scroll(); }
}

Browsers that don't support it fall back to static positioning. No broken layouts.

The bottom line

Scroll-driven animations are the biggest CSS animation upgrade since CSS animations themselves. They're now safe to use in production, with fallbacks. If you're still importing a scroll animation library, it's time to check whether pure CSS can replace it.