Rendering Solution

[00:00:00]
>> This one is challenging if you've never seen a request animation frame. So, if nothing else, it's a good example of how you'd move something smoothly into the dom which is something you would probably have to do as a UI engineer. So let's start with this function. And we'll call it move elements.

[00:00:18]
And it takes the duration. Takes the distance, and it takes an element. Okay, in this one we're not returning anything necessarily because that's not the point of this function. Everything we do is going to update the dom. It's gonna update the element itself. So we don't actually have to return anything.

[00:00:40]
But in this case, I wanna use request animation to call the element, find out where that element is, and then move it incrementally based on the duration that I wanna move over. So the first thing I'm gonna do is I'm gonna call request animation frame. Which again, is a function that is available on the window.

[00:01:04]
So it's there, if you go in your console and type request animation frame, it'll pop right up. And I wanna start off by moving. I wanna call this function. I'm gonna call this function in and we'll call it, let's get creative here, we'll call it move. And this is my workhorse, this is where all the logic is gonna be.

[00:01:27]
requestAnimationFrame is just a callback, if you will, or move is technically a callback. So requestAnimationFrame, we're gonna call move on this. So this will invoke this function the first time around. And what I wanna do is because I'm moving something over a duration, we'll say const. We'll get the start time equals performance.now.

[00:01:50]
You can also do new date. It doesn't really matter. I like performance.now cuz it's pretty short in syntax. That's gonna give me the time that this animation started. When requestAnimationFrame calls a function, it also passes in a high-resolution DOM timestamp. That is the actual name of the thing, wait.

[00:02:08]
I can see people don't believe me. Let's see, high-resolution timestamp. See it's a real thing, Dom High Res Time Stamp. I don't know, there's some skeptics out there, I know. But, we know that it's gonna be somewhere along the lines of performance unknown in terms of accuracy and in terms of moving.

[00:02:31]
Because requestAnimationFrame is almost always used to animate something. So I'm gonna say Timestamp, we'll call it current time. Okay, what's the next way I think of this problem? Well, requestAnimationFrame is gonna call move one time. And then that's it. So we need requestAnimationFrame to call move again. So it's gonna keep referencing itself until some condition is met.

[00:03:03]
So I wanna wrap this in an if statement because we don't want it to continually call over and over and over again. We'll say if something, we'll come back to that. All right. So now we have an animation loop of sorts. It's not doing anything, but it will call itself over and over and over again to move in elements.

[00:03:20]
What do we want to do next? We want to actually move the element right. And how would we do that in JavaScript? We can say elements.style. And we're gonna run a transform equals, we're gonna wanna translate x. And we're gonna wanna move it some distance. So, we don't actually know the distance yet, so I'll leave that blank.

[00:03:53]
And that's gonna be in pixels. This sounding familiar to anybody? You've done it, you've probably done it in CSS. Doing it in JavaScript is very similar, it's just different names of things. Now you're troopers, you're all hanging in there. All right, this is where the math comes in and it's not pleasant, I'm kidding.

[00:04:15]
It's just a way of how you think about it. So given a duration, distance, and time, how do we calculate out, what's the rough formula to figure out how much we should move per loop? Well let's start with let's start with elapsed. Let's figure out how much time has passed and then we can use that to calculate the distance that we need.

[00:04:43]
Okay. Pretty follow so far to get the elapsed time we take, what time is it now? What time did we start? We started at 4 o'clock and it's now 4:05, five minutes have elapsed. That's what elapsed time is gonna give us, okay. So to get the progress, this is were the mathy part comes in.

[00:05:06]
Hm. We can say how much time has elapsed over the total duration. So what's the ratio of how much time has been spent versus how much time we want to spend. That gives us the progress. Good so far? This is why, if you got to figure out the animation loop, I'd say you're doing pretty well so far.

[00:05:35]
The mathy part is where it gets a little tricky. And honestly, this is where I got flustered because I just got stuck and I couldn't figure out the math part. I just conceptually couldn't do it. That's okay. It's going to happen. I think if you demonstrate a good effort, most interviewers will be like okay.

[00:05:50]
They didn't get quite the formula but if they had a real coding they would probably figure this out. Like you can figure out the distance and the stuff like that. So next thing we want to figure out is, we want to figure out what goes in here. How much should we move it on every single loop?

[00:06:04]
So I'll call that amounts to move. And so for that we can say, we'll figure out. We have now the progress is essentially a ratio of how much has elapsed. So if we multiply that ratio times the distance that we want to move. we can get, Yeah. The math is tricky conceptually.

[00:06:39]
So it helps to say, all right, we gotta last, five minutes have elapsed. I'm just using minutes cuz it's easier. Five seconds have elapsed. So we get the ratio of how much has elapsed versus how much should elapse. So 5 seconds over, we'll say, 500 milliseconds, what is that?

[00:06:57]
That's 1%, 10%, okay, wait, is that 10%, yes, okay. Don't judge me. 500 [LAUGH], 5 over 500. All right, so it's 1%. So at this point I want 1% of the distance because that's how much should be moving. And then that's the amount to move in pixels. Okay, so it's all about changing your thinking in this particular scenario.

[00:07:28]
I didn't, and I got hung up on the math and it got me. So, we still need to exit at some point because if we don't cross that many streams, we can keep going over and over and over to the keep moving and moving and moving. So I can say if the amount to move is less than the distance that we're actually supposed to move, then call it again.

[00:07:48]
And once that amountToMove has gone over, it's greater than the distance, then we don't call it anymore, and we're done. And that's how to move an element using requestAnimationFrame. And when you do it, it's gonna be very smooth, it's gonna be like [SOUND] and then it's gonna stop.

[00:08:01]
Now if you're thinking, how do I get it to move quickly? And then I can move it quickly, which would be like easing some sort of easing function that gives move quickly and then slow down at the end or start slow and move really quick. Which, I wouldn't necessarily ask you to in a technical interview, but that's because it's more math heavy, we would change how we calculate this formula for the amount to move.

[00:08:24]
All right, all right. Home stretch, we're almost there. Nice job, if you solved this one, really good, this one's a little tricky. But the main part I want you to take away is requestAnimationFrame, for doing any sort of movement. Someone says, hey, how do you animate this thing?

[00:08:42]
Just say, requestAnimationFrame. Could you do this in a for-loop, absolutely. Will it be smooth, no. That's always the trick, movement, requestAnimationFrame.