Scroll wheels on a computer mouse

Scroll Driven Animations

What it is and what it can do. In short.

Have you noticed that this text appears in the viewport slightly faster than the scrolling speed? And the elements in the hero section have some parallax and blur effects while scrolling? That's what this page is about.

When you scroll up and down this page, you'll notice various effects:

Now that you know what to look out for, go ahead and scroll around!

In order to understand this content, you should already be familiar with CSS animations and the vh unit, or understand the basic principles of those.

Browser supports is... not widely available, keep that in mind.

What's needed?

The base for all scroll-driven animations are regular CSS animations; the ones we've been using for a while now. Using @keyframes we define a start appearance and an end appearance. For example:

.element {
	animation-name: make_wider;
	animation-duration: 500ms;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

@keyframes make_wider {
	0% {
		width: 0;
	}
	100% {
		width: 100%;
	}
}

This would create an animation, where our elements gets wider. From 0 to 100%.

Enter animation-timeline

To create a scroll-driven animation, we need the CSS property animation-timeline.

Specifically, this:

.element {
	animation-name: appear_from_bottom;
	animation-timeline: scroll(root);
}

This tells the browser that our animations doesn't have a runtine in seconds or milliseconds, but that our timeline is based on the scroll location.

That's it. You can see this in action with our scroll progress bar at the bottom (#scroll-progress-bar). The further you've scrolled, the wider the progress bar gets. At the start, it's 0, and when users reach the end of the page, it fills the whole area.

Introducing Range

Alright, we now have the ability to animate an element based on the scroll progress of the user. But until now, we were only able to to animate based on the scroll progress of the entire document.

animation-range changes that.

Whit this, we can define the range, in which the animation should happen in between. Let's try this with an example:

.element {
	animation-name: appear_from_bottom;
	animation-timeline: scroll(root);
	animation-range: 0 100vh;;
}

This tells the browser, that we want the element to be animated between 0 and 100vh. So, the animations starts right away the users start scrolling, but the animation ends, once the users scrolled 100vh. You can see this in action in the hero-image, where the title scrolls away slightly slower, until you've scrolled 75vh. Then it scrolls away regularly.

.hero h1 {
	margin-block: 0;
	animation-timeline: scroll(root);
	animation-range: 0vh 75vh;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-name: hero_title_move;
}

Maybe you've already guessed, where this is going. Just with regular animations, where we use seconds or milliseconds to define the speed of an animation, we can use animation-range to define the "speed" and timeline for our scroll-driven animation.

Possible use cases

How you're going to use this, is entirely up to you. Go wild! Or rather, don't go too wild: often, less is more ;-) There are multiple scroll-driven animations used on this very page, as you've seen in list showing the various effects.

As of right now, there is a lot of potential with some hero sections on websites, where we all too often rely on JavaScript to achieve some dynamic and scroll-based effects.

While writing this article and thinking of possible animations, I tried to achieve something I've always found a little frustrating: To style an element differently, when it gets sticky. Maybe, there will be something for exactly this: State Container Queries, but as of now, we would always have to use JavaScript. By adding/removing a CSS class or styles, for example, using the scroll() method or the Intersection Observer API.

But using CSS scroll-driven animations, I was able to achieve the desired solution. Initially, the Table of Contents Navigation has no special styling. But once it hits the upper edge of the browser window, the styling changes. It even has a smooth transition in between both states.

.toc ul {
	animation-timeline: scroll(root);
	animation-fill-mode: both;
	animation-range: 100vh 110vh;
	animation-timing-function: linear;
	animation-name: toc_sticky;
}

In the code above you can see that we only start the animation, when a user has scrolled 100vh. We stop the animation at 110vh, so the animation only runs in between those 2 values. Btw, it doesn't have to be 110vh. Could be the same value as the first (100vh 100vh), then it would change instantly.

Browser Support

🙈😅

Use with caution. As of August 22, 2023, only Chrome supports this.

It's recommended, that you wrap it inside @supports, if you use it.

@supports (animation-timeline: scroll(root)) {
	#scroll-progress-bar {
		animation-timeline: scroll(root);
		animation-name: the_animation;
	}
}

Resources

This is still a draft.