9 - Cup Animation

19 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€94.93
List Price:  €132.91
You save:  €37.97
£79.03
List Price:  £110.65
You save:  £31.61
CA$140.06
List Price:  CA$196.09
You save:  CA$56.03
A$153.89
List Price:  A$215.46
You save:  A$61.56
S$134.42
List Price:  S$188.19
You save:  S$53.77
HK$778.15
List Price:  HK$1,089.44
You save:  HK$311.29
CHF 88.46
List Price:  CHF 123.85
You save:  CHF 35.38
NOK kr1,106.89
List Price:  NOK kr1,549.69
You save:  NOK kr442.80
DKK kr708.13
List Price:  DKK kr991.41
You save:  DKK kr283.28
NZ$169.76
List Price:  NZ$237.67
You save:  NZ$67.91
د.إ367.26
List Price:  د.إ514.19
You save:  د.إ146.92
৳11,913.94
List Price:  ৳16,679.99
You save:  ৳4,766.05
₹8,449.26
List Price:  ₹11,829.30
You save:  ₹3,380.04
RM444.65
List Price:  RM622.53
You save:  RM177.88
₦168,698.12
List Price:  ₦236,184.12
You save:  ₦67,486
₨27,703.14
List Price:  ₨38,785.50
You save:  ₨11,082.36
฿3,443.25
List Price:  ฿4,820.69
You save:  ฿1,377.44
₺3,462.60
List Price:  ₺4,847.78
You save:  ₺1,385.18
B$598.25
List Price:  B$837.57
You save:  B$239.32
R1,818.71
List Price:  R2,546.27
You save:  R727.55
Лв185.54
List Price:  Лв259.76
You save:  Лв74.22
₩139,623.30
List Price:  ₩195,478.21
You save:  ₩55,854.90
₪365.09
List Price:  ₪511.14
You save:  ₪146.05
₱5,872.56
List Price:  ₱8,221.82
You save:  ₱2,349.26
¥15,186.98
List Price:  ¥21,262.38
You save:  ¥6,075.40
MX$2,025.91
List Price:  MX$2,836.36
You save:  MX$810.44
QR363.39
List Price:  QR508.76
You save:  QR145.37
P1,362.02
List Price:  P1,906.89
You save:  P544.86
KSh12,948.70
List Price:  KSh18,128.70
You save:  KSh5,180
E£4,970.06
List Price:  E£6,958.29
You save:  E£1,988.22
ብር12,601.88
List Price:  ብር17,643.14
You save:  ብር5,041.25
Kz91,089.09
List Price:  Kz127,528.37
You save:  Kz36,439.28
CLP$97,725.22
List Price:  CLP$136,819.22
You save:  CLP$39,094
CN¥725.08
List Price:  CN¥1,015.15
You save:  CN¥290.06
RD$6,009.89
List Price:  RD$8,414.09
You save:  RD$2,404.19
DA13,359.34
List Price:  DA18,703.61
You save:  DA5,344.27
FJ$226.94
List Price:  FJ$317.73
You save:  FJ$90.78
Q769.20
List Price:  Q1,076.91
You save:  Q307.71
GY$20,858.96
List Price:  GY$29,203.38
You save:  GY$8,344.42
ISK kr13,737.62
List Price:  ISK kr19,233.22
You save:  ISK kr5,495.60
DH998.96
List Price:  DH1,398.59
You save:  DH399.62
L1,830.82
List Price:  L2,563.22
You save:  L732.40
ден5,834.63
List Price:  ден8,168.72
You save:  ден2,334.08
MOP$798.95
List Price:  MOP$1,118.57
You save:  MOP$319.61
N$1,808.86
List Price:  N$2,532.48
You save:  N$723.61
C$3,668.81
List Price:  C$5,136.49
You save:  C$1,467.67
रु13,468.97
List Price:  रु18,857.10
You save:  रु5,388.12
S/375.25
List Price:  S/525.36
You save:  S/150.11
K402.01
List Price:  K562.83
You save:  K160.82
SAR375.60
List Price:  SAR525.86
You save:  SAR150.25
ZK2,719.29
List Price:  ZK3,807.12
You save:  ZK1,087.82
L472.45
List Price:  L661.45
You save:  L189
Kč2,399.23
List Price:  Kč3,359.02
You save:  Kč959.78
Ft39,362.83
List Price:  Ft55,109.54
You save:  Ft15,746.71
SEK kr1,093.94
List Price:  SEK kr1,531.56
You save:  SEK kr437.61
ARS$100,789.45
List Price:  ARS$141,109.26
You save:  ARS$40,319.81
Bs688.98
List Price:  Bs964.60
You save:  Bs275.62
COP$439,886.78
List Price:  COP$615,859.09
You save:  COP$175,972.31
₡50,922.11
List Price:  ₡71,293
You save:  ₡20,370.88
L2,521.57
List Price:  L3,530.31
You save:  L1,008.73
₲779,303.12
List Price:  ₲1,091,055.54
You save:  ₲311,752.42
$U4,282.79
List Price:  $U5,996.09
You save:  $U1,713.29
zł409.03
List Price:  zł572.67
You save:  zł163.63
Already have an account? Log In

Transcript

Back in here with our cup, which is looking pretty good fit this year. Okay, so we built this cup in the exact way that we want it to finish, when you build and design a lot of your projects. And whatever it is you're designing, you usually design it in the end position, like the way that you want it all to end up, we want this wrap right here, we want this lid right here, this is the exact position we want. So when you're animating, and you've created this thing, and you have it where you want it, you need to save this position because getting back to this position can be tough sometimes, especially if it gets much more complicated than this simple cup of only three. Well if you count the shadows like four or five layers, so what is best practices, what I always do is I grab everything and I create a position for This ending position and just move that keyframe way off to the end until I need it just so that we don't have to guess and be like I think it was about right here because this is exactly how we want it to look.

So I'm gonna grab the wrap, and you can do this two ways you can hit position. I'm gonna grab my playhead I'm gonna move it back off of the edge here somewhere, and we'll just throw it down here somewhere because you can always move the keyframes after you make them so don't worry about placing a keyframe and it possibly being in the wrong spot because you can just drag it and you can click the stopwatch so that's one way to do it. There we have this one. Now if we go to the rap shadow, remember that this rap shadow is parented to the rap so we don't need to keyframe the shadow so we don't need to keyframe this lid shadow either. That's why we parented them, and again, they only show up where the cup is. And we want that alpha mat, this mat of cup three In cup two to remain right over where the cup is.

So those will stay as well. So the only thing you're animating is the wrap the lid and the cup. And that's why I have them blue. Because I know that blue is the only ones that will be animated and you notice keyframes are blue as well. This is a very simple animation so that works. But however you want to label it color wise, I highly encourage you to use colors as much as possible, because when you use them on the simple stuff like this, it was become second nature and use it on the more complicated ones it will make a huge difference.

If we go to lid, we can go position again, do this exact same thing, have p open it up and hit the key, the stopwatch to set a keyframe or something else you can do is just choose lid and hit option P and it sets a keyframe same with option p so it's a keyframe option and your keyboard shortcut for whatever it is whether you doing scale position, rotation, opacity, it will set a keyframe for that okay, we Know this is where we want it to end. So now what we can do is if you jump back over here somewhere, and I like to work off of the end here just so I don't lose my keyframe, again, like I said, you can move your keyframe at any point. Once we kind of get this down, we can move them all over, but I like to just have this so I can kind of see my keyframes a little bit better.

Okay, so now that we have those, we can move things out of the way and go one at a time. And we have to think about what you want your animation to be. So in this case, I'm having the cup drop from the top, I'm having the lid come down and snap on and I'm having the wrap come from underneath up around the cup. That's going to be our basics of our animation. So I need to start with the cup. That's our main point.

And I know that my lids come from the top, my wraps come from the bottom. So what I'm gonna do is grab my wrap, and I'm just going to move it off and like I said, I like to grab the numbers and move them just so they know it straight out the hold down Shift, it's entirely up to you however you want to work. But if you just notice it turns to two arrows and a hand and you grab that and then you Move your mouse left or right and it will change it. This is the y position and this is the x position. So this will move it left to right, this will move it up and down. So we're going to move this down just off the screen doesn't have to be I want it to be just off the screen.

Oh, I don't want it to move more than it needs to move. Zoom out just a second here so I can make sure it's totally off the screen. Good. Do the same thing with the lid. This isn't where it's going to start, but I know that I want it just add it away. Good.

So there's my lid. And now the cup cup is going to come in from the top. So we need to grab this and move it but before we do that, actually something I forgot here. The wrap the anchor point for the wrap can stay where it is the lid I know I want it to kind of come in from the upper right at an angle and snap on to my cup, which means it needs to rotate. Now if we rotate this lid and approving up, shift our will bring up rotation and we'll leave my position where it needs to be. If I rotate this lid right now it's going to rotate in the center.

That's it. But I don't want it to do that I want it. When I rotate it, I don't want it to rotate around the center because when you snap this on to a wants to cup it's not going to rotate around the center like that. So I need to change my anchor point to leave it at zero. So again, I can use the pan behind tool. So let's grab that.

Grab my anchor point, and I want it I don't want it to be on one of these points. I actually want it to be right here. Because if you think about the reality of snapping a lid onto it, you put this part on it hooks in that little lip and then it snaps to there. Now you notice that the lid is doing something weird. So now if we do this, right, well, it's going way off to the left, which is weird. And the reason for that is because I've moved the anchor point from here with this position.

So notice where the anchor point is here on this position is in the center, so we need to move that anchor point here and then when we set it everywhere else, it will reference off of that anchor point. So I just deleted this first keyframe we had to here another little point is J and K will jump you to the next keyframe k moves to the right, J moves to the left, it will move to the next keyframe on any not just on your layer that's selected, but any of them so that's a nice fast way to jump from keyframe to keyframe. So keyframe position here, there's nothing there. We have our pan behind tool. I'm going to grab this, move it over notice there's no line now because it's not moving between two keyframes. I'm going to stick it right there.

Boom. Perfect. Now if I jump back to here, the lid hasn't moved, but that's where I want it because now if I rotate, notice it rotates as if it were stuck on to the cup itself. And that's exactly what we want. Like that. We have to do the same thing with the cup here in just a second.

But for right now, I'm going to take this up and off of the screen like that. Okay, for the cup, jump to that keyframe. We want it here. We're on the cup, we have the pan behind tool. Keep, remember, when the cup dropped, it's going to hit bounce a little bit and kind of move to one side. If you remember the reference video that we did.

It kind of moves it doesn't go straight down, boom and bounce like a ball. It doesn't just have one side bounce up, the entire thing kind of shifts. So what we're going to end up doing is having a vertical animation, a horizontal animation and a rotation animation. We have to decide where do we want it to rotate from, I'm going to have it rotate right from right here on this left hand side, you just need to make that decision where you want the rotation to happen. I'm gonna grab this pan behind tool and I'm gonna stick it right down here on proximately this point here, so that when we do in your rotation, shift our it's gonna bring my rotation up. That's what my cups gonna rotate like, which is what I want because what I wanted to do is drop down and hit bounce from this way, a little bit, move to the left a little along here, so you just have to pick one side that you want to maintain position four, so left hand side they're doing that and do this, okay, and our position, not that one.

We need to move back to our other keyframes and move it up out of the frame. There we go. Now we have an empty Canvas and almost everything is out of the position we need this lid off just a little bit, that's why make sure that I can see the cup is still in the frame as well. That's how you make sure that I zoom out so that I can see the entire workspace. So the entire canvas or artboard if you're used to that, because the cups going to move a little bit to the side. That means that our wrap and our lid would have to move to if we didn't want it to end where we had it.

But in order to combat that, what I'm going to do is this keyframe here, this is where the cup is going to end, which means that if I want it to move to this position, I need to move everything over a little bit and then have it scoot to this position. Now if that makes total sense or not, but instead of having to move the lid and the wrap Over to meet my cup. I'm going to have my cup end here and move backward from there. So here's where it's going to hit. Okay, to make this a little easier to work with, we move the wrapping the lid off. So now what I'm going to do is grab the positions for both of these, all these keyframes, and I remove these over out of the way.

That way when we do any preview whatsoever, we only have the cup coming up and down. That's it. All right. Now we're only going to keyframes dropping from here to there and let me change this like to work in half. Mostly all I'm doing is looking at the animation. So it will go a little bit quicker now it's going way too slow.

Obviously that's not what we want because we're it's taking forever to get it to drop. Now I can grab this keyframe, move it over to where it's going. And this is the, this is the resting position, the very, very end, that's where we want it. Which means if we grab this keyframe and we copy it, and I move over three, four frames, and I paste it, it's gonna be the same position. So nothing's gonna happen between these two. And that's exactly what I want.

I'm working backward from here. Because what I want to do is on this keyframe, I want to actually move it. Now how far you want it to slide is entirely up to you. I'm going to have it slide just a little bit, and we can adjust this of course. So I'm just going by feel like what I think it's about right and we're going to go 860 and the reason I want to know what number this is right here is because we have to have it dropped from that same position because if I haven't dropped like this, it's gonna drop sideways and then jump back to the left. See how it's moving kind of sideways and then to the left.

You can see that line there. I don't want that. I want this to be at 860 and come straight down. Right now it's coming straight down move to the left. When you're animating, the biggest thing to keep in mind is that you are doing one thing at a time. So I'm thinking about my vertical, and then I'm thinking about my horizontal and then I'll start thinking about my rotation.

Don't try to do it all at once, it will get way too confusing, no matter how complex the animation, you can always break it down into smaller components. We have the vertical of the cup, and then I have the horizontal of the cup. Now I'm going to have the rotation and then we'll start working on what that looks like. So what I want to work on now is getting this drop to actually look okay, because right now it's completely linear. And the only reason I haven't moving to the left is because I want to preserve this keyframe, if I didn't care where it ended, I wouldn't have this keyframe here, I would just have it coming straight down. But I do know that I want it to move faster as it comes down and pretty fast.

So that means that these guys keyframes need to be a lot closer. So if I move these way closer here, there, so that's coming in nice and quick, like that, we're going to exaggerate it just a little bit here. Nice. Okay, I'm liking that speed a lot better. And if you hit n, if you hit your playhead and put n, now it's only going to give me this position over and over this section, so I don't have to keep clicking my playhead back and forth so I can see what my animation looks like. Hey, I'm liking that.

That speed actually looks pretty good as far as the vertical drop. This is the end. So I want that to actually be at zero. And we'll finesse this here a little bit as well. But the one the influence coming out of this one, I want this one to speed up Come in a little bit slower. To this dip here, it would actually slow down and then speed up.

We don't want that. All right, even this out. Here we go want to speed up. But it needs to speed up, it doesn't stop. So as you're thinking about this speed here, we want it to speed we want it to slow down, and then boom, instantly stop because it's going to hit when the cup is dropped. It's continuing to speed up, and then it instantly stops.

So let's look at this motion. Here we go. Good, that's looking good. So this is what I want. As far as my speed graphs go, I actually can speed this up a little bit more. Because I want it to look like you have dropped it and it's just falling into frame.

And continuing to speed up. So that's what we want might actually even move these keyframes closer. grab these. Now that's just going to Yeah, there we go. looking pretty good. Okay nice and fast.

All right. So that's that one drops to here when it hits. If you want it to bounce back up it can, what I'm going to do is only have one side bounce up. So when it hits here it's flat, I'm actually going to add some realism to it. I'm going to give a little bit of a rotation to this. So I want this area right here rotation to be zero.

But here, I'm going to give it just a little bit not sure what let me put the playhead to here so I can see what the rotation is And I'm going to say about negative four, I only want a little bit just when you drop a cup, it doesn't fall perfectly straight as you saw in the videos. So I want that little bit of off to the side. Maybe going a little bit too fast now slightly rotated. So here, it's negative four, and notice it gets to zero here. So we're going to go here and it's going to bounce, it's going to be a negative bounce. And you can have a bounce However, if you want.

It's going to come back down to zero. You can have this bounce as many times as you'd like, and then that slide ends so let's watch this Now we're getting a little more natural movement. So it's starting to look like oh, yeah, we dropped this cup and it bounced and it moved to the side. So now you just need to finesse those, just like we did with the drop. Vanessa speed, finesse how far apart you want these, how quickly you want it. At this point, the art of the animation really comes into effect because now you are deciding what it's going to look like and adding that realism to it.

So I slowed everything down there by spreading it apart. A little bump like that. And think about the realism of it. It's going to hit here hard and bounce up as it moves to the side. So I've finessed it around the rotation and the drop, and just moving things here and there until it looks about right to me. What I ended up doing with these rotations is I just grabbed all of them and in the graph editor here, just grabbed all the rotation, they're all yellow.

And I hit this right here which is auto busy. And it creates that smooth transitions. Like I mentioned before, it's so small that in a an animation like this, I want it to look natural and it for the most part, for me, it does look natural. And with those auto Auto bezzie a, it creates that not abrupt shifts, but it slowly eases into each one, which is kind of what it does. So we're getting that balance looks about right to me, till the cup drops and bounces and moves to the left. It's it looks natural, make it look natural.

That's all it is. And at this point is just massaging the distance between these and going in To your graph and creating the speed that you want to make it look the way that you want it to look, it's all just a finished thing. The cut because it drops a move to the left and has that little bounce in it. There's a lot of stuff that's going on with that, and it's the most complicated. So the next two we'll get into in the next lesson to bring the lid on snapping in and the wrap coming on.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.