--- title: Scroll-Driven Animations • Josh W. Comeau | daily.dev description: The CSS Animation Timeline API enables scroll-driven animations without JavaScript by mapping keyframe animations to scroll progress instead of time. Using... canonical: https://daily.dev/posts/scroll-driven-animations-josh-w-comeau-e7cur5pha twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Scroll-Driven Animations • Josh W. Comeau | daily.dev og:description: The CSS Animation Timeline API enables scroll-driven animations without JavaScript by mapping keyframe animations to scroll progress instead of time. Using... og:url: https://daily.dev/posts/scroll-driven-animations-josh-w-comeau-e7cur5pha og:image: https://api.daily.dev/og/posts/E7CUR5phA.png og:image:alt: Scroll-Driven Animations • Josh W. Comeau 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. # Scroll-Driven Animations • Josh W. Comeau **[Josh W Comeau](https://daily.dev/sources/joshwcomeau)** · 14 min read · 432 upvotes · 36 comments ## Summary The CSS Animation Timeline API enables scroll-driven animations without JavaScript by mapping keyframe animations to scroll progress instead of time. Using `animation-timeline: view()` or `scroll()`, developers can trigger animations based on an element's position in the viewport. The post covers animation ranges (cover, contain, entry, exit), range percentages for precise control, scroll progress timelines for reading indicators, and linked timelines using `view-timeline` and `timeline-scope` to animate one element based on another element's scroll position. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@fabianletsch** · 16 upvotes > This post is absolutely top notch content. This is crazy good. Really refreshing next to all this llm generated nonsens. **@ghost** · 3 upvotes > First article in a while with no mention of AI at all. Massive thumbs up (don't quote me on this though I did only skim 😅) **@confidentcoding** · 2 upvotes > You're the man, Josh! A true master of the craft. **@projignesh** · 1 upvotes > top notch !! **@thedevalex** · 0 upvotes > Scroll-driven is so cool, but often feels like someone is trying way too hard. These are fantastic, though! ## Similar posts on daily.dev - [Scroll-driven CSS animations](https://daily.dev/posts/scroll-driven-css-animations-uw6plcluy) · Flavio Copes · 140 upvotes · 5 comments --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/scroll-driven-animations-josh-w-comeau-e7cur5pha) ```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":"TechArticle","headline":"Scroll-Driven Animations • Josh W. Comeau","url":"https://daily.dev/posts/scroll-driven-animations-josh-w-comeau-e7cur5pha","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/scroll-driven-animations-josh-w-comeau-e7cur5pha"},"datePublished":"2026-04-28T15:37:59.180Z","dateModified":"2026-04-28T15:38:37.517Z","description":"The CSS Animation Timeline API enables scroll-driven animations without JavaScript by mapping keyframe animations to scroll progress instead of time. Using...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f93d6c769a74dad5f656456efd5da6dc?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/f93d6c769a74dad5f656456efd5da6dc?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Josh W Comeau","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Josh W Comeau","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/4a121572d03c40a2bff9e8ed0f0792b5","url":"https://daily.dev/sources/joshwcomeau"},"commentCount":36,"discussionUrl":"https://daily.dev/posts/scroll-driven-animations-josh-w-comeau-e7cur5pha","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":432},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":36}],"keywords":"css","timeRequired":"PT14M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Josh W Comeau","item":"https://daily.dev/sources/joshwcomeau"},{"@type":"ListItem","position":3,"name":"Scroll-Driven Animations • Josh W. Comeau"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/scroll-driven-animations-josh-w-comeau-e7cur5pha","comment":[{"@type":"Comment","text":"This post is absolutely top notch content. This is crazy good. Really refreshing next to all this llm generated nonsens.","datePublished":"2026-04-28T17:59:53.097Z","url":"https://daily.dev/posts/E7CUR5phA#c-C4NcUCyNi","author":{"@type":"Person","name":"Fabian Letsch","url":"https://daily.dev/fabianletsch","image":"https://lh3.googleusercontent.com/a/ACg8ocKR6BVy_wn23EoOKq7-BlszlcXcLmASlnb7l-GtS-q1bePnkaJf=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":16}},{"@type":"Comment","text":"First article in a while with no mention of AI at all. Massive thumbs up (don’t quote me on this though I did only skim 😅)","datePublished":"2026-04-28T21:27:55.301Z","url":"https://daily.dev/posts/E7CUR5phA#c-K1seOV8ga","author":{"@type":"Person","name":"Deleted user","url":"https://daily.dev/ghost","image":"https://media.daily.dev/image/upload/s--hNIUzLiO--/f_auto/v1705327420/public/ghost_vlftth"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"You’re the man, Josh! A true master of the craft.","datePublished":"2026-04-28T18:02:48.323Z","url":"https://daily.dev/posts/E7CUR5phA#c-hqzDw0ofm","author":{"@type":"Person","name":"Lars Faye | Confident Coding","url":"https://daily.dev/confidentcoding","image":"https://media.daily.dev/image/upload/s--OGZu5DEc--/f_auto/v1772569630/avatars/avatar_umWZ9aQAng34qk5aaJl2q?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"top notch !!","datePublished":"2026-05-02T02:28:55.588Z","url":"https://daily.dev/posts/E7CUR5phA#c-LA8VEEtmT","author":{"@type":"Person","name":"Pro Jignesh","url":"https://daily.dev/projignesh","image":"https://media.daily.dev/image/upload/s--eatg7GXi--/f_auto,q_auto/v1700838348/avatars/avatar_dFvrqYFGeN1VGLGo1QM9t"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"Scroll-driven is so cool, but often feels like someone is trying way too hard. These are fantastic, though!","datePublished":"2026-04-29T05:13:35.112Z","url":"https://daily.dev/posts/E7CUR5phA#c-YosG8Rr8h","author":{"@type":"Person","name":"Alex","url":"https://daily.dev/thedevalex","image":"https://media.daily.dev/image/upload/s--ypfz8Hse--/f_auto/v1731086373/avatars/avatar_Tr72WSVlSkNCwF4rCk6Rg"}}]} ```