> Markdown version of [/magazine/712-css-only-scroll-driven-animations](https://www.wearedevelopers.com/magazine/712-css-only-scroll-driven-animations). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# CSS-Only Scroll-Driven Animations

**By:** [Daniel Cranney](https://www.wearedevelopers.com/@daniel-cranney)

**Published:** March 27, 2026

Scroll-linked animations look slick, but until now it often meant writing a fair amount of JavaScript, `scroll` event listeners, `getBoundingClientRect()`, class toggling and so on, with UX benefits often offset by performance downsides.

CSS scroll-driven animations are now available natively in all major browsers, so we’ve put together an example to show a couple of great ways to make use of these features.

## Scroll-Driven Progress Bar

First, let’s create a scroll-driven progress bar

Our HTML features a simple `<div>` with the class `progress-bar`, with all the work being done in our CSS:

    @keyframes grow {
      from {
        width: 0%;
      }
      to {
        width: 100%;
      }
    }
    
    .progress-bar {
      /* ...styling above here, not relevant to our scroll animation */
      animation: grow linear;
      animation-timeline: scroll();
    }

Despite our `.progress-bar` having other styles, with just a few lines we handle our entire animation.

First, we define a `grow` animation, animating between `0%` and `100%` in width.  
We then add this to our `.progress-bar` using the `animation` property, with `linear` easing (anything else will produce strange results for this), and then finally define our `animation-timeline` as `scroll()`, to say that we should animate between our two keyframes in time with the scroll.

As a side point, `scroll()` with no arguments defaults to the nearest scrollable ancestor on the vertical axis — which in this case is just the page. You’ll sometimes see `scroll(root block)` in other examples, which is the explicit version of the same thing, in case you get confused.

## Animate-in on Scroll

Secondly, we can use CSS to create a fade-up animation, animating elements as they come into view.

We start off creating a `fade-up` animation, going from `opacity: 0` and `2rem` downwards to `opacity: 1`, in its natural position:

    @keyframes fade-up {
      from {
        opacity: 0;
        translate: 0 2rem;
      }
      to {
        opacity: 1;
        translate: 0 0;
      }
    }

Then, like we did with the progress bar, we apply it:

    p {
      animation: fade-up ease-out both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

It might look like a short of shorthand, but it’s surprisingly straight forward. The `view()` tracks each element’s own position in the viewport individually, rather than the scroll position of the whole page, so every `p` gets its own independent animation as it comes into view.

The `both` value in the animation shorthand is `animation-fill-mode: both`, which keeps the element in its from state before the animation starts, so nothing pops in before it’s supposed to.

Finally, `animation-range: entry 0% cover 40%` controls the timing window, to say trigger the moment it enters, and finish by the time it’s 40% of the way across the screen.

Those two functions are the core of the API. `scroll()` is for “how far have I scrolled?”, `view()` is for “is this element in view yet?”.

## Added Accessibility

Finally, a simple media query makes your website more accessible by allowing those who have `prefers-reduced-motion` enabled to view an animation-less version:

    @media (prefers-reduced-motion: reduce) {
      .progress-bar,
      p {
        animation: none;
      }
    }

While not every aspect is fully supported just yet [(as of publishing `scroll()` has 82% support)](https://caniuse.com/?search=scroll%28%29) it’s a great feature that’s very simple to use once you’re used to how it works.

We hope you enjoyed this article, and you can find the example [over on CodePen](https://codepen.io/Daniel-Cranney/pen/RNGGvXG) and as always [share your tips and tricks with us on socials](https://bsky.app/profile/wearedevelopers.bsky.social) for a shoutout.



## Related Articles

- [View Transition API: Adding Single-Page Transitions With Just HTML, CSS and JS](https://www.wearedevelopers.com/magazine/632-view-transition-api-adding-single-page-transitions-with-just-html-css-and-js)
- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)
- [Accessibility tip: Detecting reduced motion in one line of JavaScript](https://www.wearedevelopers.com/magazine/512-accessibility-tip-detecting-reduced-motion-in-one-line-of-javascript)
- [Building a "shoutout" component in plain HTML/CSS/JavaScript](https://www.wearedevelopers.com/magazine/556-building-a-shoutout-component-in-plain-html-css-javascript)

## Related Videos

- [A journey of a long list in React](https://www.wearedevelopers.com/videos/203-a-journey-of-a-long-list-in-react)
- [What’s New and What’s Next in Web UI](https://www.wearedevelopers.com/videos/956-what-s-new-and-what-s-next-in-web-ui)
- [Dizzy users close browsers: balancing creativity and accessibility](https://www.wearedevelopers.com/videos/803-dizzy-users-close-browsers-balancing-creativity-and-accessibility)
- [Playing Games with CSS](https://www.wearedevelopers.com/videos/210-playing-games-with-css)

## Related Jobs

- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**