Hey, everyone, and welcome back.
So last time we talked about just micro interactions, we're only covering cooking and sometimes I like
to actually make just animations for great feedback.
And one example of that is you saw my little kind of animation of my bouncing ball, this little notification
bubble that was bouncing on a heart.
And I thought that was really cool.
And I think we should probably recreate that for our own project, maybe like a little bouncing ball
for our cart or something like that.
Now, there are different ways to create that.
You can go really simple.
What I did for something like this was much more in depth.
If we think about motion in general animation in general, it must follow the laws of gravity.
So what that means is if we think about how a ball bounces up and down, let me just create a circle,
because I don't really want to mess with that frame over here because this is where our animation is
actually.
So I'll show you how that works.
But the one way we can think about, like, just gravity in general, when we think about a ball, when
a ball hits a ground, what happens to it?
It doesn't just look like this.
When it hits the ground, it kind of squishes just a bit.
You don't see it.
I mean, I'll scratch that much.
It may just, like, shrink just a little bit like that, but it still does.
And when a ball propels itself upward.
It stretches depending on how fast it's going.
So if we're thinking about something like a really squishy ball, that's how it would look due to gravity
and velocity and all different factors due to physics.
So what will happen is if it bounces up and then reaches just like the max height you can go, it will
start to just recede and return to normal and then after a pause in the top and then start dropping
down and then hit the ground like that and then same thing.
And then over time, it will gradually stop bouncing.
Hopefully now we need to apply that to our animation.
So let's just delete that.
Now, there are different ways we can go about doing that.
We can make something really simple, just something like moving up and down, and that's going to show
you how to create something like that.
And I'll show you an example of what I created that fold all the laws of physics and just gravity in
general.
So let me jump right in.
I have a little frame here called notification.
And within that frame I have a little layer, not original naming by our little layer that is going
to act as our notification bubble.
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
is called Thig Motion.
And here it is.
And what I'm going to do is I'm going to go to plug ins.
Go traffic motion and open motion, and it's going to open up like an overlayed window.
There it is, and you'll see our layers within that frame.
There's only one layer.
Now, let me just give you a little walk around with fig motion is.
There's a time line if you've ever used something like after effects or premier pro or anything like
that, scream flow, they all have timelines.
Now, you can animate all these different properties like the X, Y coordinates with all that kind of
stuff.
And you can animated based off of key frames.
So these are in a hundred millisecond increments and.
That is basically what you want to do is you want to set like a keyframe and then go ahead and you can
set another keyframe, and when you click into something like that, you can adjust it.
So this will move on the x axis and this will move on the Y axis.
Now, when you're done, you can actually just play and it will.
It will show you what's happening over there, so we're going to do is I'm just going to give you an
example.
Um, so if I were to just look at this, I'm going to remove these.
And I'm going to select that, why I want to move it up and down.
And if we play.
We'll see how it moves down.
That's terrible animation, but you can see that we can start creating much more complex animations
from something like this, so let's jump right in.
I'll show you a couple little tricks that you can do along the way and what happens after you're done
exporting it.
I'm going to create something really, really simple.
I'm going to bring that down.
I'm going to update my layers because any changes over here will not be updated here unless you update
them manually.
So I'm just going to start at zero and I'm just going to it doesn't really matter.
Like, you can select just different points in time.
So I'm just going to like two hundred milliseconds and I'm going to flatten another keyframe.
And we can do here is.
I can.
Go into this and I'm going to type.
How about just 20 and you can see what type of animation?
So I don't like doing linear.
We can do custom if we wanted to.
And it'll give us a little graph.
And we can play with that if we wanted to, but if you didn't feel like actually working with a customer,
just the easing you can just select it in is out, is in and out.
So for this animation, I am moving upwards.
Let's check what is out looks like so we're going to play.
So that was a really quick so let's just see what the animation looks like.
So you can see it's pretty abrupt and it slows down now if we use something like ease in.
So it was very.
Very slow to move, and then it gradually cuts just faster as it moved in and out.
So we can just do it in and out, because if we're thinking about gravity at the most basic sense,
we can do that.
OK, so when we just in do I'm going to go to one second.
So it's going to take one second to get from top to bottom.
I'm going to make sure this is much larger in space, so.
Let's even go even further, um, let's do 10, OK, so that looks good.
So if we play that.
You see how it is in and out, so it was kind of like it was slowly moving upward then when it got to
the top, it was slower.
Now when we come back down.
A scroll all the way to the side, so I'm going to go over to two seconds actually at the top, I may
just wait.
So I may wait for like.
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
and out, we're not going to move.
And then we are going to go to two point two seconds, which is over here, and we're going to go all
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
original.
I'm just going to select that.
And I'm going to paste that within here.
And when I think about actually like something dropping, it's going to ease out, it's going to ease
into it and then it's going to drop really quick.
So let's see how that looks so up.
Down, sometimes you just have to fiddle with these to get the right story nunation.
See, I didn't like that one.
You saw how it slowed down at the end, that makes no sense in terms of gravity.
So I'm thinking like, you know, when you hold, you get up to the top hold and down, OK, so we can
now start to fine.
Tune this a bit.
Maybe the hold is only.
Just their.
Maybe we start bringing it in a bit more, so we got at seven seven.
Seven hundred milliseconds, and we can do like a half millisecond hold and then we will go to 13.
The drop should be maybe a little more quicker.
So I'm going to go grab that keyframe.
I'm going to drag it all back.
The only problem is this doesn't have a way to zoom in and out and grab keyframes like just dragging
and just trying to select, which kind of isn't the best.
But this is great, just working with Enigma.
So there we go.
We have like a little a little animation going now.
We can even go a little bit further if we think about.
So this is more linear.
Now I'm just going to exit out of motion.
So we have a little animation here.
Now let's take a look at this one.
Where is fake emotion all the way right there.
Now we're at zero.
You can see all the different types of keyframes I have in here just to get it right, and as you can
tell, I've created like a little bounce.
So it's going to squish and propel itself forward, upward, stop, return back to normal size and propel
itself downward.
And it's going to shrink inwith and look much more elongated and it's going to hit the ground again.
It's going to shrink and it's going to do the same thing.
But this time, if you notice when it reached Torpy.
And then came down for the second bounce, we've lost a little bit of speed, we've lost a little bit
of force and we're not going to jump as high this time.
We're not going to bounce high, higher and a bounce just a little bit and then just a smidge.
Let's see what the ending of this looks like.
So just a smidge.
And then we're just going to hold so that way when we do create this Super Bowl gif, it's going to
hold for like a couple of seconds afterward before it bounces again.
So it's not, like crazy bouncing in the corner of your screen and people are going to be really annoyed
with it.
So let's take a look.
And it's going to hold then or balance again, boom.
So that's a quick little way to do it.
I'm going to actually show you how to break this down just a little bit more and with this one in our
next video.