1 00:00:00,330 --> 00:00:00,830 ‫Hey, there. 2 00:00:00,990 --> 00:00:01,710 ‫Welcome back. 3 00:00:02,100 --> 00:00:08,490 ‫Now in this lecture, let us complete this whole part in terms of transition, transform something related 4 00:00:08,490 --> 00:00:11,490 ‫to animation, as well as anything to get to background. 5 00:00:12,060 --> 00:00:15,540 ‫So the first thing I'm going to do is I'm going to play with the background. 6 00:00:15,540 --> 00:00:16,710 ‫So globs of hair. 7 00:00:17,010 --> 00:00:20,160 ‫There is a small underlain behind this whole learning app. 8 00:00:20,670 --> 00:00:21,800 ‫We can utilize that. 9 00:00:22,290 --> 00:00:26,280 ‫What I'm going to do is I'm going to jump on to this whole. 10 00:00:27,890 --> 00:00:34,490 ‫Learning, acting, and I have I spent what I can do if I can jump on to Main Line and then select a 11 00:00:34,500 --> 00:00:39,590 ‫span, or I can add a class here and call this class as highlight. 12 00:00:43,070 --> 00:00:44,330 ‫Or maybe anything else. 13 00:00:45,290 --> 00:00:48,680 ‫So let's hope in this highlight for now, get back here. 14 00:00:49,070 --> 00:00:52,820 ‫And this should be after my main line up here. 15 00:00:54,610 --> 00:00:57,790 ‫And now here I can utilize my before. 16 00:00:58,180 --> 00:01:04,710 ‫What I'm going to do is I'm going, I'm going to select before, then add a background color and then 17 00:01:05,020 --> 00:01:09,190 ‫before I can set bottom opacity z index. 18 00:01:09,190 --> 00:01:12,010 ‫Anything that I want then up affect with. 19 00:01:12,370 --> 00:01:16,270 ‫What I mean by this is can I'm going to go it before? 20 00:01:16,960 --> 00:01:19,960 ‫And let's say plus, let me add some contenders. 21 00:01:20,650 --> 00:01:26,710 ‫This is going to be definitely the first thing I'm going to do is help me out some quantum the test 22 00:01:26,710 --> 00:01:27,250 ‫papers. 23 00:01:27,670 --> 00:01:31,600 ‫So if I jump back here, you can see this is unbelievable and I cannot select this. 24 00:01:32,170 --> 00:01:34,040 ‫So this content is available. 25 00:01:34,450 --> 00:01:38,620 ‫What I can do is I can provide a fixed rate hike and background color. 26 00:01:39,040 --> 00:01:44,680 ‫So what I'm going to do is add I'm going to have a word, maybe three one I fix and then I'm going to 27 00:01:44,680 --> 00:01:49,480 ‫have a height, maybe 20 percent, and then I'm going to have a background color. 28 00:01:49,930 --> 00:01:53,110 ‫So let's take a background color, which is a bit like. 29 00:01:56,380 --> 00:02:02,400 ‫Now, once that is done, I just need to utilize my position absolute and then I can go with bottom 30 00:02:02,440 --> 00:02:02,860 ‫zero. 31 00:02:03,040 --> 00:02:04,780 ‫So let's go that position. 32 00:02:05,200 --> 00:02:05,990 ‫Absolutely. 33 00:02:06,250 --> 00:02:07,720 ‫And then I need proof of it. 34 00:02:07,790 --> 00:02:08,380 ‫Bottom. 35 00:02:10,150 --> 00:02:10,660 ‫Zero. 36 00:02:11,710 --> 00:02:19,990 ‫Now, remember, if this is position absolute, we need to set the beating as relative, which is going 37 00:02:19,990 --> 00:02:23,500 ‫to be main line, which is going to be selective now. 38 00:02:24,780 --> 00:02:27,690 ‫If I jump back here, you can see this whole big box. 39 00:02:28,050 --> 00:02:31,620 ‫What I'm going to do is I am going to prefer a Z index. 40 00:02:32,850 --> 00:02:38,220 ‫And let me say a minus one, if I go back now, you can say it's irrelevant. 41 00:02:38,820 --> 00:02:43,820 ‫I can also change the opacity so I can walk with opacity. 42 00:02:43,860 --> 00:02:46,380 ‫Maybe 0.3 save this one. 43 00:02:47,400 --> 00:02:47,760 ‫Yup. 44 00:02:47,820 --> 00:02:49,410 ‫Working with, you can see. 45 00:02:50,620 --> 00:02:53,620 ‫Now you can try to add something else that was a base example. 46 00:02:53,980 --> 00:03:01,120 ‫So we are taking a fix for it because if my before is starting from this point, it is going to somewhere 47 00:03:01,120 --> 00:03:01,870 ‫some points. 48 00:03:03,970 --> 00:03:07,420 ‫So if I take five picks, then it will be something like this only. 49 00:03:08,260 --> 00:03:11,260 ‫Maybe let me increase to 50, save this one. 50 00:03:11,680 --> 00:03:13,090 ‫You can see the small part. 51 00:03:13,600 --> 00:03:15,220 ‫So I need to take. 52 00:03:15,220 --> 00:03:16,090 ‫I'll fix it. 53 00:03:17,820 --> 00:03:20,310 ‫So I can stretch it according to my requirement. 54 00:03:21,240 --> 00:03:27,820 ‫I hope you got the idea what we are trying to do, and we can take hundred percent care if we want a 55 00:03:27,880 --> 00:03:29,190 ‫forward hundred percent. 56 00:03:30,060 --> 00:03:32,070 ‫This will stretch all the way. 57 00:03:32,280 --> 00:03:38,670 ‫What I can do is I can take after it will start from here and then I can remove the whole property, 58 00:03:38,670 --> 00:03:40,290 ‫which is this color property. 59 00:03:41,170 --> 00:03:42,690 ‫And that's that's a bad idea. 60 00:03:42,780 --> 00:03:44,100 ‫So let's go with facts. 61 00:03:44,100 --> 00:03:46,310 ‫Fix where to save this one and get back here. 62 00:03:46,590 --> 00:03:47,130 ‫Looks great. 63 00:03:47,280 --> 00:03:47,700 ‫Great. 64 00:03:48,360 --> 00:03:50,400 ‫That's it for our background on the line. 65 00:03:50,640 --> 00:03:52,820 ‫The next thing is about the transition. 66 00:03:52,830 --> 00:03:58,260 ‫If you see we don't have any housing effect, but if we add any Howard effect, that would be instant. 67 00:03:58,590 --> 00:04:00,570 ‫So if I go ahead, go to my apartment. 68 00:04:00,750 --> 00:04:02,450 ‫Oh, it is Biden. 69 00:04:02,850 --> 00:04:06,510 ‫And let's say, let me add in our. 70 00:04:09,430 --> 00:04:14,470 ‫Now, had I can I add how in effect, so I need to change only background color on how I reflect and 71 00:04:14,470 --> 00:04:16,000 ‫I'm going to take something dark? 72 00:04:16,840 --> 00:04:18,190 ‫Let me take something. 73 00:04:21,890 --> 00:04:26,310 ‫And if I get back, you can see now it's changing instantly. 74 00:04:26,870 --> 00:04:31,130 ‫So if you remember about transition, what we can do is we can slow down these people. 75 00:04:31,280 --> 00:04:33,890 ‫We can slow down the whole transition phase. 76 00:04:34,400 --> 00:04:37,280 ‫So what I'm going to do is I'm going to say transition. 77 00:04:39,080 --> 00:04:44,840 ‫Now I am going to pass what property I need to change, so here and we just have background, so I can 78 00:04:44,840 --> 00:04:50,900 ‫say all then the amount of time that is the duration of this whole transition, let's say with zero 79 00:04:50,900 --> 00:04:52,460 ‫point five seconds. 80 00:04:53,030 --> 00:04:55,190 ‫Now we need to provide how we need to move. 81 00:04:55,250 --> 00:05:01,970 ‫Maybe Eason is out something like direction so we can provide different values with the help of cubic 82 00:05:01,970 --> 00:05:02,480 ‫Mazir. 83 00:05:02,750 --> 00:05:07,300 ‫But let's call it even save this one. 84 00:05:07,310 --> 00:05:08,120 ‫Get back here. 85 00:05:09,870 --> 00:05:12,690 ‫You can see it's changing slowly now. 86 00:05:14,080 --> 00:05:17,710 ‫Now, had I can change the time, maybe 0.2 seconds. 87 00:05:19,580 --> 00:05:23,810 ‫Walking well, it's not instant, it's taking 0.2 seconds. 88 00:05:25,020 --> 00:05:31,740 ‫So that stands for the our effect now we can do something else that is animation, which is pretty important 89 00:05:31,750 --> 00:05:32,910 ‫for this point now. 90 00:05:33,900 --> 00:05:35,340 ‫OK, let me get back here. 91 00:05:37,820 --> 00:05:41,870 ‫So we need to animate our float vehicles, float by. 92 00:05:42,900 --> 00:05:48,780 ‫For now, let me just refresh to let us do type of animation, the first one is that that's going to 93 00:05:48,780 --> 00:05:50,250 ‫be from left and right. 94 00:05:50,640 --> 00:05:53,130 ‫So these are the two blocks that are coming in. 95 00:05:53,640 --> 00:05:56,070 ‫That is only one time one demining mission. 96 00:05:56,070 --> 00:05:57,630 ‫And then this is infinite. 97 00:05:58,140 --> 00:06:00,510 ‫So let's cross to the infinite animation. 98 00:06:00,690 --> 00:06:01,800 ‫What I'm going to do is. 99 00:06:03,480 --> 00:06:07,890 ‫We need to add animation to our flawed theory, as well as being great. 100 00:06:08,760 --> 00:06:11,940 ‫We just need to work with key frames that should be easy. 101 00:06:13,640 --> 00:06:16,160 ‫So I'm going to call this animation as Bond. 102 00:06:16,670 --> 00:06:23,060 ‫There will be certain properties like animation name, then duration, they live again, easing these 103 00:06:23,060 --> 00:06:26,750 ‫out in finite about how many times we need to do. 104 00:06:26,990 --> 00:06:28,580 ‫And then they review others. 105 00:06:30,590 --> 00:06:36,860 ‫So what I'm going to do is I'm going to provide the animation name, or I can use the single property 106 00:06:36,860 --> 00:06:40,730 ‫to do a bit of animation name as bounce. 107 00:06:42,880 --> 00:06:45,900 ‫Duration may be 0.5 second. 108 00:06:47,300 --> 00:06:50,780 ‫Diane Dimond function again, next Big E's only. 109 00:06:53,530 --> 00:06:53,920 ‫Yup. 110 00:06:54,430 --> 00:07:00,990 ‫We need to delay one second for now, because the first animation will be coming from left and right 111 00:07:01,000 --> 00:07:02,590 ‫and then we are going to bounce. 112 00:07:03,160 --> 00:07:08,950 ‫If you refresh this one plus they are going from left to right and then slowly start to bounce. 113 00:07:10,470 --> 00:07:14,760 ‫Get back here and then there will be attrition count in finite. 114 00:07:16,640 --> 00:07:18,230 ‫Then there will be direction. 115 00:07:18,320 --> 00:07:20,090 ‫I'm going to go with alternate. 116 00:07:21,180 --> 00:07:27,690 ‫And we don't need anything more for now, looks good, but we need to define the key frame for balance. 117 00:07:27,810 --> 00:07:29,580 ‫Let me copy this one also here. 118 00:07:32,710 --> 00:07:40,210 ‫Save this one and let me define all the key frames, so what I need to do is use key frame identifier 119 00:07:40,210 --> 00:07:45,250 ‫will be out of bounds and inside this we need to define the properties. 120 00:07:45,250 --> 00:07:49,690 ‫So on zero percent what we need to do and on course and what we need to do. 121 00:07:50,200 --> 00:07:51,820 ‫So let's stick with zero percent. 122 00:07:52,000 --> 00:07:53,530 ‫I need to use TRANSCOM. 123 00:07:53,770 --> 00:07:54,290 ‫Why? 124 00:07:54,880 --> 00:07:59,240 ‫Because I'm moving up and down, so I'm not going to change the position. 125 00:07:59,290 --> 00:08:02,200 ‫What I'm going to do is video transform. 126 00:08:02,200 --> 00:08:05,560 ‫I have a property and translate X and Y. 127 00:08:05,590 --> 00:08:12,490 ‫If you remember Translate now, this can help us to move either on the extraction or wide eyed action. 128 00:08:12,640 --> 00:08:14,260 ‫So we need to move up and down. 129 00:08:14,320 --> 00:08:20,330 ‫We are going to go with quiet addiction and zero percent are positioned should be zero Brexit. 130 00:08:22,350 --> 00:08:26,190 ‫And 100 percent, we are going to transform towards 20 percent. 131 00:08:27,650 --> 00:08:29,360 ‫So I just need to translate. 132 00:08:32,340 --> 00:08:35,760 ‫And we'll work on the Pixel, Save the Swan, get back here. 133 00:08:36,510 --> 00:08:41,060 ‫You can see the movie now, we definitely need to change the duration. 134 00:08:41,070 --> 00:08:46,710 ‫It's not too fast if you observe this, this is slow and this is big fast. 135 00:08:48,050 --> 00:08:56,390 ‫So what I can do is I can jump sure does 0.5, what I can do is, I can say, maybe two seconds. 136 00:09:01,620 --> 00:09:04,380 ‫So this one is working fine, we just changed it to go second. 137 00:09:04,470 --> 00:09:09,120 ‫Something similar we can do here, let's say two seconds. 138 00:09:11,140 --> 00:09:13,700 ‫Now I'm going to provide a different word. 139 00:09:14,140 --> 00:09:18,340 ‫Otherwise, there will be same in terms of movement if this is going down. 140 00:09:18,370 --> 00:09:19,510 ‫This is all tumbling down. 141 00:09:20,230 --> 00:09:24,490 ‫So what I can do is I can change their duration, maybe 2.1 seconds. 142 00:09:24,850 --> 00:09:25,890 ‫And also, I can change. 143 00:09:26,390 --> 00:09:29,830 ‫Maybe this should start at maybe 0.8 again. 144 00:09:30,700 --> 00:09:33,700 ‫And in this way, both will have a different direction. 145 00:09:35,980 --> 00:09:36,550 ‫You can see. 146 00:09:38,550 --> 00:09:40,020 ‫Would depend on your requirement. 147 00:09:40,050 --> 00:09:44,880 ‫I'm just trying to experiment things, so that's done, I hope you got the idea about animations. 148 00:09:44,880 --> 00:09:46,050 ‫I might refresh this one. 149 00:09:46,860 --> 00:09:47,950 ‫It takes some time. 150 00:09:47,970 --> 00:09:49,740 ‫And then the animation started. 151 00:09:50,460 --> 00:09:50,880 ‫Great. 152 00:09:51,170 --> 00:09:56,790 ‫Now we also need to add this second animation, which is if you observe this coming from left and right, 153 00:09:57,450 --> 00:09:58,420 ‫we can do that. 154 00:09:58,440 --> 00:10:00,420 ‫All I have to do is add a keyframe. 155 00:10:01,530 --> 00:10:04,200 ‫So here I just need to go read keyframe. 156 00:10:05,820 --> 00:10:10,210 ‫Let's call this house slide left and right that could be different for both. 157 00:10:10,230 --> 00:10:14,700 ‫And because here this is coming from right and this is coming from left. 158 00:10:18,110 --> 00:10:22,690 ‫I can call this as from right from left on, maybe slide right, slightly left. 159 00:10:26,400 --> 00:10:29,040 ‫Slide right means that moving towards right. 160 00:10:30,900 --> 00:10:32,880 ‫The point of zero percent. 161 00:10:32,970 --> 00:10:36,690 ‫What I'm going to have is I need to transform to minus four per cent. 162 00:10:40,260 --> 00:10:43,380 ‫This time it will be because we are on a horizontal axis. 163 00:10:43,770 --> 00:10:47,940 ‫So let's big minus 50 pixel and then on 100 percent. 164 00:10:50,850 --> 00:10:53,490 ‫I need to get back to my original position. 165 00:10:54,070 --> 00:10:58,530 ‫Remember, I'm coming back to the original position when this whole animation ends. 166 00:10:58,860 --> 00:11:03,780 ‫So what we are going to do is we are going to start from here, then move here and then remain here. 167 00:11:04,080 --> 00:11:06,480 ‫So that will be one enemy, Charlie. 168 00:11:07,500 --> 00:11:12,810 ‫Now what we are doing here is we are moving this 250 pixel on the horizontal side. 169 00:11:13,170 --> 00:11:20,220 ‫And then as soon as we visit the page, it is is going to start from 50 pixel minus 50 pixels and then 170 00:11:20,220 --> 00:11:20,790 ‫come here. 171 00:11:21,030 --> 00:11:24,630 ‫That is, it is moving to zero percent from minus 50. 172 00:11:26,930 --> 00:11:31,160 ‫So what I'm going to do is I'm going to get with my what I'm left. 173 00:11:33,570 --> 00:11:37,530 ‫And had I just need to add a comma so I can add multiple animation. 174 00:11:37,860 --> 00:11:40,140 ‫So this would be slide right. 175 00:11:41,090 --> 00:11:44,130 ‫Remember, we are sliding to the right side. 176 00:11:44,130 --> 00:11:48,540 ‫Slide right means here I'm going to go from left to right. 177 00:11:48,750 --> 00:11:49,350 ‫Remember? 178 00:11:49,740 --> 00:11:53,820 ‫So we are going to start with minus 50 pixel moving towards zero pixel. 179 00:11:56,480 --> 00:12:03,620 ‫Slide right on, I'm going to take our duration of 0.5 seconds and then definitely please, the next 180 00:12:03,620 --> 00:12:04,540 ‫will be more clear. 181 00:12:04,660 --> 00:12:06,380 ‫But I want this to be in straight. 182 00:12:08,080 --> 00:12:10,990 ‫And number of counts that could be one. 183 00:12:11,080 --> 00:12:17,230 ‫And let's take this as alternate or anything else we can find because we are just taking one iteration. 184 00:12:18,130 --> 00:12:22,600 ‫If I get back here and if I refresh, you can see it's working fine. 185 00:12:24,240 --> 00:12:31,380 ‫Now here we are taking this as a 0.5 second, that means the initial 0.5 second defining mission will 186 00:12:31,380 --> 00:12:32,070 ‫be walking. 187 00:12:32,610 --> 00:12:39,120 ‫After that, we will have a 0.3 second break and then we will start this since this is zero point eight. 188 00:12:39,300 --> 00:12:40,500 ‫This is 0.5. 189 00:12:41,070 --> 00:12:42,230 ‫I hope you got the idea. 190 00:12:42,240 --> 00:12:47,130 ‫What we are trying to say is this animation will start off to zero point eight again. 191 00:12:47,850 --> 00:12:56,040 ‫But out of that 0.8 second, this animation will take 0.5 second, and then there will be a gap of 0.3 192 00:12:56,040 --> 00:12:56,400 ‫seconds. 193 00:12:56,430 --> 00:13:03,000 ‫Remember, at this point, we can take this as zero point five etc for the delay, and the animation 194 00:13:03,000 --> 00:13:04,940 ‫will start instantly refresh. 195 00:13:05,550 --> 00:13:08,730 ‫You can see as soon as this comes, the animation started. 196 00:13:10,340 --> 00:13:16,150 ‫OK, we need to take something similar for our slide left. 197 00:13:18,790 --> 00:13:20,900 ‫And this time it will be opposite. 198 00:13:20,920 --> 00:13:24,250 ‫We need to start from fifth to excel and then come back to zero. 199 00:13:25,580 --> 00:13:28,060 ‫And I just need to complete this whole property. 200 00:13:30,080 --> 00:13:33,230 ‫Add it in and start right, it will be left. 201 00:13:35,380 --> 00:13:42,160 ‫Hair that delays once again, I can change it to 0.5 itself, and everything looks fine to me. 202 00:13:42,350 --> 00:13:46,380 ‫It back hair refresh, you can see a talking point. 203 00:13:48,680 --> 00:13:54,410 ‫Now totally depend on you how you play with this looks fine, I hope you got the idea about animation. 204 00:13:54,830 --> 00:13:57,760 ‫We just need to change how it affect foreign buttons now. 205 00:14:00,760 --> 00:14:03,850 ‫As well as I need to add some gap here and this image. 206 00:14:04,150 --> 00:14:06,660 ‫OK, so let me add the image first. 207 00:14:06,670 --> 00:14:13,120 ‫What I'm going to do is I'm going to jump here and haddock Maradi image and then I will change its position. 208 00:14:13,540 --> 00:14:15,430 ‫So let me simply add the image. 209 00:14:17,430 --> 00:14:19,980 ‫This is going to be inside my media. 210 00:14:22,600 --> 00:14:27,340 ‫There will be a shared folder, and then this is going to be a busy one. 211 00:14:27,550 --> 00:14:28,350 ‫Save this one. 212 00:14:28,390 --> 00:14:29,140 ‫Get back here. 213 00:14:29,290 --> 00:14:32,920 ‫This is what I need to do is I need to change it. 214 00:14:33,040 --> 00:14:37,450 ‫I need to change and I need to provide a class with me on this class has. 215 00:14:39,440 --> 00:14:39,890 ‫Be. 216 00:14:42,600 --> 00:14:43,500 ‫Copy this one. 217 00:14:44,460 --> 00:14:45,300 ‫Get back here. 218 00:14:48,560 --> 00:14:49,400 ‫Keep this here. 219 00:14:52,330 --> 00:14:58,990 ‫Now here, I can change it to position as absolute, and then again, there will be a position which 220 00:14:58,990 --> 00:15:04,570 ‫is going to be more calm as a precaution than there would be left because we are going to move towards 221 00:15:04,570 --> 00:15:10,100 ‫left side, the mixing and the very next will be minus one. 222 00:15:10,120 --> 00:15:15,220 ‫I don't want this image to hover over these content so you can see the position is set. 223 00:15:15,490 --> 00:15:20,920 ‫I just need to add animation Comal County so I can add balanced animation. 224 00:15:21,610 --> 00:15:25,060 ‫If I get my cash card on, I can copy this animation. 225 00:15:28,130 --> 00:15:28,360 ‫Yup. 226 00:15:28,870 --> 00:15:29,500 ‫This is one. 227 00:15:31,080 --> 00:15:37,140 ‫And I can change the duration may as well as the delay, so let's say duration us pause again, so it 228 00:15:37,140 --> 00:15:39,330 ‫will be slowly moving it back home. 229 00:15:39,630 --> 00:15:40,200 ‫We're going to see. 230 00:15:40,920 --> 00:15:42,150 ‫I hope you got the idea. 231 00:15:42,690 --> 00:15:44,340 ‫What we are trying to do. 232 00:15:45,520 --> 00:15:50,140 ‫Now, how you can change the -- size for the button, you can change the text. 233 00:15:50,710 --> 00:15:51,760 ‫Totally depend on you. 234 00:15:52,130 --> 00:15:57,880 ‫So the next thing remaining is add some padding here and here and do some changes, small changes. 235 00:15:58,330 --> 00:16:01,630 ‫So what we are going to do is we are going to carry this in the next lecture. 236 00:16:01,930 --> 00:16:06,940 ‫We are then going to talk about something related to your ability as well as components. 237 00:16:08,160 --> 00:16:12,210 ‫And talk about media, but it's because we are going to utilize these colors again and again. 238 00:16:12,480 --> 00:16:15,720 ‫So let's store them in our variable and create our own team. 239 00:16:16,000 --> 00:16:17,310 ‫That would be much better. 240 00:16:18,090 --> 00:16:19,340 ‫I hope you got the idea. 241 00:16:19,350 --> 00:16:22,760 ‫What we are trying to do the last one stock has done. 242 00:16:22,770 --> 00:16:26,790 ‫All of this will be easy because we just need to replicate things. 243 00:16:27,480 --> 00:16:30,600 ‫So thank you for calling and I see you guys in the next one.