10 Scroll Animations Built on the New CSS animation-timeline API (8 With Zero JavaScript)

10 Scroll Animations Built on the New CSS animation-timeline API (8 With Zero JavaScript)

For as long as scroll-driven animation has existed on the web, it has meant JavaScript: a scroll event listener, a getBoundingClientRect() call, and — if you wanted it smooth — a requestAnimationFrame loop tying the two together. GSAP's ScrollTrigger made that pattern pleasant to write, but it was still fundamentally the browser's main thread doing math on every scroll tick. The CSS Scroll-Driven Animations API changes the deal entirely: animation-timeline: scroll() and animation-timeline: view() let a @keyframes animation's 0%–100% playback position bind directly to scroll position instead of to a duration in seconds — computed by the browser's compositor, off the main thread, with no listener anywhere in the JavaScript. Eight of the ten snippets below use exactly that — genuinely zero JavaScript driving the animation, verified by reading the actual js field of each one (it only logs a feature-support check, nothing more). The other two are included deliberately as an …