- Messages
- 4,792
- Reaction score
- 1,139
- Points
- 168
CSS animations have come a long way since Apple first introduced them to the web in 2007. What started as simple effects like animating from one color to another has turned into beautiful, complex images twisting and flying across the page.
But linking these animations to user behavior like scrolling has traditionally required third-party libraries and a fair bit of JavaScript, which adds some complexity to your code. But now, we can make those animations scroll-driven with nothing more than a few lines of CSS.
Scroll-driven animations have increased browser support and are available in Safari 26 beta, making it easier for you to create eye-catching effects on your page. Let me show you how.
First, let’s break down the components of a scroll-driven animation.
A scroll-driven animation has three parts:
The first, the target, can be whatever you want to move on your page, styled to your heart’s content.
The second, the keyframes, are the classic CSS animation that’s been around for years. Creating amazing scroll-driven animations largely depends on how great your animation is. If you’re new to CSS animations, check out MDN’s resource.
The third part, the timeline, might be less familiar, but it’s an important part of scroll-driven animation. Let’s explore it in more detail.
If I have an animation using the default timeline, it animates as time moves forward. If I start with a green circle and I want to animate a color change using the default timeline, then I might make it turn red in the first second, then blue a second later, then yellow on the third. The colors animate with time.
This is the way animations have worked for years. Then, the animation-timelineproperty was introduced as part of the CSS Animations Level 2 spec in June 2023. That allowed us to think of other things that might impact animation besides the passing of time, like a user scrolling up and down our webpage, and made scroll-driven animations possible.
With scroll-driven animations, we’re no longer using time. Instead, we have two new types of timelines to work with: scroll and view.
If the user starts scrolling, the movement begins. The moment the scroll stops, the movement stops too. It’s this new timeline that creates that link between scrolling and animation.
A common way to demonstrate how scroll-driven animations work is by creating a progress bar. In reality, since you already have scroll bars, you don’t need a progress bar like this, but it’s an easy-to-follow example, so let’s go with it.
The first thing to do is create my target, the element that we’re going to animate.
Let’s build that target as part of my website for a coding school, the A-School of Code. If we were to create a progress bar at the bottom of our page, we might add it as a pseudo-element of our footer. We want it to start at the bottom left and progress to the right.
For more regarding this guide, Webkit’s very own, Saron Yitbarek discusses it further:
webkit.org
What are your thoughts on scroll driven animations? Will you be implementing this feature on one day on your designs?
But linking these animations to user behavior like scrolling has traditionally required third-party libraries and a fair bit of JavaScript, which adds some complexity to your code. But now, we can make those animations scroll-driven with nothing more than a few lines of CSS.
Scroll-driven animations have increased browser support and are available in Safari 26 beta, making it easier for you to create eye-catching effects on your page. Let me show you how.
First, let’s break down the components of a scroll-driven animation.
A scroll-driven animation has three parts:
- the target: the thing on the page that we’re animating
- the keyframes: what happens to the element when the user scrolls
- the timeline: what determines whether the animation proceeds
The first, the target, can be whatever you want to move on your page, styled to your heart’s content.
The second, the keyframes, are the classic CSS animation that’s been around for years. Creating amazing scroll-driven animations largely depends on how great your animation is. If you’re new to CSS animations, check out MDN’s resource.
The third part, the timeline, might be less familiar, but it’s an important part of scroll-driven animation. Let’s explore it in more detail.
What are timelines?
Animations have a beginning, middle, and end, moving sequentially along a timeline. The default timeline on the web is called the document timeline and it’s time-based. That means that as time passes, the timeline progresses as well.If I have an animation using the default timeline, it animates as time moves forward. If I start with a green circle and I want to animate a color change using the default timeline, then I might make it turn red in the first second, then blue a second later, then yellow on the third. The colors animate with time.
This is the way animations have worked for years. Then, the animation-timelineproperty was introduced as part of the CSS Animations Level 2 spec in June 2023. That allowed us to think of other things that might impact animation besides the passing of time, like a user scrolling up and down our webpage, and made scroll-driven animations possible.
With scroll-driven animations, we’re no longer using time. Instead, we have two new types of timelines to work with: scroll and view.
scroll()
With scroll timelines, the animation doesn’t progress with time — it progresses based on the user’s scroll.If the user starts scrolling, the movement begins. The moment the scroll stops, the movement stops too. It’s this new timeline that creates that link between scrolling and animation.
A common way to demonstrate how scroll-driven animations work is by creating a progress bar. In reality, since you already have scroll bars, you don’t need a progress bar like this, but it’s an easy-to-follow example, so let’s go with it.
The first thing to do is create my target, the element that we’re going to animate.
Let’s build that target as part of my website for a coding school, the A-School of Code. If we were to create a progress bar at the bottom of our page, we might add it as a pseudo-element of our footer. We want it to start at the bottom left and progress to the right.
For more regarding this guide, Webkit’s very own, Saron Yitbarek discusses it further:
A guide to Scroll-driven Animations with just CSS
CSS animations have come a long way since Apple first introduced them to the web in 2007.
What are your thoughts on scroll driven animations? Will you be implementing this feature on one day on your designs?