When using set interval, we are explicitly telling the browser when we think that the animation should refresh and the frame rate that it should have. But that's not always going to line up. There's a better way to do this and it's to hand off the decision of what frame rates to use to the browser. The JavaScript event loop and the browser rendering, uh, is a pretty complex topic.

The JavaScript event loop and the browser rendering, uh, is a pretty complex topic. Luckily for us, there is an excellent, excellent talk by Jake Archibald at JSConf Asia where he covers the complexity of this event loop with really nice, uh, examples and visualizations. So I highly recommend that you watch this video because it's going to make a lot more sense afterwards. But basically on that graph, Jake shows the disparity or discrepancy between what the browser rendering can do

But basically on that graph, Jake shows the disparity or discrepancy between what the browser rendering can do and then the task that we put in the loop, just like the set timeout, uh, set interval, sorry. Sometimes, uh, we are telling to execute some code every, like we said, 60 frame per second every 16 milliseconds. But it's going to go in the loop that skips the rendering because the browser is not capable and ready to perform a rendering or a paint. And so there's a lot of loss of extra effort

and ready to perform a rendering or a paint. And so there's a lot of loss of extra effort and sometimes also we skip frames because we are not in sync. And so this talk then introduce the concept that we're going to talk in this lesson, which is request animation frame. So let's comment this out here and we are going to write this in a different manner. We'll have a function called rotate square and so in there we will do the same that we were doing.

We'll have a function called rotate square and so in there we will do the same that we were doing. So we'll increments the rotation angle and then apply the transform and then watch this. Here we are going to request animation frame, which is essentially a request to the browser to run some code only when the next iteration of an animation frame or a repaint is happening in the rendering engine. And so you can see the squiggly is here

or a repaint is happening in the rendering engine. And so you can see the squiggly is here because it's expecting something to run when the next animation frame is available. And so here we are going to pass recursively the rotate square function. We're gonna call itself whenever the browser is ready to run it again. So we've defined that function, but we need to actually call it

So we've defined that function, but we need to actually call it initially for the first time. So let's do it right here. Notice that there is no concept of, uh, refresh rate or when to rerun the animation here. Instead, we are offloading this to the browser that can make the decision based on its capability, the device capability of when it should rerun to synchronize with the browser's rendering.

the device capability of when it should rerun to synchronize with the browser's rendering. And so it looks like our animation once again is running smoothly, but this time it's synchronized with the browser. We haven't set it to 60 frame per second or whatever we wanted. We basically say, Hey, I want the most, uh, fluid and smooth animation based on what you're capable of doing. Please go ahead and then request animation framed. That's just that it calls itself every time

Please go ahead and then request animation framed. That's just that it calls itself every time that there is a rendering cycle about to happen. And so back to Jake's talk, you can see that we had a set interval on the left here, uh, and sometimes it was out of sync with what the rendering engine can do, but request animation frame sits right with the rendering behavior of the browser. And so it's always going to be in sync.

with the rendering behavior of the browser. And so it's always going to be in sync. And so whenever that door is closed here, uh, the loop is not running in the void. It's always going to be only operated whenever it makes sense and the browser can do, which leads to not skipping frames, not having extra loops where we do work for nothing and so much more performance animations. Also, when you are away from this tab in the browser

and so much more performance animations. Also, when you are away from this tab in the browser and visiting something else, uh, the browser is able to say, Hey, we don't need to run this 60 times per second. Nobody's looking at it. And so it can sort of pose or slow down the animation frequency, which has impact on the device battery, uh, electricity bill and a lot of things. So request animation frame is much more performant

electricity bill and a lot of things. So request animation frame is much more performant and recommended than using set interval. And if you wanted to honor the max rotation like we were doing, uh, down here, well you could wrap this in a opposite check. If the rotation is lower than the max rotation allowed, let's call request animation frame. And now when we call this rotate square, the first time, it should increment by one apply the transform.

And now when we call this rotate square, the first time, it should increment by one apply the transform. This should be lower. So it's going to call itself again with the rotation of two and then 3, 4, 5, 6. And when it reaches 45, this is going to get skipped and the rotation should stop. Once again, the position of the square tells me that it's working, but because it's gonna happen so fast,

that it's working, but because it's gonna happen so fast, maybe let's change the max rotation to 360 degrees. So here I'll go 360. And so the square should perform a full rotation. So 1, 2, 3, and four and it's going to stop there. So there you have it. Whenever you find yourself wanting to modify something in the do,

Whenever you find yourself wanting to modify something in the do, and this should play nice with the browsers rendering frame rate, use request, animation frame. Once again, I cannot stress enough. You should go and watch Jake Archibald talk. It's really, really good at helping you understand the event loop and how request animation frame lines up with the browser rendering.

loop and how request animation frame lines up with the browser rendering. Super cool talk. Uh, alright, with all that said, we are now going to move to the web animation API, which is a much more declarative way to orchestrate animations than the manual imperative way of using set interval or request animation frame.