1 00:00:00,300 --> 00:00:00,870 ‫Hey, there. 2 00:00:00,930 --> 00:00:01,620 ‫Welcome back. 3 00:00:01,860 --> 00:00:04,170 ‫You are still playing with our infinite loop. 4 00:00:04,330 --> 00:00:10,200 ‫Now it's good time for me to watch this one and start on things from the basics. 5 00:00:10,200 --> 00:00:16,050 ‫I mean, but then now we have been working with this small example where we just took a container and 6 00:00:16,050 --> 00:00:21,210 ‫start moving things, but now it's got time for us to play with certain other examples. 7 00:00:21,870 --> 00:00:27,570 ‫Maybe transform our element, maybe move it from here to there and do certain other stuff. 8 00:00:28,790 --> 00:00:34,850 ‫Now, let me try to pick this whole content and be it on the bottom so you can utilize gaydar, but 9 00:00:34,850 --> 00:00:36,110 ‫we are not going to use it. 10 00:00:36,850 --> 00:00:38,390 ‫And if I get back here. 11 00:00:40,000 --> 00:00:41,440 ‫So we have this whole square. 12 00:00:41,650 --> 00:00:48,160 ‫So first thing is, I'm going to remove all the properties from this container, OK, and I'm going 13 00:00:48,160 --> 00:00:49,320 ‫to create three giant. 14 00:00:49,400 --> 00:00:52,240 ‫So we are going to play with three different elements. 15 00:00:52,660 --> 00:00:55,000 ‫I'm going to call this as I done one. 16 00:00:55,540 --> 00:00:59,530 ‫And then there will be an item which will be an item two. 17 00:00:59,770 --> 00:01:03,130 ‫And then there will be third item, which will be item three. 18 00:01:04,000 --> 00:01:08,560 ‫So basically, what we are trying to do is we are going to try three loaders. 19 00:01:08,950 --> 00:01:13,930 ‫So if you look at this example, we want to try and build something similar. 20 00:01:14,890 --> 00:01:15,350 ‫OK. 21 00:01:15,370 --> 00:01:17,200 ‫So I get back here now. 22 00:01:17,200 --> 00:01:21,610 ‫I have this whole move thing and I have this container. 23 00:01:21,610 --> 00:01:22,780 ‫I'm not going to check. 24 00:01:23,260 --> 00:01:25,180 ‫Let me say item one. 25 00:01:27,150 --> 00:01:32,940 ‫I'm going to define this item as well, it may be for the Pixel. 26 00:01:34,000 --> 00:01:40,660 ‫As well as high profile pics of seeing this one, nothing happens because we need to add a background 27 00:01:40,660 --> 00:01:43,600 ‫color to like this one and then change. 28 00:01:47,410 --> 00:01:54,280 ‫We have this item now, what I want is I want this to move from top to bottom and keep on falling on, 29 00:01:54,280 --> 00:02:00,780 ‫I should say, let me add a position as absolute and for now, let me give it a a more zero Brexit. 30 00:02:01,510 --> 00:02:03,490 ‫OK, so we have at the bottom. 31 00:02:04,000 --> 00:02:07,060 ‫So now I want this item to jump. 32 00:02:07,600 --> 00:02:15,730 ‫It may also give some space on the left here and say left basically 200 pixels. 33 00:02:16,570 --> 00:02:17,500 ‫Save this one. 34 00:02:17,530 --> 00:02:18,730 ‫OK, this is great. 35 00:02:19,030 --> 00:02:25,450 ‫I want this item to jump from top and keep on following by changing it to it continuously. 36 00:02:25,840 --> 00:02:32,790 ‫So the first thing I'm going to do is remove this left from here and at every different part, I'm going 37 00:02:32,800 --> 00:02:35,890 ‫to update its width as well as its position. 38 00:02:36,430 --> 00:02:41,550 ‫So the first thing I'm going to do is add zero r bottom as zero pixels create. 39 00:02:41,740 --> 00:02:45,010 ‫Nothing happened and we haven't added animation. 40 00:02:45,040 --> 00:02:45,640 ‫Don't worry. 41 00:02:46,420 --> 00:02:49,480 ‫The second thing is I'm going to take maybe 20 percent. 42 00:02:50,530 --> 00:02:53,200 ‫And said bottom, as Grundy makes said. 43 00:02:55,600 --> 00:02:57,460 ‫On I should be the 215. 44 00:03:00,560 --> 00:03:06,430 ‫Let's take this has 25 percent things will be easier on lipstick, this has 25 itself. 45 00:03:07,760 --> 00:03:13,270 ‫And let me add a 450 as well as do or 75, so I'm 50. 46 00:03:13,670 --> 00:03:17,330 ‫It will be 50 and at 75. 47 00:03:18,990 --> 00:03:26,080 ‫This will be 75 and a hundred, this will be handled so we can do something similar here. 48 00:03:27,150 --> 00:03:27,600 ‫OK? 49 00:03:27,630 --> 00:03:33,360 ‫Nothing happens because we haven't dated any type of animation, so let's say animation name. 50 00:03:34,050 --> 00:03:36,770 ‫And I'm going to call this as more. 51 00:03:37,440 --> 00:03:42,960 ‫And the second thing I'm going to take is animation duration, sir. 52 00:03:42,960 --> 00:03:45,250 ‫And let's take one second. 53 00:03:45,270 --> 00:03:46,080 ‫Save this one. 54 00:03:46,920 --> 00:03:48,290 ‫You can see this is moving in. 55 00:03:49,290 --> 00:03:51,170 ‫But let me try to add something else. 56 00:03:51,180 --> 00:03:56,850 ‫Let me call this as animation timing function like we use linear. 57 00:03:56,850 --> 00:03:57,660 ‫Save this one. 58 00:03:57,840 --> 00:03:58,470 ‫OK. 59 00:03:58,530 --> 00:04:00,160 ‫This was a smoother move. 60 00:04:00,540 --> 00:04:02,500 ‫But let me give you some lessons. 61 00:04:02,550 --> 00:04:03,920 ‫Let me take this as 100. 62 00:04:04,620 --> 00:04:06,150 ‫This is going to be 200. 63 00:04:06,510 --> 00:04:09,810 ‫This is going to be 300 and this is going to be 400. 64 00:04:09,930 --> 00:04:10,830 ‫Save this one. 65 00:04:11,760 --> 00:04:16,590 ‫OK, now this is moving, but it's not alternate. 66 00:04:16,890 --> 00:04:22,820 ‫What we can do is we can add our direction, animation, direction. 67 00:04:23,160 --> 00:04:29,520 ‫Remember, these things alternate since we are only doing one loop. 68 00:04:30,060 --> 00:04:34,830 ‫So that's a problem that we try to use infinite remember iteration count. 69 00:04:35,640 --> 00:04:40,590 ‫So animation, I need to work with iteration calling. 70 00:04:40,710 --> 00:04:42,000 ‫OK, save this one. 71 00:04:43,440 --> 00:04:44,250 ‫In fact, I. 72 00:04:47,050 --> 00:04:47,420 ‫Great. 73 00:04:49,050 --> 00:04:50,250 ‫So this is working fine. 74 00:04:50,370 --> 00:04:55,830 ‫Let me try to play with it as this point of time, we have our very top 50 picks. 75 00:04:56,490 --> 00:04:58,530 ‫What if I change that different position? 76 00:04:59,190 --> 00:05:00,420 ‫Things will be interesting. 77 00:05:00,720 --> 00:05:03,060 ‫I saved by 50 percent. 78 00:05:03,060 --> 00:05:06,180 ‫I need to get off politics and save. 79 00:05:07,140 --> 00:05:09,600 ‫You can see that how it is working. 80 00:05:12,130 --> 00:05:15,010 ‫So at zero percent, our rate is 50 percent. 81 00:05:15,310 --> 00:05:20,590 ‫And by the time it reaches 50 percent, we increase our world with 100 percent. 82 00:05:20,610 --> 00:05:22,620 ‫Let me be height. 83 00:05:22,630 --> 00:05:23,440 ‫Save this one. 84 00:05:24,190 --> 00:05:24,780 ‫OK. 85 00:05:24,820 --> 00:05:25,990 ‫This is interesting, right? 86 00:05:26,020 --> 00:05:28,300 ‫I hope you got the idea of what we are trying to do. 87 00:05:28,900 --> 00:05:34,750 ‫Let me try to change this bottom and say, maybe this is 50 100. 88 00:05:37,190 --> 00:05:42,070 ‫And maybe this is one and this is to under. 89 00:05:43,310 --> 00:05:48,830 ‫OK, this there's not interesting, it's pretty interesting we will change its position, but I hope 90 00:05:48,830 --> 00:05:55,850 ‫you got the idea what we are trying to do if you try to change the height again, maybe 150 here, so 91 00:05:55,850 --> 00:05:57,970 ‫you will see how this is going to work. 92 00:05:59,520 --> 00:06:01,260 ‫Oh, definitely, this is great. 93 00:06:01,710 --> 00:06:05,990 ‫Now there are a lot of options with this at this point of time, we are just using linear. 94 00:06:06,480 --> 00:06:08,400 ‫You can use any custom value order. 95 00:06:08,400 --> 00:06:10,380 ‫You can utilize ease and ease out. 96 00:06:10,680 --> 00:06:19,140 ‫That will definitely change how this is going to remember that website regarding cubic menser if we 97 00:06:19,140 --> 00:06:20,810 ‫compare this one and it. 98 00:06:23,400 --> 00:06:26,970 ‫I mean, if I save this one, you can see it's changing. 99 00:06:27,990 --> 00:06:32,520 ‫But for now, I'm going to work with the Senate itself, save this one. 100 00:06:33,030 --> 00:06:33,600 ‫OK. 101 00:06:33,870 --> 00:06:34,710 ‫This is great. 102 00:06:38,300 --> 00:06:43,700 ‫Now, what I am going to do is I'm going to add multiple items, so at this point of time, we just 103 00:06:43,700 --> 00:06:44,930 ‫played with one item. 104 00:06:45,260 --> 00:06:48,410 ‫What I cannot item two, item three undo lot of thing. 105 00:06:48,920 --> 00:06:54,350 ‫So the first thing I'm going to do is add them in the form of shorting properties I can utilize. 106 00:06:54,350 --> 00:06:58,130 ‫Any mention name is going to be move. 107 00:06:58,280 --> 00:07:00,500 ‫Duration is going to be once again. 108 00:07:02,040 --> 00:07:10,530 ‫And then timing function is going to be linear than currently we have no delay and iteration will be 109 00:07:10,650 --> 00:07:11,460 ‫in like. 110 00:07:14,790 --> 00:07:18,930 ‫Then our direction will be alternate and fell more or less. 111 00:07:19,170 --> 00:07:22,200 ‫Nothing much as default values in this one. 112 00:07:22,440 --> 00:07:27,090 ‫Also, let me remove this one saying things are working fine. 113 00:07:27,390 --> 00:07:27,810 ‫Great. 114 00:07:28,230 --> 00:07:31,700 ‫And what I'm going to do is I'm going to create a similar item. 115 00:07:32,220 --> 00:07:36,210 ‫But the thing is, I am going to change the background color. 116 00:07:36,570 --> 00:07:39,660 ‫Maybe something yellowish. 117 00:07:41,770 --> 00:07:42,210 ‫Great. 118 00:07:42,910 --> 00:07:46,270 ‫And take a bit of position difference. 119 00:07:46,810 --> 00:07:48,060 ‫Let me call this out. 120 00:07:49,220 --> 00:07:51,310 ‫One might say. 121 00:07:52,980 --> 00:07:57,640 ‫I had a problem is we just named it same item, one item on the item two. 122 00:07:58,570 --> 00:07:59,340 ‫OK. 123 00:07:59,670 --> 00:08:00,890 ‫This is working great. 124 00:08:01,440 --> 00:08:03,240 ‫Let me try to add another item. 125 00:08:06,980 --> 00:08:12,980 ‫Now, remember, we are utilizing this same animation for all animation, move animation, move on with 126 00:08:12,980 --> 00:08:19,160 ‫just this key frame and head, I'm going to have my eye on three at some distance. 127 00:08:19,160 --> 00:08:23,420 ‫Maybe let's call Twiggy and change the color hair. 128 00:08:24,800 --> 00:08:27,260 ‫This time, something blue or red. 129 00:08:27,940 --> 00:08:31,100 ‫Let's go with something related to red, save this one. 130 00:08:31,310 --> 00:08:34,760 ‫OK, I need to maintain some more distance. 131 00:08:34,790 --> 00:08:37,370 ‫Let me add 300. 132 00:08:37,490 --> 00:08:38,570 ‫Save this one. 133 00:08:40,260 --> 00:08:42,360 ‫Let me add it at three fifty. 134 00:08:42,530 --> 00:08:44,310 ‫OK, I need to to distance. 135 00:08:48,580 --> 00:08:53,230 ‫Hit me out at 3:10 and hope you got the idea, what we are trying to do. 136 00:08:54,310 --> 00:08:56,130 ‫Let me change this color, I don't know. 137 00:08:56,260 --> 00:08:57,760 ‫This is our country flag or not. 138 00:08:57,760 --> 00:08:58,780 ‫I have no idea. 139 00:08:58,780 --> 00:09:03,640 ‫Let me change change and also update this yellow to much lighter one. 140 00:09:04,270 --> 00:09:11,740 ‫So I hope you got the idea what we are trying to do now, if we add some sort of delay, things will 141 00:09:11,740 --> 00:09:13,330 ‫work in a different way. 142 00:09:13,540 --> 00:09:18,460 ‫For example, if I delay here after our timing function. 143 00:09:19,780 --> 00:09:23,530 ‫And let's see if I a delay of 500 milliseconds. 144 00:09:25,130 --> 00:09:27,620 ‫And let me add this to, but all of them. 145 00:09:31,640 --> 00:09:38,300 ‫But it will be different for ours, or it will be 100 for this and 50 for this and 500 for this, and 146 00:09:38,300 --> 00:09:42,500 ‫if I save this one, you can see that's how it is working. 147 00:09:42,830 --> 00:09:46,820 ‫Now this is important to understand how we are going to play things now. 148 00:09:46,820 --> 00:09:52,580 ‫We can do a lot of things, maybe transform them, scale them, rotate them whatever we want, and we 149 00:09:52,580 --> 00:09:54,410 ‫can create fancy animation. 150 00:09:54,620 --> 00:10:00,170 ‫Now remember, these type of animations are utilized while loading things are you can see some progress 151 00:10:00,170 --> 00:10:00,500 ‫bar. 152 00:10:00,680 --> 00:10:02,330 ‫So that's how this is going to work. 153 00:10:03,510 --> 00:10:07,680 ‫I hope you got the idea how we are going to utilize this animation. 154 00:10:08,710 --> 00:10:14,320 ‫Now, the motive of this lecture was to make you realize that one key frame or one type of animation 155 00:10:14,620 --> 00:10:20,920 ‫can be applied on multiple items and then we can change them according to their duration or delay as 156 00:10:20,920 --> 00:10:21,190 ‫well. 157 00:10:21,490 --> 00:10:22,960 ‫So it totally depends on us. 158 00:10:23,230 --> 00:10:29,830 ‫If I had the duration, things will be slower for each one of them if I see duration as five hundred 159 00:10:29,830 --> 00:10:30,520 ‫milliseconds. 160 00:10:30,850 --> 00:10:33,430 ‫So you will see yellows behaving very differently. 161 00:10:36,020 --> 00:10:37,550 ‫Let me go back with once again. 162 00:10:37,860 --> 00:10:43,580 ‫OK, now before ending this lecture, let me discuss this through creative prospect. 163 00:10:44,210 --> 00:10:48,770 ‫Maybe if you are utilizing a ball, I should say some circle. 164 00:10:48,780 --> 00:10:54,200 ‫You can change your size whenever it touches at the bottom so you can expand it a bit. 165 00:10:54,200 --> 00:10:56,390 ‫You can change the world and a lot of things. 166 00:10:56,840 --> 00:11:06,080 ‫So, for example, if I'm utilizing something like maybe border radius as 50 percent here. 167 00:11:08,300 --> 00:11:09,560 ‫But let me copy this one. 168 00:11:13,860 --> 00:11:18,130 ‫So this was 50 percent, and I don't want to change that height. 169 00:11:18,960 --> 00:11:22,190 ‫If I save this one here, you can see how this is working. 170 00:11:22,560 --> 00:11:27,330 ‫So now, instead of utilizing the bars, we are utilizing these cycles. 171 00:11:27,780 --> 00:11:28,860 ‫Are we going to change it? 172 00:11:29,160 --> 00:11:35,880 ‫We can change this speed here and maybe go with 500 milliseconds on this one. 173 00:11:40,100 --> 00:11:47,360 ‫And sort of this let me utilize 200 or I should say 150 millisecond, and that should be $200, I can 174 00:11:47,360 --> 00:11:48,140 ‫save this one. 175 00:11:49,160 --> 00:11:50,460 ‫Things are much faster. 176 00:11:50,480 --> 00:11:52,580 ‫You just need to coordinate these value. 177 00:11:54,290 --> 00:11:57,990 ‫Now, I totally depend on your creativity, how you can change things. 178 00:11:58,650 --> 00:12:00,340 ‫I hope this lecture was helpful. 179 00:12:00,360 --> 00:12:03,090 ‫Let me reverse these last changes. 180 00:12:07,020 --> 00:12:08,610 ‫I hope this lecture was helpful. 181 00:12:08,880 --> 00:12:09,940 ‫Thank you for calling. 182 00:12:10,020 --> 00:12:11,940 ‫And I see you guys in the next one.