1
00:00:00,760 --> 00:00:01,300
‫Hey, there.

2
00:00:01,450 --> 00:00:02,230
‫Welcome back.

3
00:00:02,320 --> 00:00:09,610
‫Welcome to one of the most important advanced concept of US's transition happening now we have discussed

4
00:00:09,610 --> 00:00:10,690
‫about Transform.

5
00:00:11,050 --> 00:00:16,780
‫So if I say transform work, suppose I'm working with this day and I have some content.

6
00:00:16,780 --> 00:00:18,790
‫Maybe I have some H1, I have some.

7
00:00:19,720 --> 00:00:24,670
‫And if I add some transform property, we can change the shape of this device.

8
00:00:25,030 --> 00:00:26,680
‫We can change the color of this.

9
00:00:26,680 --> 00:00:29,620
‫Do all of this is working fine?

10
00:00:29,770 --> 00:00:33,820
‫We can go from point A to point B directly c.

11
00:00:33,820 --> 00:00:39,190
‫If I say I have over 200 pixel, I can convert it to 200 pixel.

12
00:00:39,550 --> 00:00:41,170
‫That's great working fine.

13
00:00:41,620 --> 00:00:43,580
‫That is basically transform.

14
00:00:43,600 --> 00:00:44,350
‫Remember this?

15
00:00:44,350 --> 00:00:47,440
‫We go from point A to point B directly.

16
00:00:48,250 --> 00:00:53,730
‫But what is this transition transition is basically defining the whole journey.

17
00:00:53,740 --> 00:01:01,480
‫So if I utilize transition or the step to change my work, I'm not directly going from 100 to 200 pixel.

18
00:01:01,510 --> 00:01:03,040
‫I can visualize this.

19
00:01:03,040 --> 00:01:10,900
‫I can understand this how it is growing from 100 to 200, and I can also add certain properties as well

20
00:01:10,900 --> 00:01:11,830
‫as restriction.

21
00:01:12,190 --> 00:01:20,350
‫So that means transition help us to define this journey, whereas with transform, we directly go from

22
00:01:20,350 --> 00:01:21,040
‫A to B..

23
00:01:21,370 --> 00:01:24,020
‫I know I'm baking things with philosophy, right?

24
00:01:24,070 --> 00:01:26,050
‫That that's how you are going to understand.

25
00:01:26,410 --> 00:01:30,250
‫OK, let's let me take a few examples and start walking with it.

26
00:01:30,760 --> 00:01:33,650
‫Remember, transition requires some type of trigger.

27
00:01:33,650 --> 00:01:38,620
‫And maybe how about maybe we can do anything else, but it requires some type of trigger.

28
00:01:39,130 --> 00:01:44,170
‫Now what I'm going to do is I am quickly going to define this shape for this dip.

29
00:01:44,380 --> 00:01:48,310
‫So I'm going to jump here and I'm not actually going to select my div.

30
00:01:48,310 --> 00:01:49,780
‫I'm not going to give any name.

31
00:01:49,780 --> 00:01:51,610
‫I'm actually going to work with this.

32
00:01:51,970 --> 00:01:58,270
‫So I'm going to take our weight off maybe 200 pixels and I'm going to take a height of 200 pixels.

33
00:02:01,440 --> 00:02:03,360
‫And then I can add some margin.

34
00:02:04,350 --> 00:02:11,010
‫Let's take margin from top and bottom, let's take on the pixel and then auto to get the item at the

35
00:02:11,010 --> 00:02:17,460
‫center by saying this one should not be visible because we don't have any background color yet.

36
00:02:17,760 --> 00:02:23,190
‫So what I'm going to do is I'm going to add a background color and I'm going to select some random color

37
00:02:23,190 --> 00:02:24,060
‫and then change it.

38
00:02:24,060 --> 00:02:26,790
‫So I'm going to select something related to blue.

39
00:02:28,220 --> 00:02:32,930
‫OK, this looks great, and if I jump here, this is our current shape.

40
00:02:34,320 --> 00:02:41,190
‫Now, remember, transition requires some type of trigger that means either I hover, I select click

41
00:02:41,190 --> 00:02:43,530
‫or is it something that triggers it?

42
00:02:43,920 --> 00:02:47,550
‫So I suppose if I go and do and if I were, how?

43
00:02:47,550 --> 00:02:47,970
‫What effect?

44
00:02:49,250 --> 00:02:54,770
‫So this is going to be that trigger on how it is going to be that trigger to effect something.

45
00:02:55,130 --> 00:03:03,530
‫And yet if I say work on it or change it to 300 pixels or I should say 400 pixels, save this one.

46
00:03:03,560 --> 00:03:04,340
‫Get back here.

47
00:03:04,940 --> 00:03:05,780
‫How about all this?

48
00:03:05,810 --> 00:03:07,700
‫You can see directly change itself.

49
00:03:08,120 --> 00:03:09,040
‫We don't want that.

50
00:03:09,050 --> 00:03:10,820
‫We want to define the journey.

51
00:03:10,850 --> 00:03:14,240
‫Let's go slowly or go in a different manner.

52
00:03:14,300 --> 00:03:15,440
‫We can define that.

53
00:03:15,740 --> 00:03:21,740
‫Similarly, if I want to define a hybrid, I can change it here with the elbow on are regarded itself.

54
00:03:22,400 --> 00:03:24,050
‫OK, that's the base set up.

55
00:03:24,060 --> 00:03:26,210
‫Now let us focus on transition.

56
00:03:26,720 --> 00:03:28,650
‫So how do device transition?

57
00:03:28,700 --> 00:03:31,880
‫The first thing we need to do is utilize the transition property.

58
00:03:32,450 --> 00:03:36,170
‫So how we need to utilize transition property.

59
00:03:36,240 --> 00:03:37,310
‫Yeah, that's the name.

60
00:03:37,970 --> 00:03:42,950
‫It means what you want to change on our trigger to what you want to change.

61
00:03:43,070 --> 00:03:47,840
‫So the first thing I currently, I just want to change my image so I can do it here.

62
00:03:48,860 --> 00:03:52,130
‫Now here we have option to add multiple values.

63
00:03:52,130 --> 00:03:53,810
‫Here we have option to select all.

64
00:03:54,350 --> 00:03:57,200
‫We will do that as we move forward with this session.

65
00:03:57,200 --> 00:04:01,190
‫But for now, we just want to change the rate only.

66
00:04:01,220 --> 00:04:04,730
‫That means we are going to understand the journey off of it.

67
00:04:05,300 --> 00:04:08,470
‫Now we have multiple other option if we want to add delay.

68
00:04:08,480 --> 00:04:12,500
‫That means if I hover over this, I don't need this instantly.

69
00:04:12,500 --> 00:04:19,370
‫I need a one second delay and then the process start so we can add something which is known as transition

70
00:04:19,370 --> 00:04:19,730
‫delay.

71
00:04:19,730 --> 00:04:24,440
‫So if I scroll down a bit, I have option and let's say something else.

72
00:04:24,620 --> 00:04:27,110
‫One second, for now, save this one.

73
00:04:28,300 --> 00:04:34,650
‫Once again, delay than it is going to change, and it takes one second delay again to get back to normal

74
00:04:34,660 --> 00:04:34,960
‫shape.

75
00:04:36,140 --> 00:04:37,460
‫DeLay changes.

76
00:04:38,600 --> 00:04:39,760
‫Billy Origin.

77
00:04:40,190 --> 00:04:41,840
‫So that's all this is going to up.

78
00:04:44,080 --> 00:04:46,780
‫I hope you got the idea, I'm going to remove this for now.

79
00:04:47,320 --> 00:04:49,740
‫Then we have other properties like duration.

80
00:04:49,750 --> 00:04:56,560
‫That means if I add this transition duration, it will define how this whole things need to work.

81
00:04:56,590 --> 00:05:04,390
‫That means from Point A with just 200 Pixel two point B, which is 400 pixel, how much time it took

82
00:05:04,390 --> 00:05:06,370
‫big to increase at length.

83
00:05:06,670 --> 00:05:09,910
‫One example if I say let's stick to seconds.

84
00:05:11,440 --> 00:05:16,180
‫If I hover over this, it is going to take two seconds to go from point A to B.

85
00:05:16,420 --> 00:05:20,650
‫That means 200 Pixel two, 400 pixel if I remove my heart.

86
00:05:20,860 --> 00:05:24,640
‫It is going to take two seconds to come from 400 to 200.

87
00:05:25,390 --> 00:05:27,420
‫Remember, that's how this is going to work.

88
00:05:27,430 --> 00:05:29,050
‫This transition is going to work.

89
00:05:29,590 --> 00:05:31,240
‫And this is important.

90
00:05:31,420 --> 00:05:35,140
‫Also, when we utilize transform it effect everything.

91
00:05:35,440 --> 00:05:38,830
‫There is transition only effective the part that we are offering.

92
00:05:39,220 --> 00:05:44,530
‫So if I see, if I have some content here, say hello.

93
00:05:47,040 --> 00:05:53,640
‫And if I get back here, if I add this transition, you can see the weight of my halo is same, but

94
00:05:53,640 --> 00:05:55,470
‫the weight of exchange.

95
00:05:56,680 --> 00:05:58,990
‫OK, let me remove this one for now.

96
00:05:59,050 --> 00:05:59,900
‫Save this one.

97
00:05:59,920 --> 00:06:00,670
‫Get back here.

98
00:06:01,630 --> 00:06:01,990
‫Yeah.

99
00:06:02,530 --> 00:06:04,240
‫So that is how this generation work.

100
00:06:04,270 --> 00:06:10,510
‫Remember, the is to initiate the change, whereas duration is the journey of that change.

101
00:06:11,380 --> 00:06:16,000
‫I know I'm trying to refer to things very differently for this specific lecture.

102
00:06:16,630 --> 00:06:19,080
‫Now there is something called us timing.

103
00:06:19,090 --> 00:06:22,560
‫That means how you should bind these two seconds.

104
00:06:22,660 --> 00:06:29,110
‫If I go with transition again and I will have options regarding timing function.

105
00:06:29,500 --> 00:06:35,530
‫Now here you will have different other options in the form of cubic, but there are default values like

106
00:06:35,530 --> 00:06:42,010
‫Ethan with ease, and that means start slowly and then speed up or ease out.

107
00:06:42,640 --> 00:06:47,920
‫That means start fast, but then at the end, slow down so we can do a lot of things.

108
00:06:48,040 --> 00:06:49,330
‫Let it ease in.

109
00:06:49,480 --> 00:06:53,170
‫That means it is going to start slow, but then speed up.

110
00:06:53,400 --> 00:06:56,410
‫So if I have it, start slow and then speed up.

111
00:06:56,920 --> 00:06:59,590
‫You can see, let me go with them.

112
00:06:59,590 --> 00:07:05,050
‫Maybe for an instead go with 600 start slow, then speed up.

113
00:07:08,130 --> 00:07:09,690
‫I hope you got the idea.

114
00:07:10,440 --> 00:07:13,740
‫Now these are going to be fought around you, which you can see like.

115
00:07:15,480 --> 00:07:20,340
‫Remember, these are the default values, Eason, he's in, he's out, he's out.

116
00:07:20,820 --> 00:07:27,420
‫Are all these these Kubik values, these what are they and how we are going to utilize?

117
00:07:27,810 --> 00:07:33,920
‫Let's talk about this with now help of are truly the name is Kubik Ba'asyir itself.

118
00:07:33,930 --> 00:07:35,640
‫So just jump onto Google.

119
00:07:35,910 --> 00:07:36,810
‫Search about it.

120
00:07:40,450 --> 00:07:46,930
‫And how you will get the school now head, you can define your own speed, so maybe you want something

121
00:07:46,930 --> 00:07:47,740
‫to slow it.

122
00:07:47,980 --> 00:07:50,860
‫Initial phase and super fast at the end.

123
00:07:51,190 --> 00:07:53,080
‫So if I just compare this goal?

124
00:07:54,580 --> 00:07:57,140
‫So how does Blue one is about the easy one?

125
00:07:57,220 --> 00:08:00,190
‫And then this pink one is the setting that we did.

126
00:08:00,430 --> 00:08:04,600
‫If I said we have selected slower, then easier and faster at the end.

127
00:08:05,870 --> 00:08:06,920
‫This is I remember.

128
00:08:08,600 --> 00:08:10,850
‫Lowered initial and then foster at the end.

129
00:08:11,240 --> 00:08:12,170
‫OK, let me change.

130
00:08:12,560 --> 00:08:15,950
‫I want foster initial phase and then slow it.

131
00:08:15,950 --> 00:08:17,300
‫Then I say go.

132
00:08:19,010 --> 00:08:21,750
‫I go fast tracked initial phase slow at the end.

133
00:08:22,280 --> 00:08:23,510
‫Remember this being one?

134
00:08:24,620 --> 00:08:28,910
‫And if I said just said Nina, that means all the peace will remain.

135
00:08:28,910 --> 00:08:32,810
‫Jim, you can see throughout it's been.

136
00:08:35,140 --> 00:08:38,590
‫Now I can change it according to our own requirements.

137
00:08:38,740 --> 00:08:40,150
‫If you see this easing.

138
00:08:42,080 --> 00:08:46,310
‫And then, no, this blue one, let me get back here, and now you see this season.

139
00:08:48,630 --> 00:08:52,230
‫Initially, it was slow and then it got to some speed.

140
00:08:52,770 --> 00:09:00,300
‫So how you can copy this code and change accordingly if you want something slow at initial phase and

141
00:09:00,300 --> 00:09:05,190
‫then fast speed up at the end, you can set the value had with the help of ping.

142
00:09:05,610 --> 00:09:10,000
‫Copy this whole thing and then you can pass your own values.

143
00:09:10,040 --> 00:09:11,970
‫If I saved this one, get back here.

144
00:09:12,480 --> 00:09:13,260
‫Now if I have I.

145
00:09:15,400 --> 00:09:16,210
‫OK.

146
00:09:18,020 --> 00:09:20,750
‫So that's how this cubic measure is going to work.

147
00:09:21,770 --> 00:09:26,480
‫Now, then this point of time, you are only walking with one value.

148
00:09:26,750 --> 00:09:31,060
‫And remember, I just commented this delay because I don't want to wait for the change.

149
00:09:31,070 --> 00:09:38,180
‫So if I add this delay, that means I have I need to wait to once again, then my whole process will

150
00:09:38,180 --> 00:09:38,600
‫start.

151
00:09:38,840 --> 00:09:42,380
‫So we wait one second, then whole process will wrap up.

152
00:09:42,830 --> 00:09:46,310
‫So I don't want this delay for now in this one.

153
00:09:46,610 --> 00:09:48,890
‫But suppose I want to change my height also.

154
00:09:48,920 --> 00:09:56,810
‫So I have height and if I say hi, does 400 pixel now remember, I haven't read my height with my transition

155
00:09:56,810 --> 00:10:03,050
‫property, so if I get back here, my height is instantaneous, but we're just changing that journey.

156
00:10:03,740 --> 00:10:08,810
‫So remember, the spot height is instant because we haven't added our height, but the property.

157
00:10:08,810 --> 00:10:11,870
‫So what I can do is I can add my height also.

158
00:10:15,270 --> 00:10:20,720
‫If I add this one, get back here, I can see it's growing in a proper pace.

159
00:10:23,790 --> 00:10:31,290
‫Now, if you want to change everything and follow this same transition duration on timing for all,

160
00:10:31,290 --> 00:10:38,280
‫you can also use on and see this one and get back here and here, you will have option to change everything

161
00:10:38,280 --> 00:10:39,390
‫that we currently have.

162
00:10:39,990 --> 00:10:43,740
‫So remember, this triggered part is important and the other properties.

163
00:10:45,120 --> 00:10:49,950
‫Now, the other concept that I want to discuss is shorthand property and a few examples.

164
00:10:50,370 --> 00:10:55,500
‫So just jump on to this reference or any other website because these are common properties.

165
00:10:55,950 --> 00:10:59,010
‫If you see transition delay, you will have examples here.

166
00:10:59,350 --> 00:11:02,880
‫So delays, you know, everything is instant 1.2.

167
00:11:02,880 --> 00:11:08,220
‫Second, that means you have to wait 1.2 seconds and then you are going to have this again.

168
00:11:08,430 --> 00:11:10,890
‫You can take milliseconds to have the change.

169
00:11:11,320 --> 00:11:12,540
‫And so it's taking time.

170
00:11:15,120 --> 00:11:22,260
‫Now you can also take negative value that means it will skip the initial part and start as a 500 milliseconds

171
00:11:22,260 --> 00:11:23,280
‫are already gone.

172
00:11:23,640 --> 00:11:24,810
‫So if I say OK?

173
00:11:26,640 --> 00:11:31,020
‫So it start from the position where 500 milliseconds are already done.

174
00:11:31,560 --> 00:11:37,020
‫Then there is duration, which is going to define our journey over zeroes again, that means changes

175
00:11:37,020 --> 00:11:37,590
‫and strength.

176
00:11:38,070 --> 00:11:43,230
‫But then we can define the milliseconds or seconds to understand our journey.

177
00:11:44,070 --> 00:11:49,560
‫Then we discussed about property, what property we need to change on very tight.

178
00:11:50,070 --> 00:11:52,010
‫We can do that again.

179
00:11:52,020 --> 00:11:53,680
‫We have about timing function.

180
00:11:53,700 --> 00:11:57,690
‫So we discussed a few others with the help of our tool excel.

181
00:11:58,550 --> 00:12:02,270
‫And then you can also find steps how this is going to change.

182
00:12:03,670 --> 00:12:09,580
‫And then comes short and property, so you can define what property you need to change your duration,

183
00:12:09,580 --> 00:12:12,790
‫your timing function and so you can do a lot of things.

184
00:12:14,130 --> 00:12:17,370
‫At this point of time, we are taking duration for height.

185
00:12:17,440 --> 00:12:18,300
‫We're the same.

186
00:12:18,510 --> 00:12:24,330
‫But if I want something different for all, I need to utilize something like this transition property,

187
00:12:24,360 --> 00:12:25,830
‫then it's timing property.

188
00:12:26,010 --> 00:12:27,840
‫It's timing, so we can do that.

189
00:12:28,440 --> 00:12:29,730
‫OK, that's done.

190
00:12:30,090 --> 00:12:32,820
‫Now let me also change on background color.

191
00:12:32,820 --> 00:12:34,920
‫So let me sit here.

192
00:12:35,820 --> 00:12:39,870
‫Let me go from blue to yellow or in something.

193
00:12:41,800 --> 00:12:42,670
‫Save this one.

194
00:12:43,300 --> 00:12:44,440
‫Now, if I get back here.

195
00:12:46,690 --> 00:12:48,790
‫Now you can see it's working fine.

196
00:12:49,540 --> 00:12:51,910
‫Now we don't need to act like this.

197
00:12:52,180 --> 00:12:55,720
‫What we can do is let me into all of this one now.

198
00:12:57,100 --> 00:12:58,630
‫So let me comment all of this.

199
00:13:00,230 --> 00:13:07,670
‫And let me utilize term property or individual item, so I jump over here, you can see I can I transition,

200
00:13:07,670 --> 00:13:11,780
‫then I have to add my property, then head, I need to add duration.

201
00:13:12,020 --> 00:13:17,060
‫This is going to be my timing function and then my delay if I copy this one.

202
00:13:17,630 --> 00:13:24,560
‫Now head, I can add multiple values for multiple item and can utilize comma to rewind multiple properties.

203
00:13:24,950 --> 00:13:28,010
‫For example, here I want to change my background color.

204
00:13:31,240 --> 00:13:34,600
‫And ahead, no one second.

205
00:13:34,680 --> 00:13:37,270
‫Lina, I don't want to pass any delay.

206
00:13:37,780 --> 00:13:40,840
‫Then again, comma, I want to change my work.

207
00:13:43,230 --> 00:13:45,990
‫So this is going to be my great.

208
00:13:47,430 --> 00:13:52,040
‫Not once again, I need to take two seconds and there's going to be ease in.

209
00:13:53,860 --> 00:13:56,010
‫And then I want my height.

210
00:13:58,700 --> 00:14:02,090
‫Those again, these and saved us on it back here.

211
00:14:04,110 --> 00:14:06,690
‫Hey, you can see it, this is working fine.

212
00:14:07,050 --> 00:14:11,790
‫Let me try to take some milliseconds so we can change so we can see instant change.

213
00:14:11,910 --> 00:14:13,650
‫So Melissa can save this one.

214
00:14:13,680 --> 00:14:14,340
‫Get back here.

215
00:14:14,730 --> 00:14:16,680
‫You can see that's how it does walking.

216
00:14:17,460 --> 00:14:22,860
‫So here you can utilize that shorthand property to pass multiple values, as well as you can control

217
00:14:22,860 --> 00:14:23,970
‫things in a single lane.

218
00:14:24,720 --> 00:14:26,520
‫Remember you going either delay here?

219
00:14:26,530 --> 00:14:30,720
‫Maybe let me add one second here, so I thought things will work fine.

220
00:14:30,780 --> 00:14:31,770
‫These width and height.

221
00:14:31,770 --> 00:14:34,010
‫But this is going to take one second delay.

222
00:14:34,530 --> 00:14:35,280
‫Get back here.

223
00:14:35,760 --> 00:14:38,240
‫One second delay with color and it's walking by.

224
00:14:41,110 --> 00:14:44,500
‫So I hope you got the idea about whole transition thing.

225
00:14:44,830 --> 00:14:46,540
‫There are a lot of things that you can do.

226
00:14:46,600 --> 00:14:53,290
‫Just jump I some reference, take some idea and start walking with these example and try out on your

227
00:14:53,290 --> 00:14:53,600
‫own.

228
00:14:53,650 --> 00:14:54,670
‫Things will be easier.

229
00:14:55,210 --> 00:14:56,460
‫That's all for this lecture.

230
00:14:56,470 --> 00:14:57,820
‫I hope this was helpful.

231
00:14:57,970 --> 00:14:59,030
‫Thank you for calling.

232
00:14:59,050 --> 00:15:00,760
‫And I see you guys in the next one.