Hey, this lesson we're going to be looking at cancel animation frame, so this is gives us an option
to cancel any of the request animation.
So we set up a variable object and set our request animation frame and whatever the request ID is,
then we can also set that to cancel.
So first of all, let's create some divs.
So going into our default project here, I'm going to create Div on the page.
So using the document create element and let's create that div and then within the div I'm going to
add in some text content and assign that to hello.
And also let's add in some style and color.
So make it red and div style position and set that to up absolute and then let's select the body tag
or we can select within the top and we can have it within the div there sort of const top elements and
using the document and query selector, let's select that element with a class of top and then let's
drop the div.
We're going to spend the div into the top element.
So top elements and append and we'll open the div into that.
So let's see what that looks like.
So refresh.
So there's our div and we want to do is we actually want to move the div position.
So let's set the style left position and set that to five picks and we would do 50 picks.
So start it off somewhere near the center and let's just make sure that's working.
So we've got it moved over and so we want to do is we want to increase its position.
So also let's set div and this is going to be a variable that I'm going to add in.
So let's set X and give the value of X of fifty so that we have the same variable of our left position.
So we're going to move it left and whenever the element gets clicked, then we're going to stop the
animation frame.
So that's the idea and objective for this so that we can get a better idea of how this works.
So now that we've added that element to the page, we can add in the animation frame.
So the animation frame is just going to be a function and I'll just call it mover so we don't have to
pass in any values into it.
And within mover, we're going to take whatever the value of div axis and we're going to set X to equal
to whatever the value is.
Well, we'll just do plus one and then we're going to update the style property of it.
So div style left and let's set the position to whatever div x is plus and then we need to add in the.
So this is our function that's going to move the element and also let's run that function then.
So every time.
We click it, let's let's run that let's run that function, so d'Hiv out event listener and that listener
is going to be on click and then ever it gets clicked, it's going to run the function and within this
function is going to be the the mover right now.
So just going to update this and it's going to run the function mover.
So whenever I click it, it's moving over slightly to the right.
It's adding in that one pick to that element.
So let's add in the animation frame.
So setting up the animation frame and I'll call it my anay, and this could be the animation frame.
So let's set up the request animation frame.
So what this is done, this is the window request animation frame.
So of course you don't need to include the window because that's assumed.
And what it does is it tells the browser that we wish to perform the animation and we wish to repeat
the mover function.
And then we also have to set up the request animation frame within the mover so that it will keep requesting
the animation frame.
So let's check it out.
And this is going to be moving it across.
And we actually also have to update this to let because it's not going to be an object, it's just going
to be assigned to that value.
So that will take care of and remove it that error.
So basically, it's moving it over to the right hand side.
So we need a way to stop it.
So let's update the click event and I'll just call it Storper.
And we're going to run a function, create a function that's called Storper.
We don't need to pass in any values.
And what this is going to do is this is going to cancel the animation frame so we don't need to assign
a variable to it, cancel animation frame and the animation frame that we want to cancel.
And actually we should be referencing not the function, but let's reference the assigned variable.
So the Miami.
So let's try that and click it and that stops it.
So we should also check to see if it's been clicked.
So if the animation frame is stopped, then we can also restart the animation frame.
So I'm going to set up a variable to toggle and I'll call it Torg.
So it'll be true and we'll check.
If Torg is true, then it's going to cancel the animation frame else then it's going to set Torg to
true.
And actually, we need to also talk to false here.
So the next time it gets clicked, it can start the animation.
And then we just set up the Miami variable once again and clean that up, beautify that save.
So what I've done here is I've added in togue value.
So this will allow us to toggle.
So whenever we click it the first time we click it.
If Torg is true, then it's going to cancel the animation set target to false.
If we click it again, Torg is going to be false.
So then it's going to set talk to true and set and start the animation.
So see what that works.
So I click it and click it again.
Stop, start, stop, start.
So that's how we can stop and start the animation using JavaScript.