Transcript from the "Rendering Exercise" Lesson
>> Now, moving subjects rapidly. Let's talk about rendering. How would I render something smoothly in a DOM? Let's say I give you a code challenge and it's move some elements from left to right by 500 pixels. How would you do that? What we, what sort of properties do we have in elements?
[00:00:23] We have positions. So, okay in CSS how would you move, how would you move an element? It's really you've done that at some point.
>> Margins, margins are the different aligning positions
>> I mean, that's not, you would move the element but you wouldn't want to move with margins because they're off the layout of the whole page.
[00:00:45] You would use position, x position, y position. x left,
>> top left,
>> top left, bottom right.
>> I and in this case we would use on giving you a hint. How do you translate because translate, unlike the calling anything else, it will not force a reflow. It essentially takes it out of the the flow of the DOM and it just moves it independently.
[00:01:08] And you've all done this in CSS. But when you're sitting on a whiteboard, it's much harder to remember all these things.
>> CSS transitions.
>> It's not bad, yeah. But if we're doing it in JAVA script, we're using request animation frame.
[00:01:48] Now what is request animation frame? Have you heard of it? All right. So request animation frame is a globally available function on the Window objects. And what it does is every time there's a render, it makes a call to requestAnimationFrame. And this is important because if we're trying to get a smooth animation, we don't want any stuttering.
[00:02:09] That means every time there's a new render, we wanna move it just a little bit more, we wanna move that element just a little bit more. And all browsers render that 60 frames a second That means in one second it's gonna call requestAnimationFrame approximately seconds. Station frame it's gonna smoothly only when the render happens.
[00:02:50] So knowing that every 16 something milliseconds request animation frame is called. That's where we wanna do all for animations. Suite our next problem. It's exactly what I described. I want you to move an elements and I gave you a hint in a real interview, they wouldn't tell you to use request Animation Frame.
[00:03:09] Let's take a look at this one. Creative function to move an element
>> The arguments are the duration. So if I want to move 500 pixels, over 10 seconds, I pass in 10,000 milliseconds or seconds doesn't really matter. I'd say the pixel so that'd be 500. And then I put in the elements and move.
[00:03:31] You could do this in CSS. If you want it to But this is a good application of data strips. It's a little math heavy. But this have to be, it depends on your approach.