--- title: CSS Scroll-Driven Animations: No JavaScript Required description: CSS scroll-driven animations let you create scroll-linked effects without JavaScript using two new primitives: scroll() and view() as values for... canonical: https://daily.dev/posts/css-scroll-driven-animations-no-javascript-required-joeksxds7 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS Scroll-Driven Animations: No JavaScript Required | daily.dev og:description: CSS scroll-driven animations let you create scroll-linked effects without JavaScript using two new primitives: scroll() and view() as values for... og:url: https://daily.dev/posts/css-scroll-driven-animations-no-javascript-required-joeksxds7 og:image: https://api.daily.dev/og/posts/JOekSxDs7.png og:image:alt: CSS Scroll-Driven Animations: No JavaScript Required 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. # CSS Scroll-Driven Animations: No JavaScript Required **[Creative Design Technologist](https://daily.dev/sources/carmenansio)** · 4 min read · 0 upvotes · 0 comments ## Summary CSS scroll-driven animations let you create scroll-linked effects without JavaScript using two new primitives: scroll() and view() as values for animation-timeline. scroll() ties animations to a scroll container's position, while view() triggers animations based on element visibility in the viewport. The animation-range property controls exactly when animations fire during an element's entry, containment, or exit. This replaces common patterns like Intersection Observer boilerplate for reveal effects and scroll event listeners for progress bars. Browser support covers Chrome 115+ and Safari 18, with Firefox still behind a flag. A @supports fallback enables clean progressive enhancement. Complex use cases like pinning or multi-step scrubbing still benefit from libraries like GSAP ScrollTrigger. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Scroll-driven CSS animations](https://daily.dev/posts/scroll-driven-css-animations-uw6plcluy) · Flavio Copes · 141 upvotes · 5 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), [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/css-scroll-driven-animations-no-javascript-required-joeksxds7) ```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":"CSS Scroll-Driven Animations: No JavaScript Required","url":"https://daily.dev/posts/css-scroll-driven-animations-no-javascript-required-joeksxds7","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-scroll-driven-animations-no-javascript-required-joeksxds7"},"datePublished":"2026-07-05T07:23:54.151Z","dateModified":"2026-07-05T07:24:23.666Z","description":"CSS scroll-driven animations let you create scroll-linked effects without JavaScript using two new primitives: scroll() and view() as values for...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/28b2c58423ead7f42b891270e7591a10?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/28b2c58423ead7f42b891270e7591a10?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Creative Design Technologist","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":"Creative Design Technologist","logo":"https://media.daily.dev/image/upload/s---mEUJS2U--/f_auto,q_auto/v1783236228/logos/carmenansio","url":"https://daily.dev/sources/carmenansio"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/css-scroll-driven-animations-no-javascript-required-joeksxds7","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,css","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Creative Design Technologist","item":"https://daily.dev/sources/carmenansio"},{"@type":"ListItem","position":3,"name":"CSS Scroll-Driven Animations: No JavaScript Required"}]} ```