--- title: Scroll-driven CSS animations | daily.dev description: A practical guide to CSS scroll-driven animations using animation-timeline with scroll() and view(), requiring no JavaScript. Covers building a reading... canonical: https://daily.dev/posts/scroll-driven-css-animations-uw6plcluy twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Scroll-driven CSS animations | daily.dev og:description: A practical guide to CSS scroll-driven animations using animation-timeline with scroll() and view(), requiring no JavaScript. Covers building a reading... og:url: https://daily.dev/posts/scroll-driven-css-animations-uw6plcluy og:image: https://api.daily.dev/og/posts/uW6PlcLuy.png og:image:alt: Scroll-driven CSS animations 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 CSS animations **[Flavio Copes](https://daily.dev/sources/flaviocopes)** · 9 min read · 142 upvotes · 6 comments ## Summary A practical guide to CSS scroll-driven animations using animation-timeline with scroll() and view(), requiring no JavaScript. Covers building a reading progress bar, revealing cards on scroll, named timelines for sibling elements, choosing logical vs physical axes, adjusting view timeline insets and ranges, progressive enhancement with @supports, debugging techniques, respecting prefers-reduced-motion, and common mistakes like shorthand ordering and animating layout-heavy properties. Recommends checking MDN for current browser support before shipping. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I create a scroll progress bar using only CSS with no JavaScript? Attach an animation to the root scroll timeline using animation: grow-progress 1ms linear followed by animation-timeline: scroll(root block). The animation-timeline declaration must come after the animation shorthand, since the shorthand resets the timeline to auto. The 1ms duration is a harmless value since scroll position, not time, drives the animation progress. _Developers wiring up progress bars and reveal effects track new CSS animation techniques like this on daily.dev._ ### What is the difference between CSS scroll() and view() animation timelines? scroll() follows the scroll position of a container, useful for reading progress bars, carousels, or page-wide effects, while view() tracks an individual element as it moves through its nearest scrollport, useful for cards or images that reveal or change as they become visible. Both replace time-based animation timelines with scroll-based progress, requiring no JavaScript scroll listeners. _Choosing between scroll() and view() gets easier when developers compare CSS animation approaches on daily.dev._ ### Why does my CSS animation-timeline property not work even though I set it? The most common cause is declaration order: the animation shorthand resets animation-timeline to auto, so animation-timeline must be written after the animation shorthand, not before. Other causes include selecting an element that does not actually scroll, using the wrong axis (block vs inline), or a named timeline being out of scope without timeline-scope defined on a shared ancestor. _Debugging tricky CSS behavior like this is easier when developers share fixes and gotchas on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@agustinbarrientos** · 2 upvotes > I'd add a visual regression case with animation-timeline disabled. A reveal that passes in Chrome can still leave the card invisible in the fallback. **@christoferd** · 1 upvotes > I went to the page, scrolled all the components/examples and didn't see any animations 🤔 > MS Edge ## Similar posts on daily.dev - [Scroll-Driven Animations • Josh W. Comeau](https://daily.dev/posts/scroll-driven-animations-josh-w-comeau-e7cur5pha) · Josh W Comeau · 432 upvotes · 36 comments - [Creating Scroll-Based Animations in Full view\(\)](https://daily.dev/posts/creating-scroll-based-animations-in-full-view--mo1gx2c3g) · CSS-Tricks · 4 upvotes · 0 comments - [Scroll-Driven CSS in 2026: Building Carousels Without JavaScript](https://daily.dev/posts/scroll-driven-css-in-2026-building-carousels-without-javascript-o8z3jgfok) · SitePoint · 19 upvotes · 1 comments --- Tags: [#css](https://daily.dev/tags/css), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/scroll-driven-css-animations-uw6plcluy) ```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 CSS animations","url":"https://daily.dev/posts/scroll-driven-css-animations-uw6plcluy","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/scroll-driven-css-animations-uw6plcluy"},"datePublished":"2026-08-23T05:23:42.258Z","dateModified":"2026-09-13T18:45:00.477Z","description":"A practical guide to CSS scroll-driven animations using animation-timeline with scroll() and view(), requiring no JavaScript. Covers building a reading...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/3a52f0b061d521340bb4fcdbe6bb429a?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/3a52f0b061d521340bb4fcdbe6bb429a?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Flavio Copes","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":"Flavio Copes","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/1f2dbd275797411bbd37bfdaaf0951a9","url":"https://daily.dev/sources/flaviocopes"},"commentCount":6,"discussionUrl":"https://daily.dev/posts/scroll-driven-css-animations-uw6plcluy","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":142},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":6}],"keywords":"css,accessibility","timeRequired":"PT9M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Flavio Copes","item":"https://daily.dev/sources/flaviocopes"},{"@type":"ListItem","position":3,"name":"Scroll-driven CSS animations"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/scroll-driven-css-animations-uw6plcluy","comment":[{"@type":"Comment","text":"I’d add a visual regression case with animation-timeline disabled. A reveal that passes in Chrome can still leave the card invisible in the fallback.","datePublished":"2026-08-25T07:01:45.337Z","url":"https://daily.dev/posts/uW6PlcLuy#c-OIWwWIp6E","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"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"I went to the page, scrolled all the components/examples and didn’t see any animations 🤔\nMS Edge","datePublished":"2026-08-28T18:42:43.699Z","dateModified":"2026-08-28T18:42:55.948Z","url":"https://daily.dev/posts/uW6PlcLuy#c-jmJFRF723","author":{"@type":"Person","name":"Chris De David","url":"https://daily.dev/christoferd","image":"https://avatars.githubusercontent.com/u/1835883?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/scroll-driven-css-animations-uw6plcluy#faq","mainEntity":[{"@type":"Question","name":"How do I create a scroll progress bar using only CSS with no JavaScript?","acceptedAnswer":{"@type":"Answer","text":"Attach an animation to the root scroll timeline using animation: grow-progress 1ms linear followed by animation-timeline: scroll(root block). The animation-timeline declaration must come after the animation shorthand, since the shorthand resets the timeline to auto. The 1ms duration is a harmless value since scroll position, not time, drives the animation progress. Developers wiring up progress bars and reveal effects track new CSS animation techniques like this on daily.dev."}},{"@type":"Question","name":"What is the difference between CSS scroll() and view() animation timelines?","acceptedAnswer":{"@type":"Answer","text":"scroll() follows the scroll position of a container, useful for reading progress bars, carousels, or page-wide effects, while view() tracks an individual element as it moves through its nearest scrollport, useful for cards or images that reveal or change as they become visible. Both replace time-based animation timelines with scroll-based progress, requiring no JavaScript scroll listeners. Choosing between scroll() and view() gets easier when developers compare CSS animation approaches on daily.dev."}},{"@type":"Question","name":"Why does my CSS animation-timeline property not work even though I set it?","acceptedAnswer":{"@type":"Answer","text":"The most common cause is declaration order: the animation shorthand resets animation-timeline to auto, so animation-timeline must be written after the animation shorthand, not before. Other causes include selecting an element that does not actually scroll, using the wrong axis (block vs inline), or a named timeline being out of scope without timeline-scope defined on a shared ancestor. Debugging tricky CSS behavior like this is easier when developers share fixes and gotchas on daily.dev."}}]} ```