Before we continue a really quick video, hopefully I wanna show you how you can get information from the current animation instead of setting values like we've done so far. Okay, so up to this point we have told the animation to play to post to reverse. And we have told the animation what uh, current time it should have or what playback rate it should have. The only getter action that we've done is get the duration

or what playback rate it should have. The only getter action that we've done is get the duration of the animation, but that's sort of static information. We just getting values from the options that are never going to change. The duration is always going to be 3000 milliseconds. What I want to do now is get information on the current state of an animation. So I wanna say, hey, right now this very split second frame, what is your progress from zero to a hundred?

So I wanna say, hey, right now this very split second frame, what is your progress from zero to a hundred? For example? So in our template, after the control buttons and sliders, let's have a paragraph. The current progress of the animation is, and here I'll have a span element. Let's give it an ID of progress. That's what I meant. Thank you. And we are going to leave that value blank. And so now we're going to try to use the web animation API to figure out the current progress of the animation

And so now we're going to try to use the web animation API to figure out the current progress of the animation and put the value inside that span. Alright, let's grab another dumb element. And I know copilot knows exactly what I want Progress text, which is this progress span as a span element. I just wanna call it progress. And so if I want to put some text inside the span, I can do progress. That inner text doesn't need

I can do progress. That inner text doesn't need to be HTML, it can be just text. And yeah, if I set it to 0% like this, you can see that it's now saying the current progress of the animation is 0%, which is obviously not true. Before we continue, I cannot handle this. I need to add some margin top to the paragraph. Please forgive me, I'll be super quick. Just animation CSS. And there's only one paragraph tag on this site.

Please forgive me, I'll be super quick. Just animation CSS. And there's only one paragraph tag on this site. So I will go margin top one rem. This is horrible CSS, but the result is magnificent. So why don't we use request animation frame that we've learned about here to update this value in the span every time that it makes sense for the browser. So let's have a function update progress and here is the key moment.

So let's have a function update progress and here is the key moment. Constant current progress equals, and we can grab this from the animation that effect that this time gets computed timing. And so this computed timing is going to give us the calculated timing properties for the animation. And as the surprise buster is showing us one of these values is the progress.

And as the surprise buster is showing us one of these values is the progress. So let's grab that. So that can be a number or null or undefined. And so if we do have a current progress, so if it's not null or undefined, we are going to want to update our progress span. Uh, I wish now that I called it like co-pilot suggested progress text. Actually let's do this progress text. Ah, ai.

suggested progress text. Actually let's do this progress text. Ah, ai. You always know, not always. So here this is progress text. And so inside here if we do have a current progress, let's set the progress text. That's inner text to stop running everything for now the current progress. But uh, it looks like current progress is a number and uh, in text wants a string. So we can't two string that number. So everyone is happy.

and uh, in text wants a string. So we can't two string that number. So everyone is happy. And so I'm not sure this is a great idea, but we want to update this value as often as we can so it reflects the true progress of the animation. And this is where we are using request animation frame. I'm going to check with the browser. Hey, when is the next available animation frame when that happens, may you please call the update progress function.

that happens, may you please call the update progress function. This is exactly the setup we had a few lessons ago. And so the last thing we need to do is call that function initially to start the loop, I guess. So let's call update progress here and looks like we cooking with fire, but there's a lot of smoke and we might need to do a bit of catering to have some better flames here.

and we might need to do a bit of catering to have some better flames here. As you can see, the value goes from zero to one with a huge amount of decimals. Uh, we want a percentage, so maybe we can multiply this by a hundred and then format it nicely. And so we could do the calculation inside here in the inner text, uh, change. But what don't we have here? Cons, current progress text equals,

But what don't we have here? Cons, current progress text equals, and here we will have the current progress times 100. And then if we coerce this to a string by adding a percentage string here, JavaScript is going to turn this number into a string. So here we should be able to change this to current progress text. This is going to get us a little bit closer, so the percentage value is now correct,

This is going to get us a little bit closer, so the percentage value is now correct, but we have these crazy decimals we should probably get rid of. We actually don't need any decimals. 73% is good enough. I don't need to care if it's 73.1 or 0.7. So maybe we can wrap this calculation in a two fixed, which is going to give us a full number. And voila, we have a perfect representation of the progress. And to test that it's perfect.

And voila, we have a perfect representation of the progress. And to test that it's perfect. I'm going to pose the animation and start scrubbing through. And as you can see, because we are setting the current time, which is responsible for the progress, it's going to update the animation's internal, uh, value that you get in, get computed timing, which is uh, then injected in the span. So we've got all these things working together and this is where you've clearly crossed the line of

So we've got all these things working together and this is where you've clearly crossed the line of what you could do with just CSS. So JavaScript gives you superpowers to interface with the user's interaction, the mouse movements, the slider input form elements. Uh, with just scratching the surface, you could do so many other calculations that you pass to the key frames or the duration options. As you can imagine, you've got lot more power

or the duration options. As you can imagine, you've got lot more power and this is a reason why you would use the web animations API instead of pure CSS key frames.