--- title: How animation-timeline: scroll() Replaces Scroll JavaScript description: CSS scroll-driven animations via `animation-timeline: scroll()` can replace a significant portion of JavaScript scroll handlers. The post walks through a... canonical: https://daily.dev/posts/how-animation-timeline-scroll-replaces-scroll-javascript-ge3fnuktk twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How animation-timeline: scroll() Replaces Scroll JavaScript | daily.dev og:description: CSS scroll-driven animations via `animation-timeline: scroll()` can replace a significant portion of JavaScript scroll handlers. The post walks through a... og:url: https://daily.dev/posts/how-animation-timeline-scroll-replaces-scroll-javascript-ge3fnuktk og:image: https://api.daily.dev/og/posts/GE3fNUKtk.png og:image:alt: How animation-timeline: scroll() Replaces Scroll JavaScript og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How animation-timeline: scroll() Replaces Scroll JavaScript **[Lit](https://daily.dev/sources/lit)** · [@agustinbarrientos](https://daily.dev/agustinbarrientos) · 1 min read · 2 upvotes · 1 comments ## Summary CSS scroll-driven animations via `animation-timeline: scroll()` can replace a significant portion of JavaScript scroll handlers. The post walks through a real-world scenario where a single scroll event listener accumulates multiple responsibilities (progress bar, reveal animations, section detection, analytics, URL updates) and shows how to properly separate concerns: CSS handles visual timelines like reading-progress bars and scroll-reveal effects, while JavaScript IntersectionObserver handles state-based logic like one-time reveals, active section tracking, and load-more triggers. Six live demos on a Lit-based build illustrate the approach, with browser compatibility notes (Safari ships it, Firefox stable still behind a flag) factored into the build strategy from the start. ## Content This one starts with a four-line scroll listener that quietly became a scroll engine. Marketing asks for a reading-progress bar and cards that reveal on scroll. Two weeks later that handler carries a resize listener, a throttle, layout reads, section detection, analytics, and URL updates. One ask, seven jobs, all wearing the same scroll event. The senior move is to name each job first. The bar and a reveal that may rewind are visual timelines, so CSS scroll-driven animations own them and a real chunk of JavaScript gets deleted; a reveal that must fire once and stay visible is state. The active section, the read-halfway event, the URL, and load-more stay in JavaScript on an IntersectionObserver, and position: sticky pins the header. Safari ships the CSS side today while Firefox stable is still flagged off, so the fallback is part of the build from day one. Six live demos on a typed Lit build. Watch the scroll-handler count drop to zero, point the bar at the wrong scroller and see the timeline go inactive, and flood the main thread to see which box keeps gliding. [**Read the full article**](https://agustinbarrientos.com/writing/senior-eye/animation-timeline-scroll) ## Community discussion Top comments from developers on daily.dev. **@agustinbarrientos** · 0 upvotes > Full article: [https://agustinbarrientos.com/writing/senior-eye/animation-timeline-scroll](https://agustinbarrientos.com/writing/senior-eye/animation-timeline-scroll) > > MDN, scroll-driven animations guide: [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations) > > WebKit, features in Safari 26.0: [https://webkit.org/blog/17333/webkit-features-in-safari-26-0/](https://webkit.org/blog/17333/webkit-features-in-safari-26-0/) > > [web.dev](http://web.dev), stick to compositor-only properties:... ## Similar posts on daily.dev - [Scroll-driven CSS animations](https://daily.dev/posts/scroll-driven-css-animations-uw6plcluy) · Flavio Copes · 142 upvotes · 6 comments - [Scroll-Driven Animations • Josh W. Comeau](https://daily.dev/posts/scroll-driven-animations-josh-w-comeau-e7cur5pha) · Josh W Comeau · 432 upvotes · 36 comments - [A First Look at Scroll-Triggered Animations](https://daily.dev/posts/a-first-look-at-scroll-triggered-animations-evfbfrvso) · CSS-Tricks · 26 upvotes · 1 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#performance](https://daily.dev/tags/performance), [#css](https://daily.dev/tags/css), [#safari](https://daily.dev/tags/safari) [View this post on daily.dev](https://daily.dev/posts/how-animation-timeline-scroll-replaces-scroll-javascript-ge3fnuktk) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/how-animation-timeline-scroll-replaces-scroll-javascript-ge3fnuktk","headline":"How animation-timeline: scroll() Replaces Scroll JavaScript","text":"CSS scroll-driven animations via `animation-timeline: scroll()` can replace a significant portion of JavaScript scroll handlers. The post walks through a real-world scenario where a single scroll event listener accumulates multiple responsibilities (progress bar, reveal animations, section detection, analytics, URL updates) and shows how to properly separate concerns: CSS handles visual timelines like reading-progress bars and scroll-reveal effects, while JavaScript IntersectionObserver handles state-based logic like one-time reveals, active section tracking, and load-more triggers. Six live demos on a Lit-based build illustrate the approach, with browser compatibility notes (Safari ships it, Firefox stable still behind a flag) factored into the build strategy from the start.","url":"https://daily.dev/posts/how-animation-timeline-scroll-replaces-scroll-javascript-ge3fnuktk","datePublished":"2026-07-20T15:10:15.321Z","dateModified":"2026-09-13T21:04:26.535Z","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0","description":"Google Developer Expert in Web Technologies | Sr UI/UX Designer & Frontend Engineer","worksFor":{"@type":"Organization","name":"Uncanny Owl","logo":"https://www.google.com/s2/favicons?domain=uncannyowl.com&sz=128"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":27370}},"image":"https://media.daily.dev/image/upload/s--gxlamoZ9--/f_auto/v1784560216/posts/GE3fNUKtk?_a=BAMAMicg0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"comment":[{"@type":"Comment","text":"Full article: https://agustinbarrientos.com/writing/senior-eye/animation-timeline-scroll\nMDN, scroll-driven animations guide: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations\nWebKit, features in Safari 26.0: https://webkit.org/blog/17333/webkit-features-in-safari-26-0/\nweb.dev, stick to compositor-only properties: https://web.dev/articles/animations-guide\ncaniuse, animation-timeline: https://caniuse.com/mdn-css_properties_animation-timeline","datePublished":"2026-07-20T15:22:36.843Z","url":"https://daily.dev/posts/GE3fNUKtk#c-XahzbeQTh","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/lit","name":"Lit"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Lit","item":"https://daily.dev/squads/lit"},{"@type":"ListItem","position":3,"name":"How animation-timeline: scroll() Replaces Scroll JavaScript"}]} ```