The next thing I wanna show you is how you can connect the progress of the animation to the scroll position of the page. So this one is not fully supported across all major browsers just yet, but it's coming very soon and I really think you should know about it. So I have here an example with a bunch of shapes on the page and as I scroll you will see that there are a lot more shapes. And what we wanna do is to have some sort

that there are a lot more shapes. And what we wanna do is to have some sort of enter animation here where the shape sort of scale up and fade in as they enter. So here's the CSS file for it. You can see the different shapes with the stars. And let's create some key frame animations. So at key frames, and we can call this one reveal. And we want to animate from the state where we have an opacity of zero

And we want to animate from the state where we have an opacity of zero and we are going to have a transform. And yeah, let's translate by 20 pixels from the bottom, but also scale from 0.8. And so now let's go in our shape, which represents all the shapes. By the way, here's the markup for it. So you can see that all our shapes have the shape class and then a modifier for shape one, two, or three.

So you can see that all our shapes have the shape class and then a modifier for shape one, two, or three. So we want to put the animation on the shape element so all shapes have it. And so here I will go animation reveal. And let's go two seconds. We just wanted to animate once we can keep the default easing. So that's all we need. All right, let's take a look. So I will refresh the page

So that's all we need. All right, let's take a look. So I will refresh the page and yep, all the shapes are animated instantly. Now I will try to scroll while the page is loading and you can see that every single shape is animating from the start, even if we couldn't see them because they're below on the scroll position. And this is precisely where the new CSS property I wanna show you can be super useful.

where the new CSS property I wanna show you can be super useful. And I'm talking about animation timeline. Like I said, animation timeline is not fully supported just yet. You can see that Firefox and Safari are yet to implement it, but it's definitely coming. And let me show you how it works. It's pretty simple and super powerful. So here also in the shape class, I will go animation

It's pretty simple and super powerful. So here also in the shape class, I will go animation timeline and there are a few options, but here I want to use the view keyword or the view function. And as the name suggests, that's going to put the progress of the animation on the timeline, which is related to whether the element is in view or not. So it's good practice, even if it's still gonna work without doing that

So it's good practice, even if it's still gonna work without doing that to remove the duration in the animation because this is not going to be linked to a duration anymore. It's going to be linked to this crawl position. Check it out. I haven't refreshed the page and we can already see something happening here. The bottom squares are faded out and a little bit lower. Now remember we animating the translates why position

The bottom squares are faded out and a little bit lower. Now remember we animating the translates why position and the scale and opacity. And it looks like the top squares are fully animated. The middle ones are halfway through and the bottom ones are just started. And let's start scrolling and wow, see what happens. This is very cool. The elements, uh, even if I go back up will animate based on whether

The elements, uh, even if I go back up will animate based on whether they're in view or not. Now if you pay attention, it looks like the animation starts as soon as the elements enter the view port and it looks like it gets complete by the time they have reached the top. So basically the coverage of the viewport from the bottom to the top is the sequence or the window for the animation to occur.

to the top is the sequence or the window for the animation to occur. Now you can actually customize this range where the animation takes place and it's aptly name animation range, which if you want you can break in start and end and the default values will be cover. So let's go start and end cover. And so this is going to behave exactly like what you've seen just before.

And so this is going to behave exactly like what you've seen just before. But now if I was to define the range starts to start at 40% of the appearance in the view port and the end to 60%, the animation will look very different. And you can see that we have some sort of a glitch and hopefully you understand what's happening and how we can fix it here. And so if you thought of animation fill mode, you're correct.

And so if you thought of animation fill mode, you're correct. The animation shows the finish state before it starts animating. And so we want to change the animation fill mode to make it work properly. And here I can go animation fill mode. And because we support scrolling up and down, we actually want to use both here. Okay, so remember we try

and down, we actually want to use both here. Okay, so remember we try to start the animation at 40% scroll in the viewport and end it at 60%. So what I'm expecting is the animation to happen fairly quickly in the narrow bands between the bottom 40% and the top 40%. So let's take a look and yep, this is exactly what's happening now. Let me show you a very cool and useful website.

and yep, this is exactly what's happening now. Let me show you a very cool and useful website. It's called scroll Driven Animations and it's built by Braus from the chrome dev team. And uh, there is some useful tools including this timeline range visualizer. And so you can see here that it's going to show you from where to where the animation will occur. So if we have set it to cover, to cover the animation, you can see the red box at the bottom here will start

So if we have set it to cover, to cover the animation, you can see the red box at the bottom here will start as soon as it starts entering the viewport here. And then the animation will finish when it's completely out of the viewport. So you can play around with other options like contain, which is sort of the same concept, but the shape has to be completely in the viewport. So the start will start when it's fully in the viewport fully contained and exit at fully contained.

So the start will start when it's fully in the viewport fully contained and exit at fully contained. Alright, let's uh, try something else entry. And this is going to feel like the cover, but just know that you can use the entry for the exit. So it allows you to use the bottom edge for the exit or the end of the animation, if that makes sense. And then you can play with values. So if you wanted an element to animate super quick from the moment it starts entering

So if you wanted an element to animate super quick from the moment it starts entering to when it's halfway entered like this, you will see that now the animation will happen really quickly between enter and halfway in the viewport. So here, if we were trying to use entry and then entry 50%, well the enter animation is going to happen really quickly. So as soon as an element starts entering, you can see the animation

So as soon as an element starts entering, you can see the animation and it's done when the elements are halfway, uh, entered in the viewport. So you can really fine tune and control your animation the way you want. And this is very, very useful, powerful, and super easy to use.