Animation timeline view is one of the main options. You can also use scroll, and let me show you when that could be useful. All right, so I have another example here with a bunch of texts, uh, so that the page can scroll. And we have these elements that we'll talk about in a second. And I have some basic styles for this page. Nothing really relevant to animation this time. Instead of syncing the animation to the view position,

Nothing really relevant to animation this time. Instead of syncing the animation to the view position, we want to tie it to the scroll position. So let's do a scroll progress element so that we can show how much of the page has been scrolled. I will create an element called progress Studied to position absolute top zero left zero with 100 viewport width and height. Let's go eight pixels and let's make the back ground hot pink.

Let's go eight pixels and let's make the back ground hot pink. And this element doesn't exist in the page yet. So in the page where I have all these texts, let me add here a do progress element. Alright, so let's go see if we can see that. And yep, there it is at the top, but whoops. Uh, I've made a mistake. I wanted to have it positioned, fixed, not absolute, because I wanted to stay at the top the whole time.

I wanted to have it positioned, fixed, not absolute, because I wanted to stay at the top the whole time. So I will change the position to fixed. And so now it should stick around when we scroll, which is what we want. So let's do key frame animations to animation. The width, actually the scale X, because it's more performance from zero to a hundred percent. All right, at key frames, progress seems aptly named.

zero to a hundred percent. All right, at key frames, progress seems aptly named. And we'll go from transform scale X zero. So now let's try this on the progress element. I will go animation as a test progress, two seconds linear. And let's refresh the page. And you can see the band animating. So I don't want it to start from the middle. I want to start from the left.

So I don't want it to start from the middle. I want to start from the left. So we'll change the transform origin up here, transform origin left, and now it should behave like we want. Yeah, so let's tie this progression instead of two seconds when the page loads to be based on the scroll position of the page. And just like we did before, we can do animation timeline and set it to scroll.

And just like we did before, we can do animation timeline and set it to scroll. This time once again, let's get rid of the two seconds because this is not relevant anymore. And with just that change, check out what happens when I start scrolling. Pretty cool, huh? Uh, as you can see, the animation will reach a hundred percent right as I reach the bottom of the page. Uh, and when I come back up, it'll reach 0% at the top

as I reach the bottom of the page. Uh, and when I come back up, it'll reach 0% at the top of the page here, it's connected to the whole page scroll, because basically the first parent scroll container is the HTML element. But if you had another nested scroll container, this would attach to this. This is precisely why I have this other example down there. Here, this is also a scroll container. And so I'll show you that we can have an animation

Here, this is also a scroll container. And so I'll show you that we can have an animation that listens to this scroll bar, this little element here instead of the whole page. So you can see here I have this scroll container and then an inner element that adds some margin and then a square. And so this scroll container has this overflow y of scroll, and then the inner element adds a margin. So what we wanna do is add an animation on the square here

and then the inner element adds a margin. So what we wanna do is add an animation on the square here while we are scrolling the scroll container element. So let me make some new key frames. I'll call this one add key frames spin. And let's do a little quarter of a turn when we scroll. So two, transform, rotate, but I only want zero point 25 turns, which is 90 degrees. And then let's try to apply this to a square here. So animation spin two seconds.

And then let's try to apply this to a square here. So animation spin two seconds. So let's refresh the page and yep, it seems to be working. So let's connect it with the scroll animation timeline scroll. And so that's going to look for the first parent scroll container. And this in this case is going to be this one here. And as a result, the animation is not going to be tied to the page scroll, but to this element scroll.

And as a result, the animation is not going to be tied to the page scroll, but to this element scroll. So whenever I scroll, you can see the rotation occurs between the start and the end of the scroll of this parent container. By the way, in chrome dev tools, you can see what elements are scroll containers. You can see the HTML. Here is a scroll container. And then if I go inside the scroll container, it also is going to be a scroll element.

And then if I go inside the scroll container, it also is going to be a scroll element. This is why the square scroll animation timeline is linked to this scroll where the progress is going. To the parent HTML element scroll, by the way, you can change this behavior. So here, if I check for the values available, you can see here scroll that the function parameters allow you to select what scroller you want the animation to be listening to.

that the function parameters allow you to select what scroller you want the animation to be listening to. Alright? There's a lot more I could say about animation timeline. There's a lot you can do with it. It's super cool and I highly encourage you to dig into it. I'll see you in the next video.