Optimize requestAnimationFrame

[00:00:00]
>> Matias Gonzalez: There's a little performance optimization that we could do here. We are manually creating like a request animation frame, and this is not really the best use case because let's say you have multiple places where you're using request animation frames, they will start stacking up and eventually that's going to help performance. So what you actually want is to have one global frame loop running and then just add a lot of callbacks into that unified frame loop.

[00:00:35]
Since we are using GSAP, GSAP already has a frame loop running all of the time because it's an animation library, it needs to have a frame loop. Most animation libraries have some sort of frame loop running that we can hook to. So what we can actually do is remove this request animation frame and say GSAP.ticker.add and we're going to just add our callback here, so callback.

[00:01:10]
And again, we need to clean up our useEffect, so I'm going to remove the callback if we unmount this component. So I'm going to just say GSAP.ticker.remove and then remove the callback that I just created. The reason for this, again, let's say I don't remove the callback, let's add a console log in here. This thing, it's going to still, like, I need to import GSAP.

[00:01:55]
This thing is going to still run whether or not we are on the page because we haven't removed the callback from the ticker, so let's remove it so that when we unmount this component, we'll just clean up that frame loop. So with this we have a smooth cursor attached to the GSAP frame loop. Let's type this function correctly. This function has the type of GSAP.TickerCallback and we have a couple of parameters that GSAP gives us on every frame, so we have the time available.

[00:02:45]
So that is the total time that this animation has been running for, and we also have the delta time. So again, the time is the total time since we started GSAP globally, so if I log that I can see that it will just return all of the time in seconds since we started the page. And then the delta time might be a little bit trickier to understand, but it's the time between every frame basically.

[00:03:21]
It's a time in milliseconds between every frame. This value is really, really useful when we are performing calculations on every frame because basically, let's say I am on my Mac, so I have 120 frames per second, but maybe we are seeing this animation on a different monitor that has 60 frames per second, so the animation is going to be slower because we're just performing less calculations per second.

[00:03:57]
And if we have like a performance issue and the frame rate drops, like the animation's going to slow down and then it's going to speed up again. So actually we want to make our animations relative to the delta time every time that we can, so what we usually want to do is to multiply this L value by our delta time. So we're going to grab the delta time and multiply it, let's actually make it smaller.

[00:04:29]
And with this, we see that it's working exactly the same, but if I change to another monitor that has a slower frame rate, it's going to look exactly the same. That way we can be sure that our animations run looks exactly the same on every single screen.