In this post, we’re going to look at a really exciting new CSS feature: scroll-driven animations. We’ll take some boring, scrolling content and upgrade it to something a little more interesting. And we’ll do it all with —no JavaScript. Alright, let’s get to it! CSS https://youtu.be/PcyFYILv8TE?embedable=true Ok, so here’s what we are starting with. We’ve got this content with some basic info about NBA teams. And, when we scroll down to see the list, it looks not only a little boring but almost broken. The headers are sticky, but before they stick to the top, they have extra space next to them. As they stick, they sit next to each other and look ok. https://codepen.io/brianmtreese/pen/dyrMGBp?embedable=true Wouldn’t it be great if we could transition these as we scroll? Well, we actually can with scroll-driven animations. What are CSS Scroll-Driven animations? in CSS provide effects that used to require JavaScript to pull off. They allow us to animate items tied to their visibility within a given scroll container. And the possibilities are endless. Scroll-driven animations Using the CSS animation-timeline Property and view() Function The first thing we want to do is animate our headers so that they look better as we scroll. To do this, we start by adding the property. This is the brand-new property that makes all of this possible. animation-timeline It’s what allows us to bind animations to a scroll container as it scrolls. Now, there are many ways to use this property, but for this example, we are going to keep it simple. .title {
    animation-timeline
} We’re going to use the also brand new, function. This allows us to tie animations to the nearest parent scrolling container. Now, there are many different options we can pass to the view function, but we’re just going to pass it in the direction of the scroll that we want to animate along. In our case, it’s the block direction because that’s the way that our content scrolls. If it were scrolling horizontally, we could use inline instead. view() .title {
    animation-timeline: view(block);
} Ok, now let’s create a keyframe animation for how we want these headers to animate. What we’ll do is have the containers start at full width and animate to the final fifty percent width. So, let’s call it shrink. Ok, we’ll go from a width of one hundred percent to a width of fifty percent, but we also have a four-pixel gap between the headers when they’re pinned, so we’ll make it a and subtract half of that gap, 2px. calc Let’s also scale from eighty percent to one hundred percent. And let’s also fade it in from an opacity of zero to an opacity of one. @keyframes shrink {
    from {
        width: 100%;
        scale: 0.8;
        opacity: 0;
    }
    to {
        width: calc(50% - 2px);
        scale: 1;
        opacity: 1;
    }
} Now, let’s add this animation to our element with the animation name property. .title {
    ...
    animation-name: shrink;
} Using the CSS animation-range Property Ok, the last piece is to add an . With this property, we can define when we want our animation to begin and when we want it to end. This property is actually a shorthand for the new and values. animation-range animation-range-start animation-range-end Now, this is a little tricky to understand, but we’ll give it a value of negative ten percent for the start and forty percent for the end. entry contain .title {
    ...
    animation-range: entry -10% contain 40%;
} Wait what? You can use to explore what this means. This is a tool created by a developer relations engineer at Google. It allows us to easily see how the animation range settings work. this tool When you scroll in that example, you can see where our animation starts and ends while scrolling within the view. This tool really helped me understand how these settings work. Ok, when we go back over to our example when we scroll down, we can see our animation is applied correctly. Much better. https://codepen.io/brianmtreese/pen/PoLNNZR?embedable=true And, if we scroll slowly, we can see how the animation gets applied. As it enters the view, it’s full width, and by the time it reaches about two-thirds of the scroll height, it’s nearly fifty percent wide, fully opaque, and fully scaled in. And if we stop scrolling anywhere in here, the items freeze at their current spot in the animation. I mean, to me, this is mind-blowing. It's crazy that this is all done with a few lines of CSS. Adding Scroll Animations to the List Items Now, this isn’t looking exactly how I want it yet. I want to animate the list items on scroll as well.
For these items, I want to do the opposite of the titles. I want to start them smaller and grow them as they scroll in. So, we start by adding our animation-timeline again. We’ll use the view function again with a value of block. li {  
    animation-timeline: view(block);
} Now we add our new keyframe animation, let’s call it “grow” this time. We’ll start with a scale of eighty percent and an opacity of zero. And we’ll animate to a scale of one hundred percent and opacity of one. @keyframes grow {
    from {
        scale: 0.8;
        opacity: 0;
    }
    to {
        scale: 1;
        opacity: 1;
    }
} Now, we can add it with the animation name property. li {
    ...
    animation-name: grow;
} And, we’ll add our range. We’ll use the same value as our previous animation to start, negative ten percent, and to end, forty percent. entry contain li {
    ...
    animation-range: entry -10% contain 40%;
} Ok, so how does it look now? https://codepen.io/brianmtreese/pen/rNReeLN?embedable=true Nice, I like this effect. It looks a lot smoother than it did before the animation. Adding Scroll Animations to the Scroll Label Ok, now the last thing I want to do for this example is do something with the label that says "Scroll Down to See the List" as I scroll down. I think we should animate it out as we scroll since it’s telling us to scroll, and that’s what we’re doing. So, you know the deal by now: let’s add the animation timeline with view and block. .label {
    animation-timeline: view(block);
} Now we need another keyframe animation, this one we’ll call fadeout. It will start from a scale of one and an opacity of one. It’ll animate to a vertical translation of negative two hundred and fifty percent, a scale of eighty percent, and an opacity of zero. @keyframes fadeout {
    from {
        scale: 1;
        opacity: 1;
    }
    to {
        translate: 0 -250%;
        scale: 0.8;
        opacity: 0;
    }
} Now, we need to add it to our label element. .label {
    ...
    animation-name: fadeout;
} Then, we need to add our range. This time, it’ll be a little different. We’ll start with at zero percent, and end with at one hundred percent. contain contain .label {
    ...
    animation-range: contain 0% contain 100%;
} Ok, so how does this look now? https://codepen.io/brianmtreese/pen/MWLwdNw?embedable=true Nice, I like that better. Scroll-Driven Animations Browser Support Hopefully, this gets you going and inspires you for what’s possible with the stuff that you’re building. One last note on scroll-driven animations: browser support is not super great at the moment. Chrome and Edge are good, but they are only available behind a flag in Firefox and not at all in Safari. Hopefully, we’ll get there soon, but in the meantime, you’ll need to keep that in mind. Ok, I think that’s all for now. Until next time. Thanks for reading. Also published . here

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

A Beginner-Friendly Guide On How to Use Angular's New Control Flow Syntax

CSS Scroll-Driven Animations: A Step-by-Step Guide With No JavaScript

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

3 Contemporary CSS Techniques for Centering Items

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

3 Contemporary CSS Techniques for Centering Items

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps