{"id":297,"date":"2024-12-11T14:00:00","date_gmt":"2024-12-11T15:00:00","guid":{"rendered":"https:\/\/blissfuldebt.com\/?p=297"},"modified":"2025-03-06T17:24:39","modified_gmt":"2025-03-06T17:24:39","slug":"an-introduction-to-css-scroll-driven-animations-scroll-and-view-progress-timelines","status":"publish","type":"post","link":"https:\/\/blissfuldebt.com\/index.php\/2024\/12\/11\/an-introduction-to-css-scroll-driven-animations-scroll-and-view-progress-timelines\/","title":{"rendered":"An Introduction\u00a0To\u00a0CSS\u00a0Scroll-Driven Animations: Scroll And View Progress Timelines"},"content":{"rendered":"
An Introduction\u00a0To\u00a0CSS\u00a0Scroll-Driven Animations: Scroll And View Progress Timelines<\/title><\/p>\n<article>\n<header>\n<h1>An Introduction\u00a0To\u00a0CSS\u00a0Scroll-Driven Animations: Scroll And View Progress Timelines<\/h1>\n<address>Mariana Beldi<\/address>\n<p> 2024-12-11T15:00:00+00:00<br \/>\n 2025-03-06T17:04:34+00:00<br \/>\n <\/header>\n<p>You can safely use scroll-driven animations in Chrome as of December 2024. Firefox supports them, too, though you\u2019ll need to enable a flag. Safari? Not yet, but don\u2019t worry — you can still offer a seamless experience across all browsers with a <a href=\"https:\/\/github.com\/flackr\/scroll-timeline\">polyfill<\/a>. Just keep in mind that adding a polyfill involves a JavaScript library, so you won\u2019t get the same performance boost.<\/p>\n<p>There are plenty of valuable resources to dive into scroll-driven animations, which I\u2019ll be linking throughout the article. My starting point was <a href=\"https:\/\/www.youtube.com\/playlist?list=PLNYkxOF6rcICM3ttukz9x5LCNOHfWBVnn\">Bramus\u2019 video tutorial<\/a>, which pairs nicely with <a href=\"https:\/\/css-tricks.com\/unleash-the-power-of-scroll-driven-animations\/\">Geoff\u2019s in-depth notes<\/a> <a href=\"https:\/\/css-tricks.com\/unleash-the-power-of-scroll-driven-animations\/\">Graham<\/a> that build on the tutorial.<\/p>\n<p>In this article, we\u2019ll walk through the <a href=\"https:\/\/www.w3.org\/TR\/scroll-animations-1\/\">latest published version by the W3C<\/a> and explore the two types of scroll-driven timelines — <strong>scroll progress timelines<\/strong> and <strong>view progress timelines<\/strong>. By the end, I hope that you are familiar with both timelines, not only being able to tell them apart but also feeling confident enough to use them in your work.<\/p>\n<p><strong>Note<\/strong>: <em>All demos in this article only work in Chrome 116 or later at the time of writing.<\/em><\/p>\n<h2 id=\"scroll-progress-timelines\">Scroll Progress Timelines<\/h2>\n<p>The scroll progress timeline links an animation\u2019s timeline to the scroll position of a scroll container along a specific axis. So, the animation is tied directly to scrolling. As you scroll forward, so does the animation. You\u2019ll see me refer to them as <code>scroll-timeline<\/code> animations in addition to calling them scroll progress timelines.<\/p>\n<p>Just as we have two types of scroll-driven animations, we have two types of <code>scroll-timeline<\/code> animations: <strong>anonymous timelines<\/strong> and <strong>named timelines<\/strong>.<\/p>\n<h3 id=\"anonymous-scroll-timeline\">Anonymous <code>scroll-timeline<\/code><\/h3>\n<p>Let\u2019s start with a classic example: creating a scroll progress bar at the top of a blog post to track your reading progress.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"RNbRqoj\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Scroll Progress Timeline example – before animation-timeline scroll() [forked]](https:\/\/codepen.io\/smashingmag\/pen\/RNbRqoj) by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/RNbRqoj\">Scroll Progress Timeline example – before animation-timeline scroll() [forked]<\/a> by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/figcaption><\/figure>\n<p>In this example, there\u2019s a <code><div><\/code> with the ID \u201cprogress.\u201d At the end of the CSS file, you\u2019ll see it has a background color, a defined width and height, and it\u2019s fixed at the top of the page. There\u2019s also an animation that scales it from <code>0<\/code> to <code>1<\/code> along the x-axis — pretty standard if you\u2019re familiar with CSS animations!<\/p>\n<p>Here\u2019s the relevant part of the styles:<\/p>\n<pre><code class=\"language-css\">#progress {\n \/* ... *\/\n animation: progressBar 1s linear;\n}\n\n\n@keyframes progressBar {\n from { transform: scaleX(0); }\n}\n<\/code><\/pre>\n<p>The <code>progressBar<\/code> animation runs once and lasts one second with a linear timing function. Linking this animation scrolling is just a single line in CSS:<\/p>\n<pre><code class=\"language-css\">animation-timeline: scroll();\n<\/code><\/pre>\n<p>No need to specify seconds for the duration\u200a—\u200athe scrolling behavior itself will dictate the timing. And that\u2019s it! You\u2019ve just created your first scroll-driven animation! Notice how the animation\u2019s direction is directly tied to the scrolling direction — scroll down, and the progress indicator grows wider; scroll up, and it becomes narrower.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"ByBzGpO\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Scroll Progress Timeline example – animation-timeline scroll() [forked]](https:\/\/codepen.io\/smashingmag\/pen\/ByBzGpO) by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/ByBzGpO\">Scroll Progress Timeline example – animation-timeline scroll() [forked]<\/a> by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/figcaption><\/figure>\n<h3 id=\"scroll-timeline-property-parameters\"><code>scroll-timeline<\/code> Property Parameters<\/h3>\n<p>In a <code>scroll-timeline<\/code> animation, the <code>scroll()<\/code> function is used inside the <code>animation-timeline<\/code> property. It only takes two parameters: <code><scroller><\/code> and <code><axis><\/code>.<\/p>\n<ul>\n<li><strong><code><scroller><\/code><\/strong> refers to the scroll container, which can be set as <code>nearest<\/code> (the default), <code>root<\/code>, or <code>self<\/code>.<\/li>\n<li><strong><code><axis><\/code><\/strong> refers to the scroll axis, which can be <code>block<\/code> (the default), <code>inline<\/code>, <code>x<\/code>, or <code>y<\/code>.<\/li>\n<\/ul>\n<p>In the reading progress example above, we didn\u2019t declare any of these because we used the defaults. But we could achieve the same result with:<\/p>\n<pre><code class=\"language-css\">animation-timeline: scroll(nearest block);\n<\/code><\/pre>\n<p>Here, the <code>nearest<\/code> scroll container is the root scroll of the HTML element. So, we could also write it this way instead:<\/p>\n<pre><code class=\"language-css\">animation-timeline: scroll(root block);\n<\/code><\/pre>\n<p>The <code>block<\/code> axis confirms that the scroll moves top to bottom in a left-to-right writing mode. If the page has a wide horizontal scroll, and we want to animate along that axis, we could use the <code>inline<\/code> or <code>x<\/code> values (depending on whether we want the scrolling direction to always be left-to-right or adapt based on the writing mode).<\/p>\n<p>We\u2019ll dive into <code>self<\/code> and <code>inline<\/code> in more examples later, but the best way to learn is to play around with all the combinations, and <a href=\"https:\/\/scroll-driven-animations.style\/tools\/scroll-timeline\/params\/\">this tool by Bramus<\/a> lets you do exactly that. Spend a few minutes before we jump into the next property associated with scroll timelines.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design & UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops \u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img decoding=\"async\" loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h3 id=\"the-animation-range-property\">The <code>animation-range<\/code> Property<\/h3>\n<p>The <code>animation-range<\/code> for <code>scroll-timeline<\/code> defines which part of the scrollable content controls the start and end of an animation\u2019s progress based on the scroll position. It allows you to decide when the animation starts or ends while scrolling through the container.<\/p>\n<p>By default, the <code>animation-range<\/code> is set to <code>normal<\/code>, which is shorthand for the following:<\/p>\n<pre><code class=\"language-css\">animation-range-start: normal;\nanimation-range-end: normal;\n<\/code><\/pre>\n<p>This translates to <code>0%<\/code> (<code>start<\/code>) and <code>100%<\/code> (<code>end<\/code>) in a <code>scroll-timeline<\/code> animation:<\/p>\n<pre><code class=\"language-css\">animation-range: normal normal;\n<\/code><\/pre>\n<p>\u2026which is the same as:<\/p>\n<pre><code class=\"language-css\">animation-range: 0% 100%;\n<\/code><\/pre>\n<p>You can declare any <a href=\"https:\/\/css-tricks.com\/css-length-units\/\">CSS length units<\/a> or even <a href=\"https:\/\/www.smashingmagazine.com\/2015\/12\/getting-started-css-calc-techniques\/\">calculations<\/a>. For example, let\u2019s say I have a footer that\u2019s <code>500px<\/code> tall. It\u2019s filled with banners, ads, and related posts. I don\u2019t want the scroll progress bar to include any of that as part of the reading progress. What I want is for the animation to start at the top and end <code>500px<\/code> before the bottom. Here we go:<\/p>\n<pre><code class=\"language-css\">animation-range: 0% calc(100% - 500px);\n<\/code><\/pre>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"azoZQym\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Scroll Progress Timeline example – animation-timeline, animation-range [forked]](https:\/\/codepen.io\/smashingmag\/pen\/azoZQym) by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/azoZQym\">Scroll Progress Timeline example – animation-timeline, animation-range [forked]<\/a> by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/figcaption><\/figure>\n<p>Just like that, we\u2019ve covered the key properties of <code>scroll-timeline<\/code> animations. Ready to take it a step further?<\/p>\n<h3 id=\"named-scroll-timeline\">Named <code>scroll-timeline<\/code><\/h3>\n<p>Let\u2019s say I want to use the scroll position of a different scroll container for the same animation. The <code>scroll-timeline-name<\/code> property allows you to specify which scroll container the scroll animation should be linked to. You give it a name (a dashed-ident, e.g., <code>--my-scroll-timeline<\/code>) that maps to the scroll container you want to use. This container will then control the animation\u2019s progress as the user scrolls through it.<\/p>\n<p>Next, we need to define the scroll axis for this new container by using the <code>scroll-timeline-axis<\/code>, which tells the animation which axis will trigger the motion. Here\u2019s how it looks in the code:<\/p>\n<pre><code class=\"language-css\">.my-class { \n \/* This is my new scroll-container *\/\n scroll-timeline-name: --my-custom-name;\n scroll-timeline-axis: inline;\n}\n<\/code><\/pre>\n<p>If you omit the axis, then the default <code>block<\/code> value will be used. However, you can also use the shorthand <code>scroll-timeline<\/code> property to combine both the name and axis in a single declaration:<\/p>\n<pre><code class=\"language-css\">.my-class { \n \/* Shorthand for scroll-container with axis *\/\n scroll-timeline: --my-custom-name inline;\n}\n<\/code><\/pre>\n<p>I think it\u2019s easier to understand all this with a practical example. Here\u2019s the same progress indicator we\u2019ve been working with, but with inline scrolling (i.e., along the x-axis):<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"pvzbQrM\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Named Scroll Progress Timeline [forked]](https:\/\/codepen.io\/smashingmag\/pen\/pvzbQrM) by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/pvzbQrM\">Named Scroll Progress Timeline [forked]<\/a> by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/figcaption><\/figure>\n<p>We have two animations running:<\/p>\n<ol>\n<li>A progress bar grows wider when scrolling in an inline direction.<\/li>\n<li>The container\u2019s background color changes the further you scroll.<\/li>\n<\/ol>\n<p>The HTML structure looks like the following:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-html\"><div class=\"gallery\">\n <div class=\"gallery-scroll-container\">\n <div class=\"gallery-progress\" role=\"progressbar\" aria-label=\"progress\"><\/div>\n <img src=\"image1.svg\" alt=\"Alt text\" draggable=\"false\" width=\"500\">\n <img src=\"image2.svg\" alt=\"Alt text\" draggable=\"false\" width=\"500\">\n <img src=\"image3.svg\" alt=\"Alt text\" draggable=\"false\" width=\"500\">\n <\/div>\n<\/div>\n<\/code><\/pre>\n<\/div>\n<p>In this case, the <code>gallery-scroll-container<\/code> has horizontal scrolling and changes its background color as you scroll. Normally, we could just use <code>animation-timeline: scroll(self inline)<\/code> to achieve this. However, we also want the <code>gallery-progress<\/code> element to use the same scroll for its animation.<\/p>\n<p>The <code>gallery-progress<\/code> element is the first inside <code>gallery-scroll-container<\/code>, and we will lose it when scrolling unless it\u2019s absolutely positioned. But when we do this, the element no longer occupies space in the normal document flow, and that affects how the element behaves with its parent and siblings. We need to specify which scroll container we want it to listen to.<\/p>\n<p>That\u2019s where naming the scroll container comes in handy. By giving <code>gallery-scroll-container<\/code> a <code>scroll-timeline-name<\/code> and <code>scroll-timeline-axis<\/code>, we can ensure both animations sync to the same scroll:<\/p>\n<pre><code class=\"language-css\">.gallery-scroll-container {\n \/* ... *\/\n animation: bg steps(1);\n scroll-timeline: --scroller inline;\n}\n<\/code><\/pre>\n<p>And is using that scrolling to define its own <code>animation-timeline<\/code>:<\/p>\n<pre><code class=\"language-css\">.gallery-scroll-container {\n \/* ... *\/\n animation: bg steps(1);\n scroll-timeline: --scroller inline;\n animation-timeline: --scroller;\n}\n<\/code><\/pre>\n<p>Now we can scale this name to the progress bar that is using a different animation but listening to the same scroll:<\/p>\n<pre><code class=\"language-css\">.gallery-progress {\n \/* ... *\/\n animation: progressBar linear;\n animation-timeline: --scroller;\n}\n<\/code><\/pre>\n<p>This allows both animations (the growing progress bar and changing background color) to follow the same scroll behavior, even though they are separate elements and animations.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h3 id=\"the-timeline-scope-property\">The <code>timeline-scope<\/code> Property<\/h3>\n<p>What happens if we want to animate something based on the scroll position of a sibling or even a higher ancestor? This is where the <code>timeline-scope<\/code> property comes into play. It allows us to extend the scope of a <code>scroll-timeline<\/code> beyond the current element\u2019s subtree. The value of <code>timeline-scope<\/code> must be a custom identifier, which again is a dashed-ident.<\/p>\n<p>Let\u2019s illustrate this with a new example. This time, scrolling in one container runs an animation inside another container:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"jENrQGo\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Scroll Driven Animations – timeline-scope [forked]](https:\/\/codepen.io\/smashingmag\/pen\/jENrQGo) by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/jENrQGo\">Scroll Driven Animations – timeline-scope [forked]<\/a> by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/figcaption><\/figure>\n<p>We can play the animation on the image when scrolling the text container because they are siblings in the HTML structure:<\/p>\n<pre><code class=\"language-html\"><div class=\"main-container\">\n <div class=\"sardinas-container\">\n <img ...>\n <\/div>\n\n <div class=\"scroll-container\">\n <p>Long text...<\/p>\n <\/div>\n<\/div>\n<\/code><\/pre>\n<p>Here, only the <code>.scroll-container<\/code> has scrollable content, so let\u2019s start by naming this:<\/p>\n<pre><code class=\"language-css\">.scroll-container {\n \/* ... *\/\n overflow-y: scroll;\n scroll-timeline: --containerText;\n}\n<\/code><\/pre>\n<p>Notice that I haven\u2019t specified the scroll axis, as it defaults to <code>block<\/code> (vertical scrolling), and that\u2019s the value I want.<\/p>\n<p>Let\u2019s move on to the image inside the <code>sardinas-container<\/code>. We want this image to animate as we scroll through the <code>scroll-container<\/code>. I\u2019ve added a <code>scroll-timeline-name<\/code> to its <code>animation-timeline<\/code> property:<\/p>\n<pre><code class=\"language-css\">.sardinas-container img {\n \/* ... *\/\n animation: moveUp steps(6) both;\n animation-timeline: --containerText;\n}\n<\/code><\/pre>\n<p>At this point, however, the animation still won\u2019t work because the <code>scroll-container<\/code> is not directly related to the images. To make this work, we need to extend the <code>scroll-timeline-name<\/code> so it becomes reachable. This is done by adding the <code>timeline-scope<\/code> to the parent element (or a higher ancestor) shared by both elements:<\/p>\n<pre><code class=\"language-css\">.main-container {\n \/* ... *\/\n timeline-scope: --containerText;\n}\n<\/code><\/pre>\n<p>With this setup, the scroll of the <code>scroll-container<\/code> will now control the animation of the image inside the <code>sardinas-container<\/code>!<\/p>\n<p>Now that we\u2019ve covered how to use <code>timeline-scope<\/code>, we\u2019re ready to move on to the next type of scroll-driven animations, where the same properties will apply but with slight differences in how they behave.<\/p>\n<h2 id=\"view-progress-timelines\">View Progress Timelines<\/h2>\n<p>We just looked at <strong>scroll progress animations<\/strong>. That\u2019s the first type of scroll-driven animation of the two. Next, we\u2019re turning our attention to <strong>view progress animations<\/strong>. There\u2019s a lot of similarities between the two! But they\u2019re different enough to warrant their own section for us to explore how they work. You\u2019ll see me refer to these as <code>view-timeline<\/code> animations in addition to calling them view progress animations, as they revolve around a <code>view()<\/code> function.<\/p>\n<p>The <strong>view progress timeline<\/strong> is the second type of type of scroll-driven animation that we\u2019re looking at. It tracks an element as it enters or exits the scrollport (the visible area of the scrollable content). This behavior is quite similar to <a href=\"https:\/\/css-tricks.com\/an-explanation-of-how-the-intersection-observer-watches\/?ref=csslayout.news\">how an <code>IntersectionObserver<\/code> works in JavaScript<\/a> but can be done entirely in CSS.<\/p>\n<p>We have anonymous and named view progress timelines, just as we have anonymous and named scroll progress animations. Let\u2019s unpack those.<\/p>\n<h3 id=\"anonymous-view-timeline\">Anonymous View Timeline<\/h3>\n<p>Here\u2019s a simple example to help us see the basic idea of anonymous view timelines. Notice how the image fades into view when you scroll down to a certain point on the page:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"KwPMrQO\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [View Timeline Animation – view() [forked]](https:\/\/codepen.io\/smashingmag\/pen\/KwPMrQO) by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/KwPMrQO\">View Timeline Animation – view() [forked]<\/a> by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/figcaption><\/figure>\n<p>Let\u2019s say we want to animate an image that fades in as it appears in the scrollport. The image\u2019s opacity will go from <code>0<\/code> to <code>1<\/code>. This is how you might write that same animation in classic CSS using <code>@keyframes<\/code>:<\/p>\n<pre><code class=\"language-css\">img {\n \/* ... *\/\n animation: fadeIn 1s;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n<\/code><\/pre>\n<p>That\u2019s great, but we want the image to <code>fadeIn<\/code> when it\u2019s in view. Otherwise, the animation is sort of like a tree that falls in a forest with no one there to witness it\u2026 did the animation ever happen? We\u2019ll never know!<\/p>\n<p>We have a <code>view()<\/code> function that makes this a view progress animation with a single line of CSS:<\/p>\n<pre><code class=\"language-css\">img {\n \/* ... *\/\n animation: fadeIn;\n animation-timeline: view();\n}\n<\/code><\/pre>\n<p>And notice how we no longer need to declare an <code>animation-duration<\/code> like we did in classic CSS. The animation is no longer tied by time but by space. The animation is triggered as the image becomes visible in the scrollport.<\/p>\n<h3 id=\"view-timeline-parameters\">View Timeline Parameters<\/h3>\n<p>Just like the <code>scroll-timeline<\/code> property, the <strong><code>view-timeline<\/code><\/strong> property accepts parameters that allow for more customization:<\/p>\n<pre><code class=\"language-css\">animation-timeline: view( );\n<\/code><\/pre>\n<ul>\n<li><strong><code><inset><\/code><\/strong><br \/>\nControls when the animation starts and ends relative to the element\u2019s visibility within the scrollport. It defines the margin between the edges of the scrollport and the element being tracked. The default value is <code>auto<\/code>, but it can also take length percentages as well as start and end values.<\/li>\n<li><strong><code><axis><\/code><\/strong><br \/>\nThis is similar to the scroll-timeline\u2019s axis parameter. It defines which axis (horizontal or vertical) the animation is tied to. The default is <code>block<\/code>, which means it tracks the vertical movement. You can also use <code>inline<\/code> to track horizontal movement or simple <code>x<\/code> or <code>y<\/code>.<\/li>\n<\/ul>\n<p>Here\u2019s an example that uses both <code>inset<\/code> and <code>axis<\/code> to customize when and how the animation starts:<\/p>\n<pre><code class=\"language-css\">img {\n animation-timeline: view(20% block);\n}\n<\/code><\/pre>\n<p>In this case:<\/p>\n<ol>\n<li>The animation starts when the image is 20% visible in the scrollport.<\/li>\n<li>The animation is triggered by vertical scrolling (<code>block<\/code> axis).<\/li>\n<\/ol>\n<h3 id=\"parallax-effect\">Parallax Effect<\/h3>\n<p>With the <code>view()<\/code> function, it\u2019s also easy to create parallax effects by simply adjusting the animation properties. For example, you can have an element move or scale as it enters the scrollport without any JavaScript:<\/p>\n<pre><code class=\"language-css\">img {\n animation: parallaxMove 1s;\n animation-timeline: view();\n}\n\n@keyframes parallaxMove {\n to { transform: translateY(-50px); }\n}\n<\/code><\/pre>\n<p>This makes it incredibly simple to create dynamic and engaging scroll animations with just a few lines of CSS.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"mybEQLK\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Parallax effect with CSS Scroll driven animations – view() [forked]](https:\/\/codepen.io\/smashingmag\/pen\/mybEQLK) by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/mybEQLK\">Parallax effect with CSS Scroll driven animations – view() [forked]<\/a> by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/figcaption><\/figure>\n<h3 id=\"the-animation-range-property-1\">The <code>animation-range<\/code> Property<\/h3>\n<p>Using the CSS <strong><code>animation-range<\/code><\/strong> property with view timelines defines how much of an element\u2019s visibility within the scrollport controls the start and end points of the animation\u2019s progress. This can be used to fine-tune when the animation begins and ends based on the element\u2019s visibility in the viewport.<\/p>\n<p>While the default value is <code>normal<\/code>, in view timelines, it translates to tracking the full visibility of the element from the moment it starts entering the scrollport until it fully leaves. This is represented by the following:<\/p>\n<pre><code class=\"language-css\">animation-range: normal normal;\n\/* Equivalent to *\/\nanimation-range: cover 0% cover 100%;\n<\/code><\/pre>\n<p>Or, more simply:<\/p>\n<pre><code class=\"language-css\">animation-range: cover;\n<\/code><\/pre>\n<p>There are six possible values or <code>timeline-range-names<\/code>:<\/p>\n<ol>\n<li><strong><code>cover<\/code><\/strong><br \/>\nTracks the full visibility of the element, from when it starts entering the scrollport to when it completely leaves it.<\/li>\n<li><strong><code>contain<\/code><\/strong><br \/>\nTracks when the element is fully visible inside the scrollport, from the moment it\u2019s fully contained until it no longer is.<\/li>\n<li><strong><code>entry<\/code><\/strong><br \/>\nTracks the element from the point it starts entering the scrollport until it\u2019s fully inside.<\/li>\n<li><strong><code>exit<\/code><\/strong><br \/>\nTracks the element from the point it starts, leaving the scrollport until it\u2019s fully outside.<\/li>\n<li><strong><code>entry-crossing<\/code><\/strong><br \/>\nTracks the element as it crosses the starting edge of the scrollport, from start to full crossing.<\/li>\n<li><strong><code>exit-crossing<\/code><\/strong><br \/>\nTracks the element as it crosses the end edge of the scrollport, from start to full crossing.<\/li>\n<\/ol>\n<p>You can mix different <code>timeline-range-names<\/code> to control the start and end points of the animation range. For example, you could make the animation start when the element enters the scrollport and end when it exits:<\/p>\n<pre><code class=\"language-css\">animation-range: entry exit;\n<\/code><\/pre>\n<p>You can also combine these values with percentages to define more custom behavior, such as starting the animation halfway through the element\u2019s entry and ending it halfway through its exit:<\/p>\n<pre><code class=\"language-css\">animation-range: entry 50% exit 50%;\n<\/code><\/pre>\n<p>Exploring all these values and combinations is best done interactively. Tools like Bramus\u2019 <a href=\"https:\/\/scroll-driven-animations.style\/tools\/view-timeline\/ranges\/\">view-timeline range visualizer<\/a> make it easier to understand.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h3 id=\"target-range-inside-keyframes\">Target Range Inside <code>@keyframes<\/code><\/h3>\n<p>One of the powerful features of <code>timeline-range-names<\/code> is their ability to be used inside <code>@keyframes<\/code>:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"zxOBMaK\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [target range inside @keyframes – view-timeline, timeline-range-name [forked]](https:\/\/codepen.io\/smashingmag\/pen\/zxOBMaK) by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/zxOBMaK\">target range inside @keyframes – view-timeline, timeline-range-name [forked]<\/a> by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/figcaption><\/figure>\n<p>Two different animations are happening in that demo:<\/p>\n<ol>\n<li><strong><code>slideIn<\/code><\/strong><br \/>\nWhen the element enters the scrollport, it scales up and becomes visible.<\/li>\n<li><strong><code>slideOut<\/code><\/strong><br \/>\nWhen the element leaves, it scales down and fades out.<\/li>\n<\/ol>\n<pre><code class=\"language-css\">@keyframes slideIn {\n from {\n transform: scale(.8) translateY(100px); \n opacity: 0;\n }\n to { \n transform: scale(1) translateY(0); \n opacity: 1;\n }\n}\n\n@keyframes slideOut {\n from {\n transform: scale(1) translateY(0); \n opacity: 1; \n }\n to { \n transform: scale(.8) translateY(-100px); \n opacity: 0 \n }\n}\n<\/code><\/pre>\n<p>The new thing is that now we can merge these two animations using the <code>entry<\/code> and <code>exit<\/code> <code>timeline-range-names<\/code>, simplifying it into one animation that handles both cases:<\/p>\n<pre><code class=\"language-css\">@keyframes slideInOut {\n \/* Animation for when the element enters the scrollport *\/\n entry 0% {\n transform: scale(.8) translateY(100px); \n opacity: 0;\n }\n entry 100% { \n transform: scale(1) translateY(0); \n opacity: 1;\n }\n \/* Animation for when the element exits the scrollport *\/\n exit 0% {\n transform: scale(1) translateY(0); \n opacity: 1; \n }\n exit 100% { \n transform: scale(.8) translateY(-100px); \n opacity: 0;\n }\n}\n<\/code><\/pre>\n<ul>\n<li><strong><code>entry 0%<\/code><\/strong><br \/>\nDefines the state of the element at the beginning of its entry into the scrollport (scaled down and transparent).<\/li>\n<li><strong><code>entry 100%<\/code><\/strong><br \/>\nDefines the state when the element has fully entered the scrollport (fully visible and scaled up).<\/li>\n<li><strong><code>exit 0%<\/code><\/strong><br \/>\nStarts tracking the element as it begins to leave the scrollport (visible and scaled up).<\/li>\n<li><strong><code>exit 100%<\/code><\/strong><br \/>\nDefines the state when the element has fully left the scrollport (scaled down and transparent).<\/li>\n<\/ul>\n<p>This approach allows us to animate the element\u2019s behavior smoothly as it both enters and leaves the scrollport, all within a single <code>@keyframes<\/code> block.<\/p>\n<h3 id=\"named-view-timeline-and-timeline-scope\">Named <code>view-timeline<\/code> And <code>timeline-scope<\/code><\/h3>\n<p>The concept of using <code>view-timeline<\/code> with named timelines and linking them across different elements can truly expand the possibilities for scroll-driven animations. In this case, we are linking the scroll-driven animation of images with the animations of unrelated paragraphs in the DOM structure by using <strong>a named <code>view-timeline<\/code> and <code>timeline-scope<\/code><\/strong>.<\/p>\n<p>The <code>view-timeline<\/code> property works similarly to the <code>scroll-timeline<\/code> property. It\u2019s the shorthand for declaring the <code>view-timeline-name<\/code> and <code>view-timeline-axis<\/code> properties in one line. However, the difference from <code>scroll-timeline<\/code> is that we can link the animation of an element when the linked elements enter the scrollport. I took the previous demo and added an animation to the paragraphs so you can see how the opacity of the text is animated when scrolling the images on the left:<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"KwPMrBP\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [View-timeline, timeline-scope [forked]](https:\/\/codepen.io\/smashingmag\/pen\/KwPMrBP) by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/KwPMrBP\">View-timeline, timeline-scope [forked]<\/a> by <a href=\"https:\/\/codepen.io\/marianab\">Mariana Beldi<\/a>.<\/figcaption><\/figure>\n<p>This one looks a bit verbose, but I found it hard to come up with a better example to show the power of it. Each image in the vertical scroll container is assigned a named <code>view-timeline<\/code> with a unique identifier:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.vertical-scroll-container img:nth-of-type(1) { view-timeline: --one; }\n.vertical-scroll-container img:nth-of-type(2) { view-timeline: --two; }\n.vertical-scroll-container img:nth-of-type(3) { view-timeline: --three; }\n.vertical-scroll-container img:nth-of-type(4) { view-timeline: --four; }\n<\/code><\/pre>\n<\/div>\n<p>This makes the scroll timeline of each image have its own custom name, such as <code>--one<\/code> for the first image, <code>--two<\/code> for the second, and so on.<\/p>\n<p>Next, we connect the animations of the paragraphs to the named timelines of the images. The corresponding paragraph should animate when the images enter the scrollport:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">.vertical-text p:nth-of-type(1) { animation-timeline: --one; }\n.vertical-text p:nth-of-type(2) { animation-timeline: --two; }\n.vertical-text p:nth-of-type(3) { animation-timeline: --three; }\n.vertical-text p:nth-of-type(4) { animation-timeline: --four; }\n<\/code><\/pre>\n<\/div>\n<p>However, since the images and paragraphs are not directly related in the DOM, we need to declare a <code>timeline-scope<\/code> on their common ancestor. This ensures that the named timelines (<code>--one<\/code>, <code>--two<\/code>, and so on) can be referenced and shared between the elements:<\/p>\n<pre><code class=\"language-css\">.porto {\n \/* ... *\/\n timeline-scope: --one, --two, --three, --four;\n}\n<\/code><\/pre>\n<p>By declaring the <code>timeline-scope<\/code> with all the named timelines (<code>--one<\/code>, <code>\u2014two<\/code>, <code>--three<\/code>, <code>--four<\/code>), both the images and the paragraphs can participate in the same scroll-timeline logic, despite being in separate parts of the DOM tree.<\/p>\n<h2 id=\"final-notes\">Final Notes<\/h2>\n<p>We\u2019ve covered the vast majority of what\u2019s currently defined in the <a href=\"https:\/\/drafts.csswg.org\/scroll-animations-1\/\">CSS Scroll-Driven Animations Module Leve 1 specification<\/a> today in December 2024. But I want to highlight a few key takeaways that helped me better understand these new rules that you may not get directly from the spec:<\/p>\n<ul>\n<li><strong>Scroll container essentials<\/strong><br \/>\nIt may seem obvious, but a scroll container is necessary for scroll-driven animations to work. Issues often arise when elements like text or containers are resized or when animations are tested on larger screens, causing the scrollable area to disappear.<\/li>\n<li><strong>Impact of <code>position: absolute<\/code><\/strong><br \/>\nUsing absolute positioning can sometimes interfere with the intended behavior of scroll-driven animations. The relationship between elements and their parent elements gets tricky when <code>position: absolute<\/code> is applied.<\/li>\n<li><strong>Tracking an element\u2019s initial state<\/strong><br \/>\nThe browser evaluates the element\u2019s state <em>before<\/em> any transformations (like <code>translate<\/code>) are applied. This affects when animations, particularly view timelines, begin. Your animation might trigger earlier or later than expected due to the initial state.<\/li>\n<li><strong>Avoid hiding overflow<\/strong><br \/>\nUsing <code>overflow: hidden<\/code> can disrupt the scroll-seeking mechanism in scroll-driven animations. The recommended solution is to switch to <code>overflow: clip<\/code>. Bramus has <a href=\"https:\/\/www.bram.us\/2024\/02\/14\/scroll-driven-animations-you-want-overflow-clip-not-overflow-hidden\/\">a great article about this<\/a> and <a href=\"https:\/\/www.youtube.com\/watch?v=72pUm4tQesw\">a video from Kevin Powell<\/a> also suggests that we may no longer need <code>overflow: hidden<\/code>.<\/li>\n<li><strong>Performance<\/strong><br \/>\nFor the best results, stick to animating GPU-friendly properties like transforms, opacity, and some filters. These skip the heavy lifting of recalculating layout and repainting. On the other hand, animating things like <code>width<\/code>, <code>height<\/code>, or <code>box-shadow<\/code> can slow things down since they require re-rendering. Bramus <a href=\"https:\/\/www.bram.us\/2024\/05\/30\/scroll-driven-animations-with-css-webexpo\/\">mentioned<\/a> that soon, more properties\u200a—\u200alike <code>background-color<\/code>, <code>clip-path<\/code>, <code>width<\/code>, and <code>height<\/code>\u200a—\u200awill be animatable on the compositor, making the performance even better.<\/li>\n<li><strong>Use <code>will-change<\/code> wisely<\/strong><br \/>\nLeverage this property to promote elements to the GPU, but use it sparingly. Overusing <code>will-change<\/code> can lead to excessive memory usage since the browser reserves resources even if the animations don\u2019t frequently change.<\/li>\n<li><strong>The order matters<\/strong><br \/>\nIf you are using the <code>animation<\/code> shorthand, always place the <code>animation-timeline<\/code> after it.<\/li>\n<li><strong>Progressive enhancement and accessibility<\/strong><br \/>\nCombine media queries for reduced motion preferences with the <code>@supports<\/code> rule to ensure animations only apply when the user has no motion restrictions, and the browser supports them.<\/li>\n<\/ul>\n<p>For example:<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-css\">@media screen and (prefers-reduce-motion: no-preference) {\n @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) { \n .my-class {\n animation: moveCard linear both; \n animation-timeline: view(); \n }\n } \n}\n<\/code><\/pre>\n<\/div>\n<p>My main struggle while trying to build the demos was more about CSS itself than the scroll animations. Sometimes, building the layout and generating the scroll was more difficult than applying the scroll animation. Also, some things that confused me at the beginning as the spec keeps evolving, and some of these are not there anymore (remember, it has been under development for more than five years now!):<\/p>\n<ul>\n<li><strong>x and y axes<\/strong><br \/>\nThese used to be called the \u201chorizontal\u201d and \u201cvertical\u201d axes, and while Firefox may still support the old terminology, it has been updated.<\/li>\n<li><strong>Old <code>@scroll-timeline<\/code> syntax<\/strong><br \/>\nIn the past, <code>@scroll-timeline<\/code> was used to declare scroll timelines, but this has changed in the most recent version of the spec.<\/li>\n<li><strong>Scroll-driven vs. scroll-linked animations<\/strong><br \/>\nScroll-<em>driven<\/em> animations were originally called scroll-<em>linked<\/em> animations. If you come across this older term in articles, double-check whether the content has been updated to reflect the latest spec, particularly with features like <code>timeline-scope<\/code>.<\/li>\n<\/ul>\n<h3 id=\"resources\">Resources<\/h3>\n<ul>\n<li>All demos from this article can be found <a href=\"https:\/\/codepen.io\/collection\/WvVpQR\">in this collection<\/a>, and I might include <a href=\"https:\/\/codepen.io\/marianab\/pen\/bGXdEoB\">more<\/a> as I experiment further.<\/li>\n<li>A collection of <a href=\"https:\/\/codepen.io\/collection\/aMgBZp\">demos from CodePen<\/a> that I find interesting (send me yours, and I\u2019ll include it!)<\/li>\n<li>This <a href=\"https:\/\/github.com\/w3c\/csswg-drafts\/labels\/scroll-animations-1\">GitHub repo<\/a> is where you can report issues or join discussions about scroll-driven animations.<\/li>\n<li><a href=\"https:\/\/scroll-driven-animations.style\/\">Demos, tools, videos<\/a>, and (even) more information from Bramus<\/li>\n<li>Google Chrome <a href=\"https:\/\/www.youtube.com\/playlist?list=PLNYkxOF6rcICM3ttukz9x5LCNOHfWBVnn\">video tutorial<\/a><\/li>\n<\/ul>\n<div class=\"signature\">\n <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>An Introduction\u00a0To\u00a0CSS\u00a0Scroll-Driven Animations: Scroll And View Progress Timelines An Introduction\u00a0To\u00a0CSS\u00a0Scroll-Driven […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-297","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/comments?post=297"}],"version-history":[{"count":1,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/297\/revisions"}],"predecessor-version":[{"id":298,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/297\/revisions\/298"}],"wp:attachment":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/media?parent=297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/categories?post=297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/tags?post=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}