scroll() | CSS-Tricks

Experimental: Check browser support before using this in production.
The scroll() function provides an anonymous scroll progress timeline based on a scroller’s position. Unlike the view() function, which animates based on an element’s position in a scrollport, the scroll() function animates based on how far elements have been scrolled along a given axis.
The scroll timeline is then used to track the user’s scroll position and determine the scroll progress accordingly. In other words, the animation is based on the user’s scroll position instead of the default timeline.
The scroll() function is defined in the Scroll-driven Animations.
Remember the scroll() function can only be used with the CSS animation-timeline property.
If you don’t provide the function with any parameters, it will automatically use the nearest scrollable ancestor (i.e., scroller) and track scrolling in the block direction by default. If a specified axis is not a scroll container, i.e, it does not have a scrollbar, the scroll() function will not work.
Behind the scenes, scroll() animations do the following:
What could be more basic than the popular scroll watcher animation? You’ve probably come across a progress element fixed at the top of the page, whose progress increases as you scroll down a webpage. This progress element was formerly achieved with the aid of JavaScript.
document.documentElement.scrollTop shows how much you’ve scrolled, scrollHeight - clientHeight gives the total scrollable height, and then you calculate the percentage and apply it to the .scroll-watcher width.
Not anymore! With just CSS, using the scroll() function, you can achieve the same effect:
Note: When using the animation shorthand, make sure to declare animation-timeline after it. The shorthand resets animation-timeline to auto, so any earlier value gets overridden.
Let’s look at a quick example. Here’s a red circle that fades in and scales up as you scroll down the page. This version uses the default behavior, so we’re not passing any arguments to scroll():
The animation is driven by vertical scrolling of the document, which in this case is also the nearest scrollable ancestor. So, the default scroll() behavior works out of the box. The block axis resolves to vertical scrolling since the text flows horizontally.
We can play around with the axis. For example, in this case, the animation is tied to horizontal scrolling instead of vertical (despite it also being present). If you set the axis to block or leave the axis parameter empty, then the animation would instead follow the vertical scrollbar by default.
I’ll be providing examples in this section, as the goal is to understand how scroll()works. However, you can check out a bunch of awesome and pretty practical examples and implementations over at Bramus’s demo site.
One of the simplest — and most effective — ways to use a scroll timeline is for a progress bar that tracks how far you’ve scrolled. In this setup, the width of the bar is directly tied to the document’s scroll progress. Since we’re tracking vertical scrolling on the root (the whole page), the default behavior of scroll() works great out of the box.
This example uses a scroll-driven animation to create a simple parallax effect. As you scroll, the .content section shifts upward by adjusting its margin. It’s a basic demo, but shows the potential for similar more complex effects.
You’ve likely seen text that reveals itself as you scroll—like a typewriter effect. We can recreate this using a scroll-driven animation that gradually changes the background size of a linear gradient. As the background expands, each character appears to be “colored in.” Using steps() and ch units makes the reveal snap cleanly, one character at a time.
Another subtle way you can incorporate the view timeline is by adding scroll shadows, especially on mobile. There’s a separate article that covers this in much more detail, but in short, here’s how it works:
This technique uses animation-timeline: scroll() with custom properties (--left-fade, --right-fade) and a CSS mask to fade out the edges of a scrollable container. The scroll progress controls how much of the fade is applied to the left and right edges of the element.
The scroll() function currently has limited availability and it’s walled behind experimental flags in some browsers. You can check for support and add some fallback using the snippet below:
The CSS scroll() function is defined in the Scroll-Driven Animations specification which is currently in Editor’s Draft status as of June 2025. That means the information in the specification can change between now and when the feature becomes a formal Candidate Recommendation, so refer to the Browser Support section before using it in a production environment.
Join our community of front-end nerds!
Andy Clarke shows you how to create designs that people recognize and remember in his brand-new e-book, Standout Designs for the Web. Pre-order it today!
Join our community of front-end nerds! You'll get into the Discord server and member-only perks and free swag.
Sign up to get front-end roundups, browser updates, and exclusive content sent to your inbox bi-weekly.
Get your t-shirts, prints, stickers, and yes, even mousepads at the brand-spankin' new CSS-Tricks store, now open.
CSS-Tricks is powered by a small team of real-life humans.
Handwritten. Twice a month. No spam. See past issues →