Scroll-Driven Animations: Progress Bars and Reveals Without JavaScript
Animations tied to scroll position used to require JavaScript scroll listeners. Now CSS handles them natively. Here is how. Scroll-driven animations are one of my favorite additions to CSS in years. Effects that previously required scroll listeners, requestAnimationFrame loops, and careful performance tuning now work with a few CSS properties. A reading progress bar, a parallax background, a reveal-on-scroll gallery. all declarative, all performant, all in CSS without a single line of JavaScript. I first used them on a long-form article page. The designer wanted a progress bar at the top, images that faded in as you scrolled, and a parallax hero section. The old approach would have been 200 lines of JavaScript with scroll event throttling and IntersectionObserver setup. The CSS-only approach was 30 lines and ran at a smooth 60fps even on mobile. The Core Concept A scroll-driven animation links a keyframe animation progress to scroll position instead of time. Instead of the animation playing over two seconds, it plays over the distance you scroll. The animation-timeline property makes the connection. @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } .progress-bar {…