CSS Scroll-Driven Animations: The End of JavaScript Scroll Listeners

CSS Scroll-Driven Animations: The End of JavaScript Scroll Listeners Scroll-driven animations used to require JavaScript. You'd attach a scroll event listener, calculate how far through the page the user had scrolled, and update a CSS property or animation timing function on every frame. It worked, but it was verbose, ran on the main thread, and couldn't benefit from browser optimizations like compositor-only properties. That's changing. The CSS Scroll-Driven Animations specification — now shipping in Chrome 115+, Edge 115+, and Firefox 123+ — lets you write scroll-linked animations entirely in CSS, with no JavaScript required. The browser handles the animation timing based on scroll position, and because it's declarative, it can be optimized in ways that event-listener-based approaches never can. This article covers the full scroll-driven animations API: how @scroll-timeline works, what you can animate with it, and the practical patterns that make it useful today. The Core Concept: Ty