1
00:00:00,180 --> 00:00:01,530
Hey, everyone, and welcome back.

2
00:00:01,560 --> 00:00:07,830
So last time we talked about just micro interactions, we're only covering cooking and sometimes I like

3
00:00:07,830 --> 00:00:10,540
to actually make just animations for great feedback.

4
00:00:10,830 --> 00:00:17,040
And one example of that is you saw my little kind of animation of my bouncing ball, this little notification

5
00:00:17,040 --> 00:00:18,510
bubble that was bouncing on a heart.

6
00:00:18,930 --> 00:00:20,340
And I thought that was really cool.

7
00:00:20,610 --> 00:00:25,560
And I think we should probably recreate that for our own project, maybe like a little bouncing ball

8
00:00:25,560 --> 00:00:28,150
for our cart or something like that.

9
00:00:28,530 --> 00:00:30,600
Now, there are different ways to create that.

10
00:00:30,870 --> 00:00:32,280
You can go really simple.

11
00:00:32,430 --> 00:00:35,070
What I did for something like this was much more in depth.

12
00:00:35,340 --> 00:00:41,680
If we think about motion in general animation in general, it must follow the laws of gravity.

13
00:00:42,060 --> 00:00:49,220
So what that means is if we think about how a ball bounces up and down, let me just create a circle,

14
00:00:49,230 --> 00:00:53,040
because I don't really want to mess with that frame over here because this is where our animation is

15
00:00:53,040 --> 00:00:53,700
actually.

16
00:00:54,090 --> 00:00:55,500
So I'll show you how that works.

17
00:00:55,800 --> 00:01:01,740
But the one way we can think about, like, just gravity in general, when we think about a ball, when

18
00:01:01,740 --> 00:01:03,250
a ball hits a ground, what happens to it?

19
00:01:03,250 --> 00:01:04,290
It doesn't just look like this.

20
00:01:04,290 --> 00:01:06,840
When it hits the ground, it kind of squishes just a bit.

21
00:01:08,250 --> 00:01:09,210
You don't see it.

22
00:01:09,430 --> 00:01:10,620
I mean, I'll scratch that much.

23
00:01:10,620 --> 00:01:15,990
It may just, like, shrink just a little bit like that, but it still does.

24
00:01:17,940 --> 00:01:20,310
And when a ball propels itself upward.

25
00:01:22,470 --> 00:01:25,860
It stretches depending on how fast it's going.

26
00:01:25,890 --> 00:01:31,860
So if we're thinking about something like a really squishy ball, that's how it would look due to gravity

27
00:01:31,860 --> 00:01:35,340
and velocity and all different factors due to physics.

28
00:01:36,030 --> 00:01:41,700
So what will happen is if it bounces up and then reaches just like the max height you can go, it will

29
00:01:41,700 --> 00:01:49,110
start to just recede and return to normal and then after a pause in the top and then start dropping

30
00:01:49,110 --> 00:01:53,430
down and then hit the ground like that and then same thing.

31
00:01:53,430 --> 00:01:56,990
And then over time, it will gradually stop bouncing.

32
00:01:57,300 --> 00:02:01,980
Hopefully now we need to apply that to our animation.

33
00:02:02,990 --> 00:02:04,100
So let's just delete that.

34
00:02:04,110 --> 00:02:06,210
Now, there are different ways we can go about doing that.

35
00:02:06,220 --> 00:02:10,290
We can make something really simple, just something like moving up and down, and that's going to show

36
00:02:10,290 --> 00:02:11,570
you how to create something like that.

37
00:02:11,580 --> 00:02:17,490
And I'll show you an example of what I created that fold all the laws of physics and just gravity in

38
00:02:17,490 --> 00:02:17,930
general.

39
00:02:18,240 --> 00:02:20,370
So let me jump right in.

40
00:02:20,370 --> 00:02:22,860
I have a little frame here called notification.

41
00:02:22,860 --> 00:02:28,920
And within that frame I have a little layer, not original naming by our little layer that is going

42
00:02:28,920 --> 00:02:30,780
to act as our notification bubble.

43
00:02:31,200 --> 00:02:35,340
Now, when I'm going to do is I'm going to select a plug in a very special plug in, that is, and it

44
00:02:35,340 --> 00:02:37,010
is called Thig Motion.

45
00:02:37,440 --> 00:02:37,950
And here it is.

46
00:02:38,490 --> 00:02:42,120
And what I'm going to do is I'm going to go to plug ins.

47
00:02:43,460 --> 00:02:48,880
Go traffic motion and open motion, and it's going to open up like an overlayed window.

48
00:02:50,240 --> 00:02:55,020
There it is, and you'll see our layers within that frame.

49
00:02:55,040 --> 00:02:55,860
There's only one layer.

50
00:02:56,540 --> 00:02:59,210
Now, let me just give you a little walk around with fig motion is.

51
00:03:00,860 --> 00:03:05,240
There's a time line if you've ever used something like after effects or premier pro or anything like

52
00:03:05,240 --> 00:03:08,980
that, scream flow, they all have timelines.

53
00:03:08,990 --> 00:03:15,770
Now, you can animate all these different properties like the X, Y coordinates with all that kind of

54
00:03:15,770 --> 00:03:16,190
stuff.

55
00:03:16,460 --> 00:03:19,090
And you can animated based off of key frames.

56
00:03:19,100 --> 00:03:23,150
So these are in a hundred millisecond increments and.

57
00:03:24,040 --> 00:03:29,950
That is basically what you want to do is you want to set like a keyframe and then go ahead and you can

58
00:03:29,950 --> 00:03:34,800
set another keyframe, and when you click into something like that, you can adjust it.

59
00:03:35,560 --> 00:03:40,280
So this will move on the x axis and this will move on the Y axis.

60
00:03:40,630 --> 00:03:44,380
Now, when you're done, you can actually just play and it will.

61
00:03:46,040 --> 00:03:50,900
It will show you what's happening over there, so we're going to do is I'm just going to give you an

62
00:03:50,900 --> 00:03:51,680
example.

63
00:03:52,660 --> 00:03:59,180
Um, so if I were to just look at this, I'm going to remove these.

64
00:04:01,010 --> 00:04:05,570
And I'm going to select that, why I want to move it up and down.

65
00:04:11,350 --> 00:04:12,100
And if we play.

66
00:04:13,960 --> 00:04:15,070
We'll see how it moves down.

67
00:04:18,500 --> 00:04:24,440
That's terrible animation, but you can see that we can start creating much more complex animations

68
00:04:24,440 --> 00:04:26,780
from something like this, so let's jump right in.

69
00:04:27,000 --> 00:04:32,180
I'll show you a couple little tricks that you can do along the way and what happens after you're done

70
00:04:32,180 --> 00:04:32,990
exporting it.

71
00:04:33,260 --> 00:04:35,180
I'm going to create something really, really simple.

72
00:04:35,570 --> 00:04:37,970
I'm going to bring that down.

73
00:04:39,470 --> 00:04:46,670
I'm going to update my layers because any changes over here will not be updated here unless you update

74
00:04:46,670 --> 00:04:47,590
them manually.

75
00:04:47,870 --> 00:04:52,970
So I'm just going to start at zero and I'm just going to it doesn't really matter.

76
00:04:53,000 --> 00:04:56,090
Like, you can select just different points in time.

77
00:04:56,090 --> 00:05:01,100
So I'm just going to like two hundred milliseconds and I'm going to flatten another keyframe.

78
00:05:01,340 --> 00:05:02,810
And we can do here is.

79
00:05:02,810 --> 00:05:03,650
I can.

80
00:05:05,650 --> 00:05:09,550
Go into this and I'm going to type.

81
00:05:09,910 --> 00:05:15,490
How about just 20 and you can see what type of animation?

82
00:05:15,490 --> 00:05:17,110
So I don't like doing linear.

83
00:05:17,710 --> 00:05:19,470
We can do custom if we wanted to.

84
00:05:19,810 --> 00:05:21,370
And it'll give us a little graph.

85
00:05:22,750 --> 00:05:28,480
And we can play with that if we wanted to, but if you didn't feel like actually working with a customer,

86
00:05:28,810 --> 00:05:33,560
just the easing you can just select it in is out, is in and out.

87
00:05:33,880 --> 00:05:37,210
So for this animation, I am moving upwards.

88
00:05:38,160 --> 00:05:41,610
Let's check what is out looks like so we're going to play.

89
00:05:43,110 --> 00:05:46,740
So that was a really quick so let's just see what the animation looks like.

90
00:05:48,740 --> 00:05:55,100
So you can see it's pretty abrupt and it slows down now if we use something like ease in.

91
00:05:58,720 --> 00:06:02,590
So it was very.

92
00:06:03,840 --> 00:06:11,870
Very slow to move, and then it gradually cuts just faster as it moved in and out.

93
00:06:11,880 --> 00:06:16,800
So we can just do it in and out, because if we're thinking about gravity at the most basic sense,

94
00:06:17,700 --> 00:06:18,510
we can do that.

95
00:06:18,660 --> 00:06:22,470
OK, so when we just in do I'm going to go to one second.

96
00:06:22,500 --> 00:06:26,070
So it's going to take one second to get from top to bottom.

97
00:06:26,460 --> 00:06:30,360
I'm going to make sure this is much larger in space, so.

98
00:06:32,350 --> 00:06:39,740
Let's even go even further, um, let's do 10, OK, so that looks good.

99
00:06:40,870 --> 00:06:42,280
So if we play that.

100
00:06:43,990 --> 00:06:50,650
You see how it is in and out, so it was kind of like it was slowly moving upward then when it got to

101
00:06:50,650 --> 00:06:52,650
the top, it was slower.

102
00:06:52,840 --> 00:06:54,700
Now when we come back down.

103
00:06:55,580 --> 00:07:02,240
A scroll all the way to the side, so I'm going to go over to two seconds actually at the top, I may

104
00:07:02,240 --> 00:07:03,170
just wait.

105
00:07:04,610 --> 00:07:05,750
So I may wait for like.

106
00:07:07,720 --> 00:07:15,010
Just a bit, and when I get up here, I'm going to select we're just going to stay or we just stay in

107
00:07:15,010 --> 00:07:16,720
and out, we're not going to move.

108
00:07:18,310 --> 00:07:25,600
And then we are going to go to two point two seconds, which is over here, and we're going to go all

109
00:07:25,600 --> 00:07:33,340
the way back down to what I need to do is I need to select my Y coordinates and I'm going to see the

110
00:07:33,340 --> 00:07:34,000
original.

111
00:07:34,150 --> 00:07:35,380
I'm just going to select that.

112
00:07:38,200 --> 00:07:40,840
And I'm going to paste that within here.

113
00:07:43,170 --> 00:07:50,670
And when I think about actually like something dropping, it's going to ease out, it's going to ease

114
00:07:50,670 --> 00:07:54,360
into it and then it's going to drop really quick.

115
00:07:54,870 --> 00:07:57,690
So let's see how that looks so up.

116
00:07:58,650 --> 00:08:03,660
Down, sometimes you just have to fiddle with these to get the right story nunation.

117
00:08:04,820 --> 00:08:05,890
See, I didn't like that one.

118
00:08:05,900 --> 00:08:10,010
You saw how it slowed down at the end, that makes no sense in terms of gravity.

119
00:08:10,490 --> 00:08:16,970
So I'm thinking like, you know, when you hold, you get up to the top hold and down, OK, so we can

120
00:08:16,970 --> 00:08:18,140
now start to fine.

121
00:08:18,140 --> 00:08:19,190
Tune this a bit.

122
00:08:21,580 --> 00:08:23,650
Maybe the hold is only.

123
00:08:26,820 --> 00:08:27,900
Just their.

124
00:08:30,440 --> 00:08:35,810
Maybe we start bringing it in a bit more, so we got at seven seven.

125
00:08:37,490 --> 00:08:48,100
Seven hundred milliseconds, and we can do like a half millisecond hold and then we will go to 13.

126
00:08:48,680 --> 00:08:51,190
The drop should be maybe a little more quicker.

127
00:08:51,740 --> 00:08:53,520
So I'm going to go grab that keyframe.

128
00:08:53,930 --> 00:08:55,130
I'm going to drag it all back.

129
00:08:55,160 --> 00:09:01,250
The only problem is this doesn't have a way to zoom in and out and grab keyframes like just dragging

130
00:09:01,250 --> 00:09:05,900
and just trying to select, which kind of isn't the best.

131
00:09:05,900 --> 00:09:08,690
But this is great, just working with Enigma.

132
00:09:09,290 --> 00:09:09,820
So there we go.

133
00:09:09,830 --> 00:09:14,840
We have like a little a little animation going now.

134
00:09:14,840 --> 00:09:17,510
We can even go a little bit further if we think about.

135
00:09:17,900 --> 00:09:19,010
So this is more linear.

136
00:09:19,420 --> 00:09:21,830
Now I'm just going to exit out of motion.

137
00:09:24,010 --> 00:09:25,310
So we have a little animation here.

138
00:09:26,080 --> 00:09:27,220
Now let's take a look at this one.

139
00:09:30,900 --> 00:09:33,050
Where is fake emotion all the way right there.

140
00:09:36,140 --> 00:09:37,370
Now we're at zero.

141
00:09:37,700 --> 00:09:42,680
You can see all the different types of keyframes I have in here just to get it right, and as you can

142
00:09:42,680 --> 00:09:45,380
tell, I've created like a little bounce.

143
00:09:45,380 --> 00:09:55,010
So it's going to squish and propel itself forward, upward, stop, return back to normal size and propel

144
00:09:55,010 --> 00:09:56,180
itself downward.

145
00:09:56,180 --> 00:10:03,770
And it's going to shrink inwith and look much more elongated and it's going to hit the ground again.

146
00:10:03,920 --> 00:10:06,590
It's going to shrink and it's going to do the same thing.

147
00:10:06,590 --> 00:10:10,100
But this time, if you notice when it reached Torpy.

148
00:10:11,020 --> 00:10:16,120
And then came down for the second bounce, we've lost a little bit of speed, we've lost a little bit

149
00:10:16,120 --> 00:10:19,810
of force and we're not going to jump as high this time.

150
00:10:20,320 --> 00:10:26,110
We're not going to bounce high, higher and a bounce just a little bit and then just a smidge.

151
00:10:26,530 --> 00:10:28,120
Let's see what the ending of this looks like.

152
00:10:28,990 --> 00:10:30,910
So just a smidge.

153
00:10:32,030 --> 00:10:38,060
And then we're just going to hold so that way when we do create this Super Bowl gif, it's going to

154
00:10:38,060 --> 00:10:41,930
hold for like a couple of seconds afterward before it bounces again.

155
00:10:41,940 --> 00:10:47,960
So it's not, like crazy bouncing in the corner of your screen and people are going to be really annoyed

156
00:10:47,960 --> 00:10:48,180
with it.

157
00:10:48,210 --> 00:10:48,860
So let's take a look.

158
00:10:55,460 --> 00:10:58,790
And it's going to hold then or balance again, boom.

159
00:10:59,950 --> 00:11:01,640
So that's a quick little way to do it.

160
00:11:01,660 --> 00:11:08,770
I'm going to actually show you how to break this down just a little bit more and with this one in our

161
00:11:08,770 --> 00:11:09,490
next video.