Josh W. Comeau's Animation Timeline API guide — scroll animations without JavaScript, fully explained
Josh W. Comeau published a thorough walkthrough of the new CSS Animation Timeline API this week, and it's the clearest explanation yet of how to ship scroll-driven animations without touching JavaScript. The API has been in Chrome since version 115 and Firefox added support in late 2025, which means it's finally safe to consider for production with a graceful fallback.
What the API actually does
Animation Timeline lets you drive a CSS animation off the scroll position of a container or the visibility of an element in the viewport, rather than off a time duration. The animation becomes a function of scroll progress: as the user scrolls from 0% to 100% through a section, the animation plays from 0% to 100%. Scroll back up and the animation plays in reverse. No requestAnimationFrame loop, no IntersectionObserver, no third-party library.
Two timeline types are supported: scroll() for animations tied to a container's scroll position, and view() for animations tied to an element's visibility in the viewport. The view() version handles the common pattern of "fade in as it scrolls into view, fade out as it scrolls past" with three or four lines of CSS.
The patterns Comeau actually covers
The guide goes beyond the basics to cover patterns that previously required JavaScript: parallax effects with multiple layers moving at different rates, progress bars that fill as the user reads an article, image reveals that crop and expand based on scroll, and section transitions that morph as one section gives way to another. The CSS is more verbose than a JavaScript equivalent for complex cases, but the performance is better because the browser handles the work on the compositor thread rather than the main thread.
The piece also walks through the @supports query pattern for progressive enhancement, so animations can ship today with a JavaScript fallback for browsers that don't support the API yet. For most use cases, the JavaScript fallback is just "don't animate" — the content still loads, it just doesn't move.
Why this matters
Scroll animations have been a JavaScript-bundle tax for a decade. Every site that wanted parallax or reveal-on-scroll pulled in GSAP, ScrollMagic, or Locomotive Scroll — each adding 30-100 KB to the bundle for what is, conceptually, a simple effect. Animation Timeline turns that into a CSS-only feature with zero bundle cost.
The trade-off is that complex scroll choreography is still easier to express in JavaScript. For simple effects (fade in on scroll, parallax background, progress indicators), the CSS-only path is now the better answer. For multi-step animation sequences with conditional logic, JavaScript libraries still have an edge. Comeau's piece is the best place to start figuring out which side of that line your use case sits on.