1 00:00:00,060 --> 00:00:06,240 Hey, this lesson we're going to be looking at cancel animation frame, so this is gives us an option 2 00:00:06,240 --> 00:00:09,430 to cancel any of the request animation. 3 00:00:09,460 --> 00:00:16,770 So we set up a variable object and set our request animation frame and whatever the request ID is, 4 00:00:16,920 --> 00:00:19,470 then we can also set that to cancel. 5 00:00:19,500 --> 00:00:21,450 So first of all, let's create some divs. 6 00:00:21,690 --> 00:00:26,880 So going into our default project here, I'm going to create Div on the page. 7 00:00:27,150 --> 00:00:36,150 So using the document create element and let's create that div and then within the div I'm going to 8 00:00:36,150 --> 00:00:40,550 add in some text content and assign that to hello. 9 00:00:42,270 --> 00:00:48,580 And also let's add in some style and color. 10 00:00:49,520 --> 00:01:02,340 So make it red and div style position and set that to up absolute and then let's select the body tag 11 00:01:02,790 --> 00:01:11,280 or we can select within the top and we can have it within the div there sort of const top elements and 12 00:01:11,280 --> 00:01:20,130 using the document and query selector, let's select that element with a class of top and then let's 13 00:01:20,130 --> 00:01:21,380 drop the div. 14 00:01:21,390 --> 00:01:24,390 We're going to spend the div into the top element. 15 00:01:24,780 --> 00:01:31,960 So top elements and append and we'll open the div into that. 16 00:01:32,310 --> 00:01:33,390 So let's see what that looks like. 17 00:01:33,420 --> 00:01:34,170 So refresh. 18 00:01:34,170 --> 00:01:39,300 So there's our div and we want to do is we actually want to move the div position. 19 00:01:39,320 --> 00:01:49,900 So let's set the style left position and set that to five picks and we would do 50 picks. 20 00:01:49,950 --> 00:01:54,340 So start it off somewhere near the center and let's just make sure that's working. 21 00:01:54,750 --> 00:01:59,790 So we've got it moved over and so we want to do is we want to increase its position. 22 00:02:00,240 --> 00:02:05,640 So also let's set div and this is going to be a variable that I'm going to add in. 23 00:02:05,790 --> 00:02:14,180 So let's set X and give the value of X of fifty so that we have the same variable of our left position. 24 00:02:14,490 --> 00:02:19,500 So we're going to move it left and whenever the element gets clicked, then we're going to stop the 25 00:02:19,500 --> 00:02:20,490 animation frame. 26 00:02:20,500 --> 00:02:25,450 So that's the idea and objective for this so that we can get a better idea of how this works. 27 00:02:25,890 --> 00:02:31,800 So now that we've added that element to the page, we can add in the animation frame. 28 00:02:32,610 --> 00:02:38,490 So the animation frame is just going to be a function and I'll just call it mover so we don't have to 29 00:02:38,490 --> 00:02:40,170 pass in any values into it. 30 00:02:40,440 --> 00:02:48,780 And within mover, we're going to take whatever the value of div axis and we're going to set X to equal 31 00:02:48,780 --> 00:02:50,160 to whatever the value is. 32 00:02:50,700 --> 00:02:56,850 Well, we'll just do plus one and then we're going to update the style property of it. 33 00:02:57,180 --> 00:03:07,350 So div style left and let's set the position to whatever div x is plus and then we need to add in the. 34 00:03:08,160 --> 00:03:14,810 So this is our function that's going to move the element and also let's run that function then. 35 00:03:15,150 --> 00:03:16,260 So every time. 36 00:03:18,030 --> 00:03:29,610 We click it, let's let's run that let's run that function, so d'Hiv out event listener and that listener 37 00:03:29,610 --> 00:03:36,930 is going to be on click and then ever it gets clicked, it's going to run the function and within this 38 00:03:36,930 --> 00:03:40,820 function is going to be the the mover right now. 39 00:03:40,830 --> 00:03:44,340 So just going to update this and it's going to run the function mover. 40 00:03:44,910 --> 00:03:48,600 So whenever I click it, it's moving over slightly to the right. 41 00:03:48,840 --> 00:03:52,170 It's adding in that one pick to that element. 42 00:03:52,530 --> 00:03:54,840 So let's add in the animation frame. 43 00:03:55,110 --> 00:04:02,640 So setting up the animation frame and I'll call it my anay, and this could be the animation frame. 44 00:04:02,650 --> 00:04:05,530 So let's set up the request animation frame. 45 00:04:05,820 --> 00:04:09,030 So what this is done, this is the window request animation frame. 46 00:04:09,040 --> 00:04:11,790 So of course you don't need to include the window because that's assumed. 47 00:04:11,940 --> 00:04:18,930 And what it does is it tells the browser that we wish to perform the animation and we wish to repeat 48 00:04:19,320 --> 00:04:20,760 the mover function. 49 00:04:21,180 --> 00:04:30,900 And then we also have to set up the request animation frame within the mover so that it will keep requesting 50 00:04:30,900 --> 00:04:31,830 the animation frame. 51 00:04:32,100 --> 00:04:33,190 So let's check it out. 52 00:04:33,210 --> 00:04:35,820 And this is going to be moving it across. 53 00:04:36,090 --> 00:04:41,520 And we actually also have to update this to let because it's not going to be an object, it's just going 54 00:04:41,520 --> 00:04:43,230 to be assigned to that value. 55 00:04:43,470 --> 00:04:45,890 So that will take care of and remove it that error. 56 00:04:46,080 --> 00:04:49,140 So basically, it's moving it over to the right hand side. 57 00:04:49,270 --> 00:04:50,840 So we need a way to stop it. 58 00:04:51,090 --> 00:04:56,940 So let's update the click event and I'll just call it Storper. 59 00:04:57,150 --> 00:05:01,830 And we're going to run a function, create a function that's called Storper. 60 00:05:01,950 --> 00:05:04,080 We don't need to pass in any values. 61 00:05:04,260 --> 00:05:10,140 And what this is going to do is this is going to cancel the animation frame so we don't need to assign 62 00:05:10,140 --> 00:05:15,690 a variable to it, cancel animation frame and the animation frame that we want to cancel. 63 00:05:15,690 --> 00:05:22,440 And actually we should be referencing not the function, but let's reference the assigned variable. 64 00:05:22,440 --> 00:05:23,460 So the Miami. 65 00:05:23,700 --> 00:05:26,690 So let's try that and click it and that stops it. 66 00:05:27,330 --> 00:05:31,040 So we should also check to see if it's been clicked. 67 00:05:31,050 --> 00:05:37,110 So if the animation frame is stopped, then we can also restart the animation frame. 68 00:05:37,260 --> 00:05:41,640 So I'm going to set up a variable to toggle and I'll call it Torg. 69 00:05:42,870 --> 00:05:45,660 So it'll be true and we'll check. 70 00:05:46,140 --> 00:05:55,380 If Torg is true, then it's going to cancel the animation frame else then it's going to set Torg to 71 00:05:55,380 --> 00:05:56,130 true. 72 00:05:57,570 --> 00:06:00,390 And actually, we need to also talk to false here. 73 00:06:01,320 --> 00:06:04,050 So the next time it gets clicked, it can start the animation. 74 00:06:04,650 --> 00:06:11,800 And then we just set up the Miami variable once again and clean that up, beautify that save. 75 00:06:12,150 --> 00:06:16,020 So what I've done here is I've added in togue value. 76 00:06:16,350 --> 00:06:18,200 So this will allow us to toggle. 77 00:06:18,210 --> 00:06:21,360 So whenever we click it the first time we click it. 78 00:06:21,360 --> 00:06:25,830 If Torg is true, then it's going to cancel the animation set target to false. 79 00:06:26,070 --> 00:06:28,770 If we click it again, Torg is going to be false. 80 00:06:28,930 --> 00:06:32,940 So then it's going to set talk to true and set and start the animation. 81 00:06:32,950 --> 00:06:33,990 So see what that works. 82 00:06:34,290 --> 00:06:36,270 So I click it and click it again. 83 00:06:36,270 --> 00:06:38,600 Stop, start, stop, start. 84 00:06:38,850 --> 00:06:43,380 So that's how we can stop and start the animation using JavaScript.