Animation Principles: The secret sauce to master motion design

1. Class Trailer: Hi everyone, It's standard. And in this class, I'm going to teach you the principles of animation, the secret sauce to master motion design. And I'm going to start by asking you this question. Have you ever wondered why your animation looks so dull and basic, while others look so soon with beautiful movement. I did my animation scooters used to look like this. And after diving into the science behind good movements and started to learn the secret sauce of a beautiful animation. My animations. In this class, I'm going to take you down the path I took years ago. And I would show you the principles and tools to upgrade your skills and create awesome animations. You'll be learning to use the graph editor to have more control over your animation and apply the emotion you desire. At the end of the class, you will be creating a small animation piece by applying the principles that you've learned during the lesson. Keep in mind that this is a challenging class. But I promise you, if you ingest the lessons and apply the exercises, your animation skills will be on a different level. Good luck. 2. The Project: Alright, for the class project, you'll be submitting a small animation piece of your choice, revealing the class title. But the most important thing here is to use the principles that you've learned during the lessons and apply them to your animation. The class is splitted into two parts. The first part, I teach the principles with an exercise to do at the end of each lesson to practice what you've learned. The second part is where I start creating the class project. In the project and resources, you can find After Effects project files. So you can download and use, make sure to post your work on the project gallery so you can get feedback and support. 3. The Basics of After Effects: In this lesson, I'm going to cover some of the basics of after effects software for those who are not familiar with it, it's a bonus lesson. So if you are an experienced motion designer and familiar with this topic, you can skip this lesson, okay, so I'm inside after effects. And the first thing you want to do when you want to start a new project is to create a new composition. So you can go to composition, new composition, or you can press Control, Control N on keyboard. Alright, so here we have the composition settings. You can choose your composition name. I'll name it. Basics of After Effects. Alright, here we have a bunch of presets you can choose from. You can keep it costume for now. The dimensions 1080 by 1080, and the frame rate is 30. You can choose whatever frame, frame rate you want to go with. 24 or 30, whatever you want. Alright, press Okay. And now a new composition has been created inside this project panel. This project panel is the home of your, of your all your assets and the composition that you will be creating your projects. Alright, now, let's create a new shape layer inside this composition. You can go to this rectangle tool, press and hold, and you will have a bunch of options you can choose from. I will choose the rectangle tool. Go over here, click and drag, and make sure to press Shift and hold to make it a proportional shape. Alright, let me fill it with color white and remove the stroke. I don't need it. Alright, so here I have my shape. You can access the scaling by pressing S on keyboard. Here we have the scaling properties. Can scale it up and down. And the rotation you can plus R. And you can rotate it left and right. But as you can see now, the rotation is not happening from the center. And the scaling as well. It's not scaling from the center. That's because our anchor point is not centered inside the object. What you can do is you can press Y on keyboard, press control and hold. And you can drag it to snap it in the center of the object. Or you can use the shortcut on keyboard. You can press Control command on Mac or Control Alt Home on Windows. So now I have my shape. I can scale it now, and it's scaling from the center. And I can rotate it from the center as well. You can press P on keyboard to access the position properties. We can move left and right, up and down. Alright, so now I will add a simple animation to this shape layer two over the square root. Okay? I select the layer and press P on keyboard to access the position properties. Let's make the square smaller. Alright? Okay, you go over this clock icon. This clock icon and a new keyframe has been created. You can use the plus sign buttons on keyboard to zoom in and out on your timeline. Or you can use this slider over here. Alright. Let's move this over here. Okay? Now I move the timeline to the left, to the right. And let's move this shape over here. And a new keyframe has been created as well. Okay, Now, if I want to preview the animation, first, I will need to limit the work earlier of my timeline by dragging the slider over here. Or I can press N on keyboard. To limit my work area. Is for, is to end the work area. And B is to begin the work area or to preview the animation that you want. Alright, so this is helpful to limit your work area, especially when you have a complex animation scene and heavy layers. So sometimes you need to preview a specific part of the animation without taking so much time. Alright, so now you can press Space on keyboard to preview your animation. And here it is. Alright, so you can make as well your animation faster if you want, by making the two keyframes closer to each other. So you can drag this over here. So now your animation as faster and you can make it slower as well by making them far from each other, like this. Right? So as you can see now, the animation looks stiff since it's a linear movement. Here we add the easy ease. So in a nutshell, Easy Ease makes the animation looks less linear. So you can select the two keyframes. Right-click. Go to keyframe assistant, and you can choose easy ease, or you can select all the keyframes and press F9 on keyboard. So here you have your easiest. So it begins. So it has some momentum before it starts. And then at the end it slows down. Alright, so now I will need to duplicate this layer. So I want to wake one with easy ease and one without Easy Ease. So let's select this layer and you can click Control or you can press Control on keyboard and click on the keys. So it's back to normal Without Easy Ease. And the second one, it has the easiest. So what I can do, I will put the above layer. Okay, so I will show you the difference between easy ease and without disease. Alright, so they want at the bottom, the one that doesn't have any ease, ease, just linear movement. And the one above, it has the Easy Ease. It's obvious. Alright, now let's group these two layers together in After Effects. We call it pre-comp. So you can select these two layers. Right-click precomp. We can name your pre-comp, whatever you want. Let's name it. Two squares. Alright? Here we can check the option you want, like Adjust composition duration to the timespan of the selected layers. I will check it. Here. We can check this box as well to open new composition. When you create your preComp, I will leave it as is for now. Can press. Okay. Okay, so now I have my two layers in one camp. Alright, so now I can duplicate as well this comp by pressing Control D on keyboard. Now I have two columns. We can drag this comp, scale it down, and put it over here. Alright? Alright, so this is a quick glance at the pre-comps and how you can utilize them in your projects. Okay. Now, let's see what parenting is and how we can use it. Parenting allows you to easily control layer or number of layers by linking them to a common parent. Okay, Let's say I need to rotate this object, these two, OK, it, before I start, you can check this comp layer. It's called collapse transformation. When you check it, the comp fits the shape dimension. So see the difference. Okay, Now it's, it's taking the whole comp. After checking it. It fits the just the dimensions of these two squares. And you can center the anchor point as well. Alright? So let's say I need to rotate this layer and I need this layer as well to follow the rotation of this layer. So first I need to apply a rotation animation to this one. Press R to access the rotation properties. Click this clock icon, move the timeline to the right. And maybe something like this. Let's preview it. Okay? Maybe I'll make it longer. Alright. Now I need this layer to follow the rotation of this layer. What I can do is I can go to this parent, pick whip, click and drag this layer. Alright, so now this layer is moving the rotation of this layer, okay? Uh, one more thing. If you need to access keyframes that are applied to a layer, you can click on the layer and press U on keyboard. Alright? Okay, so now let's see how we can export. First, make sure you have Media Encoder up and go to composition. Add to Media Encoder Queue. Over here. You can choose whatever settings you want. Format H.264, preset, high bitrate, everything else is good. You can choose the location. I will choose desktop, click Save. Okay? And finally, use, you, press the Start Queue. Alright? Or you can randomize. You can choose the Add to Render Queue. Without using Media Encoder. We can choose your settings over here. Output modules. You can choose your format, H.264. And by the way, in After Effects 2023, they added this format, each 0.264, which is good. That's okay. And you can choose the location you want. Desktop, Save and you press Render. Alright? Alright, so that's it for this lesson. And your exercise is to practice what you just learned. Start animating stuff gets used to pre-comps and play around with parenting. If you have any questions, just post it on the discussion gallery and I'll be more than happy to help you. Cheers. 4. Timing & Spacing: Alright, so in this lesson, I'm going to talk about the two core principles of animation, the timing and spacing. And I believe if you put enough effort to understand these essential principles, you will be much, much better than you or most of your fellow animators. Okay, so what is timing? First, I will start by applying a simple animation to this circular shape. I would go to the position, right-click separate dimensions, so I have more control over the X and Y position. Keyframe. Go 24 frames and drag the circle over here. Okay, so 24 frames, since my composition is 24 frames per second. So it's going to take 1 s to complete this animation. So basically this is my timing of the animation. Alright? So the first key frame and the last keyframe defines my timing of the animation, which is 24 frames, which is 1 s. Okay, so what if my animation feels slow? I can, what if I want to make that my animation faster is by taking this keyframe and make it closer to the first keyframe. Let's say 15 frames now, my animation is faster. So what I'm changing now is my timing of the animation. So if you see the animation now, it looks linear and stuff. So what we usually do is we apply Easy Ease to make it less linear by selecting the keyframes and pressing F9 on keyboard. But the thing is, most of the animators apply the easy ease without knowing what is happening behind it. So I'm going to turn on this adjustment layer. This layer has an echo effect on it. So let me return to a linear movement. Alright? Okay, so this echo effect shows the frames between these two keyframes. Alright? This is how our frames look like between these two keyframes in a linear movement. Okay, let me now apply the easy ease and see what will happen. Okay, So as you can see now, the frames at the beginning of the animation are closer to each other and at the end are closer to each other as well. And that's why the animation is a bit slow at the beginning and a bit slow at the end. And so the easy ease is affecting the spacing between the frames and that the timing of the animation, our timing is still the same. It's still 24 frames, 1 s. Okay, this tool over here is the graph editor. This tool is the most important tool in After Effects. Here you can control your spacing of the animation. Let me turn on the echo effect and let me turn it, let me turn my animation and two linear. So go to the graph editor. Okay? So when you have the linear interpolation huge line and the curve editor will look like this linear line. Let me apply the easy ease. And let me turn on the echo effect. Alright? So if I go over here and make the hand like this, see what is happening here. The frames at the beginning of the animation are getting closer to each other. And if I play around with this handle as well, the frames at the end of the animation are getting closer to each other. So the flatter the curve, the slower the animation, since the frames are getting closer to each other. And the steeper the curve, the faster the animation, since the frames are far from each other, you will know more about this in our next lesson. So if I want my circle to move fast in the beginning, slower in the middle, and faster at the end. Okay? I can make this handled like this. I can make the curve is steeper, so the frames will be far from each other, which will make the animation faster. I can make this handled like this. To make it steeper in the middle, to all solid, to make it flatter in the middle and steeper in the end. In the middle, the frames are close to each other. And in the end, the frames are far from each other, which will make the motion and faster. So it starts really fast. In the middle. It's really slow since the frames are close to each other. And then it moves fast. Alright, so now that we've covered what is timing and what is spacing, your exercise is to do three or four different spacing options like we did in this Lesson. Play around as much as you can with the graph editor. It's gonna be your friend during this class. And don't forget to post your exercises on the project panel. Cheers. 5. The Value Graph: Alright, so in this lesson, I'm going to dig a little deeper in the graph editor and specifically the value graph. I've made this chart for you to show you the different spacing you can get by changing the value graph. So what are the types of graphs that we have and how we can access them. Okay, so now we have this shape layer and we have an x position animation applied on it. Alright? And these lines between, between them are the echo effect that we have in order to show the frames between these two keyframes. Okay, So in this small tool here, this is the graph editor. You can select it. And over here we have choose graph type and options selected. And we have this Edit Value Graph and Edit Speed Graph. For now, I will select the Edit Value Graph since we will be working on it. Alright? So I select my keyframes. And this is the line that we have since it's a linear animation, we have this straight line. Okay? Just a quick note. Make sure that your position is separated. So you have x position and y position by right-click, Separate Dimensions. Now they are already separated. Alright, so in the value graph, you can use this slider to zoom in and out, or you can use the minus and plus button. Alright? And this small window over here can fit your graph view. Alright? Okay, so the value graph, this is the value and this is the time. And as you move forward in time, the value increases. Okay, So now let me apply easy, ease to these two keyframes. Press F9. Alright? As you can see now, since I applied the easy ease, now we have an ease in the beginning of the animation and is at the end of the animation. So the frames are closer to each other. Okay, Now we want to develop the ability to look at the animation curve and figure out what is happening. So the animation curve shows you the change in value over time. So the steeper the curve is, the faster the object is going to move. Let's say if I select this Bezier handle and I move it like this. What I'm doing here is I'm making the curve flatter at the beginning. But over time, if you move forward, the value is increasing. So the motion is beginning really slow and it's going to speed up one, the curve is steeper. So the key things to remember here are the following. Steeper equal faster, steeper equal faster, and flatter equal slower. So if I take this Bezier handle and make it like this, now I'm making the curve steeper. So what is happening here is the frames are away from each other, which will make the animation really fast at the beginning and at the end. The frames are really close to each other, which will make the animation really slow. As you are playing around with this curve, see what's happening here in this spacing between the frames. And you will start to make sense of all these. It just need practice and focus to absorb it. Alright, so now I'm going to apply some little animation to show you how can I utilize the value graph to make the animation more smooth. Okay, so let's say I have this plate over here, and I have this cup of coffee. Just ignore the shapes and the colors. Alright? So I will select the blank layer. It's a composition and I have all my shapes inside it. Alright? So I have my anchor point in the middle. So now what I'm gonna do is I'm going to press P on keyboard. I'm going to separate my dimensions. So I have more control over the x and the y position. Okay, so let's select these keyframes, create keyframes, move it around like 24 frames, let's say. And let's drag this to the beginning and put the plate outside of the frame. So now as if it's entering the frame. Alright, I think 24 frames is a good timing. It's like 1 s to arrive. Alright, so now let's apply some rotation plus all on keyboard. Select keyframe. You can press U to reveal or all the. Keys that we have, that we have on this layer. Okay, let's rotate it. Maybe I don't know. Like this. Alright, That works for me. Alright, now, let's apply some scaling to this capsule. When the plate arrives, the cup of coffee is going to pop up. So let's press S select first the layer, press S, create a keyframe. Move it like this. Maybe, I don't know. Bunch of frames than 15 frames and out. Alright? Okay. So as you can see now, my animation is super basic. I just have the keyframes. It's a linear movement. I don't have any easing over them. So first let me select all the keyframes that I have for the plate and press F9. Easy, ease. Okay, now the animation looks better. But now since I'm familiar with the value graph, I can have more control over my, over the spacing of the animation. So let's say I want the plate to arrive more smoothly, okay, so I can select my positions. Go over to the graph editor. Now. So the red line is my x position and the green line is my y position. So I can select my keyframes, select this Bezier handles, and move them like this. So as you can remember, the flatter, the curve, the slower the animation. So I can make it like this. So now watch what is going to happen. Okay, now, let me apply the same thing for the rotation. Go to the graph editor. Select this keyframe and move it like this. I'm making the curve flatter. See the difference. It arises really slow. It's taking the time to stop. Now, I can extend the timing a little bit to be to be more obvious for you. Yes. Alright. Now let's see, for the scaling of the cup. That's applied is 0s. Okay, the scaling for the cup is good, but let's apply the same thing as we did for the plate. Let's go to the Graph Editor. Select the key, this key frame, and move the Bezier handle like this. The flatter the curve, the slower the animation. Okay, maybe we can extend the timing a little to make it more obvious. C. Alright, so now I'm going to show you a new way of animating shapes and how you can use the value graph to control the spacing of your animation. So I'm going to create a new wavy path using the pen tool over here. Or you can press G on keyboard. And I'm going to use the pen tool. Okay, so create the shape. Okay, so now I'm going to go to this play button and I'm going to add the trim paths. I'm going to use the, the end and the start to make a short shape like this. Okay, and after that I'm going to use the offset to animate the shape along this path. Move it out of the frame. So that this clock icon. And I'm going to move it like let's say 2 s. Move it all the way. Okay, so now I got this animation. Alright, so let's select all the keyframes and press F9 to easy ease. Okay, so as you can see now, this is my animation. Nothing much is happening. This shape is moving along this path. What I'm gonna do now is since it's a wave, the, this shape has to speed in some specific areas and it's, and it should slow down in some areas. So now I'm going to add keyframes on where the shape should slow down and where it should speed up. Okay, so first it's going to start here. It's gonna, it's gonna be a bit slow over here. And over here, it's going to take up the speed. So I'm going to create a new keyframe. And over here, it's going to slow down again keyframe. And at the tip here, It's going to speed up again. Over here, it's going to slow down. Alright, so now I will go to the graph editor. Select the offset. And here are my key frames. Okay, so now I'm going to play around with this Bezier handles. But before I start, select all the keyframes in the middle and go over here and select convert selected keyframes to auto bezier. This tool lock the Bezier handle together. Alright? Okay, So here the animation should be slow since it's moving upward. So I'm gonna make this Bezier handle like this. So I'm going to make the curve flatter. Flatter equals slower. And here it's going to take up the speed, again, this keyframe. So I'm going to make, Let's, let me zoom in. Alright. So here it's going to take up the speed again. So I'm gonna make it steeper it like this. And here it's going to slow down again. So I'm going to make the curve flattered here. Make sure not to have a straight flat line since you don't want the animation to stop. So you just make it like this. Alright? And over here it's going to take up the speed again. So I'm going to make the curve steeper. And here it's going to slow down again. Let's see what we have now. Alright. Okay, so it's moving slow over here. And then it speeds up again. And it slows down. And here it speeds up again and it slows down. And that's pretty much it. Okay, So just one more thing. Before I finish this lesson. You can go over here and check this show transform box. One, it's active. You can select all your keyframes. Sorry. Okay. And you have this box highlighted over your keyframes. So what you can do with this box is you can change your timing if you want. For the whole animation. Let's say you think that the animation, that the whole animation of this shape is really slow or fast. So to make it slow, you can drag this over here. Now the whole animation is slope and you can make it faster as well by dragging it like this. Okay, now we have to exercise what we have just covered. You can get the project file from the project panel and try to practice as much as you can. Since this subject is a prerequisite to unlock your animation skills. 6. Bonus Lesson : Alright, so in this lesson, I'm going to cover some of the most useful and essential tools inside After Effects. I believe if you are familiar with After Effects, you know what parenting now's and mats are. This lesson is for the ones who are not familiar with After Effects and these tools. So if you are an experienced motion designer, you can skip this lesson. Alright, so I will start with parenting. Here I have two shapes. I have the first one, I colored them with Brown. I have this circle, I have the cup of coffee and I have this d is two layers. Alright. So now what if I want the cup of coffee and this team to follow the circle? So if I move this circle around it smoothing alone and the rest of the shapes are not following the circle. What I can do is I can select the rest of the layers and I can use the pick whip and drag it to the circle layer to make it apparent. So now if I move the circuit around, the rest of the shapes are following it. Okay, but sometimes this is not the ideal way to do it. Sometimes you need one layer to control or handle all the shape. So what I can do, that knee, press Undo. I can create a null object. You can go to layer new, or you can press Control Alt Shift Y. So here I have my null object. It's an empty object, doesn't have any anything inside it, and it won't be shown in your render. So let me put it in the middle. The anchor point. Alright, let me drag it above the shapes. Ok, so now I have this null object. So I can select all the shapes, use the pick whip and drag it to the nano. And now I have the null as a parent. So it's controlling the whole shape. Okay, let me name it e.g. shape. One controller. Alright. Sorry. Okay. Okay, so what I can do more is I can create a, another null for the cup and this team alone. So I can create another Null Control Alt Shift while you drag it over here, select the cup and the steam and use the pick whip and drag it to the null. Move the anchor point to the center of the comp, and let's name it. Controller. So now if I move this layer, if I move the cup is let me uncheck this napping for now. If I move the null, it's moving the cup with the steam. But now if I move the shape one controller, the cup is not following. That's because now the cup has its own controller. So what I should do is I should connect the cup controller to the shape controller or the master controller of a few months. So I will select the cup controller, select the pick whip, and drag it to the shape controlling. Now this shape controller is controlling all the shapes, including the null or the handle of the cup. So now if I move the shape one controller, it's moving. So the whole idea is now that I can control the cup, would this controller alone, and I can control the whole shape. Would this shape one control. You can scale and scale out left and right. And I can apply the same thing for this shape as well. Let's see here we have a MasterCard and it has like the shapes inside it. So I want this credit card to have its own handled. So what I can do is first I want to create a new null. Select the MasterCard and the shapes and all the shapes inside this rectangular shape. And I'll use, and using the pick whip, drag to the null four. Let's put the anchor point at the center of this MasterCard. That's the next card. So now I have control over the court. Now I can create a new now, let's name it and put the anchor point in the center. Let's name it. Mastered. Now, I can select this card controller, use the pick whip and drag it to the master node. And I select the circular shape and use the pick whip to make it apparent to the master node. Now the master null is controlling the old shapes and the cart controller is controlling the card along. Alright, so now what I can do is I can create a null that can control both shapes in one day. So now I have this master node, or let's name it like this one shape two controller, right? So it's controlling this shape and this NADH is controlling this shape. Now I can create a new null. Let's name it, master control. And I can select the shape, one control, which is controlling this whole shape. And use the pick whip to drag it to the master node and shape to use the pick whip regular to the master control. Now this null is controlling both shapes. I can scale, can rotate, can move it left and right, up and down. Alright, now let's talk a little bit about matt. Alright, Matt is an object that controls the visibility of another object. Let's say I have this bowl over here, and I want to do a simple animation. Let's say I want the ball to drop from here to here. Apply some basic animation keyframe. We would like 1 s and drag it down here. Alright, so now I have this simple animation. Now I'm going to use the mat, as we said, that controls the visibility of this object. So what I can do is I can create a new solid layer. Or I can press Control Y on keyboard. You can change, you can choose the color that you want, plus, okay? Alright, so let's scale it down like this. Okay? So now this shape, this shape over here, controls the visibility of the bowl that I have. So what I can do is I can go to the ball layer, go to the Track Matte. If it's not visible to you, you can toggle switch mode and it will appear. Sorry. Alright. So I can go to the ball layer, go to the Track Matte, and select the solid shape that I just created. Okay, So now my bowl is using this layer as an Alpha matte. Okay, but as you can see now, this is not what I want. Since I want the ball to be invisible right here and outside this box, I want it to appear. So what I can do simply click this click to invert the mat. Now it's visible. It's invisible inside whenever the ball is inside this object, and it will appear whenever the ball is outside this object. Alright? Alright, so we've covered what parenting nulls and mats are and how we can use them. These tools need practice to really get the idea on how to employ them and the best way to do it. So go ahead and start to play around with it. Failed and repeat until you get it. Now we have the information you need is practice. 7. The Speed Graph: Alright, so in the previous lesson, we dive into the graph editor and we did some stuff using the value graph, and we learned the importance of such a tool in controlling our animation. I will start this lesson by showing you a small piece of automation. The most eye-catching thing you will notice in a really good animation is the curved motion path. On real-life. When you see a butterfly, it doesn't move in a straight line. It has this deliberate movement where it slows down and speeds up. One is strolling in the orchard. And that's what makes the animation piece that I'm going to show you now a good one. It has this deliberate movement where it makes the animation beautiful and perky to the viewer's eyes. All right, That's a good one. So an aftereffects, we have a few ways to do that kind of motion. In this lesson, I'm going to dig a little bit deeper into the Curve Editor. And now we're going to choose a different kind of graph, this speed graph. So in the previous lesson, we use the value graph to create and control this wavy motion path, where the motion is speeding up and slowing down. Now we are going to do the same thing, except that you are going to use a different curve option, which is the speed graph. You're going to need this graph in your future projects sometimes, and it's best to get used to it. Now, this paragraph is a little bit harder and more confusing to read than the value graph. It's a bit challenging to learn. But hey, if it doesn't challenge you, it won't change you, right? So let's start. Alright, so I have this motion path, let's say linear motion. First, let me apply the ys, ys on the first, I'm going to show you the speed graph. Let's go to the graph editor and let's select our keyframes. Go to the Show graph, type and options and select Edit Speed Graph. And here our liners. So let's select the keyframes and press F9. Easy, ease. And now we have this weird line. Okay, so first I'm going to put the keyframes as I did before to know where the shape slow down and spin speed up. Okay, So until it reaches here, it's going to speed up. So let's put a keyframe here. It's going to slow down. Let's put a keyframe. Here. It's going to speed up again. And it's going to slow down. Alright? So let's go to the Speed Graph. Alright, so as you remember, in the value graph, the steeper the curve, the faster the motion and the flatter the curve, the slower the motion. Now in the speed graph, it's different. So in Speedy graph, the higher the curve, the faster the motion, and the lower the curve, the slower the motion. Okay, So first let me select all the keyframes and select the Auto Bezier handle. Alright. Okay, so here the shape is going to be slowing down. So let me take this keyframe and make it around. Let's see, 55, okay. And it's going to speed up. So let's make this keyframe. Maybe 400. It's going to slow down. So let's make this 50 as well. And here it's going to speed up. So let's make it 400. And then it's going to slow down, I guess. So here we can play around with the Bezier handle to refine your curve. It's my dog. Alright. Okay, so if you go over here to this window, you can select Show reference graph. This is the value graph that you can see now, as you can remember, okay, if we switch back to Edit Value Graph, you see it's the same graph that we did before. Except that now we use the speed graph. But we got the same value graph. So to make comparison, the value graph here, let's say one day shape is speeding up. The curve is flatter. In the speed graph. The curve is higher. In the Speed Graph. To make the motion fast, the curve has to be higher. In the value graph. To make the motion speed up. It has to be, the curve has to be flat. So here's our motion. Okay, so what I recommend from you now is to memorize the following. In the value graph, steeper, equal speed, flat or equal slope. And the speed graph, the higher the curve, the faster the motion, the lower the curve. Slower is the motion. Alright, now we can go and practice as much as you can. You can get the after-effects file from the project and resources. And remember, it's essential to grasp the curve. Editor goes without it. The rest of the lessons won't be effective. See you in the next lesson and happy practicing. 8. Oscillation : In this lesson, I'm going to introduce one of the most common emotions you often see in animations. It's called oscillation. So what is oscillation? Simply, it's an object that moves back and forth, and sometimes it stops after the back and forth movement. So let's jump into After Effects and do some oscillation. Okay, so now we have this wooden swing toy and let's say we want to do swaying back and forth. Okay, Let's make it start at 50. Create a keyframe. Move it 1 s, and let's create -50. Okay, so now it's going 50 -50 and then back to its initial position. Let's copy paste the first keyframe. Okay? Alright, now I can go to the, okay, now I want to extend this back and forth by going by copy and by copying and pasting the keyframes. I can do it by knowing to the graph editor. Let's make sure we're in the value graph. And we have to be on the last keyframe, select all the keyframes. Command C to copy, command V to paste. Let's make another one. Alright. Now I can have it as the loop animation. Alright, now we have this back and forth movement, but as you see, it doesn't feel like it has any weight. It looks bad. So let's create, let's select all the keyframes and press F9. Easy, ease. Now let's see. Now, obviously it looks, it looks much better. Alright, but I still need to do some tweaks to the curve to make it more believable as if it has some weight. So here's spacing comes in handy. Okay, So now just imagine or think of a kid playing on a swing in a backyard. When the swing reaches its end position, like this, it stops for a while, like maybe for a millisecond. Then gravity forces it to come back to its initial position. Here. It's going to stop for a while, and then it will go back to its initial position. Okay, so to make this possible, to make this little pose, we can go to the Graph Editor, the value graph. And let's select these keyframes and move it a little bit like this. And here as well. Maybe the two sides. So now I'm extending the curve a little. So I'm making the curve flatter to make it. So when it reaches this position, it's going to hold a little bit, then it's going to continue its animation. So let's see. Yeah. Of course you can make this. You can exaggerate more on this. So you can make it maybe like this. If you wanted to look more cartoony, you see? If that's cool for you, you can go ahead and make it. I just don't need that much exaggeration, so I'll be fine with this motion for now. Alright. Now, the motion feels as if it has some weight. It looks as if it's a real object influenced by physics. Okay, cool. So now as you know, oscillations, sometimes it has to stop. The motion starts to decay until it stops. And that's what happens most of the time in our animations. We have a shape or a logo. It's moving back and forth and then it stops. So let's see how we can achieve this in a neat way. So here we have our swing. It's moving back and forth. And then it has to be that it has to stop. So this keyframe has to be at zero. So every swing is going to be less and less like this until it reaches zero. So these three or four points, they should form a decay curve. So I would show you a way to do the decaying properly. So let's create a new null. Okay? Let's make a rotation just for reference. So we'll create a new keyframe. Let's put it at $0.50. Our initial position for the swing is 50, and then it's going to end at zero. Okay? Make it is IIS. And let's make, the first key is steeper to have a decay curve. So this is the decay curve. We will use this decay curve as a reference and our rotation animation. So in order to see the decay curve as a reference, we go over this graph over here, include this property and the graph editor set. Click it. And now we have the decay curve and our graph editor as a reference. So let's start here at this key. Our reference here is at 28. So our rotation key here should be -28. Alright? Here at this key, we can eyeball the key to match the decay curve. Here at this key, the reference curve is at 9.7. So let's make this -9.7. Let's eyeball this key to the curve. And you're, the curve says 1.2. Let's make it -1.2. Let's turn off the reference. Okay, so now as you can see, the keys that we have now on the rotation is forming a decay curve until we reach the zero or until it stops. But now you can adjust your Bezier handles and we will see what you have. Okay? Okay. I think that's good, but sometimes you think that you want to adjust the keys a little bit. Maybe you're not 100% satisfied with the result. Maybe you can adjust your timing or you can make this, let's say less keyframe closer. The second one to make it more to make the timing more appropriate. I'll just let you handle. This is some tweaks you can do to adjust your animation until you are satisfied with the result. Okay, maybe I might want to change the whole timing of the animation so I can use the transform box, select all the keyframes, and make it a bit faster. Okay, so another way is to change the timing of your animation without using the transform box is to go back to you. Can select the whole key frames and press and hold Command and select the last keyframe. And you can adjust your timing as you want. Maybe you want it faster or maybe you want it slower. Alright, so that's it for oscillation. Make sure to practice it as much as you can in the project panel, you can get the project file that has the swing artwork. See you in the next lesson. 9. Anticipation & Overshoot: Alright, so in this lesson, I'm going to introduce a new and important animation principle that we often use in animation. It's called anticipation, although overshoot is not considered as a principle, but it's often used after the anticipation. You can think of it as an accessory. Okay, so let's say I have this logo over here and I want to apply some scaling animation on it using anticipation and overshooting. So first I want to scale it down a little bit. Let's say 40. Alright, I'll create a keyframe. Let's do a couple of frames and make it like around 20, as if it's preparing itself to scale. So it scales down. And then it's going to scale up, let's say 75. Okay, so this is my animation for now. Let's select all the keyframes and press F9. Easy, ease. Okay, maybe I want to change the timing. I want to make it a little bit faster. Okay, so as a definition, anticipation is the movement of the opposite direction of the way the object is going to move. So it's preparing itself to scale up. Alright? And here I can go to the Graph Editor using the value graph to play around with the spacing if I want. So maybe I want it to start really smooth. So I can make the curve using the Bezier handle. I can make it more flattered. So the frames are going to be really close to each other. So we can have a more slow animation. It's going to start small. And then it scales up. And here I can make the Bezier handle flatter as well to make it make the easy out smoother. Alright, so now that's for the anticipation. Now let's add some overshoot. Overshoot is when you go past the location you're meant to go to and then get back to the initial position. So let's say I can create a keyframe here past the last keyframe I have. Now. I can go to the value graph and select this keyframe and make it up like this. That's just the Bezier handle a little. So now here the animation, it goes past the final position and then it goes back to its initial position. I can make it maybe like around 90. So it can be more obvious to, let's see. So here, over here, this is our overshoot. It goes up and then it goes down to its initial position. I can make the last key frame and listen to smoother by making the Bezier handle, by making the curve flattered. Right? Let's, let's start them into timing. Faster. Maybe I can change the timing of the overshoot a little. Alright? Alright, so maybe that's it for anticipation and overshoot. You can go and get any shape or logo you want and start applying anticipation and overshoot over your animation. 10. Bounce: Alright, so it's the balance lesson. And I'm pretty sure that the last thing you want to hear in an animation class is to hear the word physics. But hang on. If you want to be a good animator, you need to know how to bounce a ball or anything in a real and neat and convincing way. In order to achieve that, you have to think about what is making something move and what are the forces acting on it in order to choose the right motion for your balance. Okay, So I will start this lesson first by using Photoshop to demonstrate how the ball bounces and the different factors that affect the bouncing of the both. So first let's say I have a hard chord surface and I have a tennis ball. Okay, so now we have two factors that are going to affect the balancing of this board. The weight of the ball. And now we have a tennis ball. And the second factor is the surface or the kind of the surface that we have. Now we have a hard surface. So the tennis ball is going to fall on the ground. Then it's going to bounce. Then it's going to bounce a little less. Since it's going to lose some of its energy than little less and less and less, until it reaches, until it stops. So this bouncing motion is following a decay curve. So a few draw a little line at the peak of every bounds. They should make a sloping decay curve like this. Okay, So in order to make your bones look good and believable, avoid having a balanced pattern that has a straight line from the beginning till the end, like this or whatever. Okay? So each bounce gets lower following the path of AD curve and ending at zero. Alright? And pay attention to this goes, it's important as well. The angle that the ball hits the ground. Let's say this should be the exact same angle that leaves the ground. Your Bezier handles. And After Effects will, we will see later, should all have symmetrical angles. And also each bounce takes fewer and fewer frames. So the timing of the bounds DKs, as well as the height. So the timing between the frames like this, it's going to be less and less as the height, the bounds. So they all follow this sloping decay curve. Okay, Let's say I have a different kind of ball, a bowling ball. And it's going to fall on the right. Now we have a different kind of surface and we have a different kind of ball. This ball is, obviously it's gonna be heavier and the rug is going to help, or it's going to affect the bouncing the bowl since it's the rug. So based on the weight of the ball and the type of the surface, it's going to bounce just once or twice. Maximum. Once. Alright? So before you start animating a balance, you should ask yourself three main questions. First, what's the surface made out off? What's the bowl made out of? And how big is the bulb? These three questions once answered will determine the timing and the dk, the mouse. Okay, so now I'm inside After Effects to animate some bounces. So here I have a tennis ball, and here I have the surface. So to start answering the main questions are the three main questions that we discussed before is what type of ball I have a tennis ball. It's a medium-size. What type of surface do I have? It's a hard surface. So just by answering these three questions. We have an idea, how should the balancing, how should we treat the balancing of this board? So the first thing I have to do whenever I have a balanced is to break down or to break down the components of the bounds and work on each one separately. I will show you how first our balance is happening on the Y position. Let's do the rotation first, okay? So first our root, our balance is happening on the Y position. And it also might move from left to right, which is the x position. And it might as well be spinning. So it's the rotation. So these are the three different components that can happen in one bounce. So we should work on each one separately. Okay, Let's start by animating the bounds on the Y position. Okay? Let's say first I'm going to create a new keyframe. Let's move 20 frames. Kind of put this keyframe over here. And let's say the tennis ball is going to fall from this height. Let's say 1150. Okay, the height is good. It's going to form like this. So I'm gonna select all the keyframes and press F9. Easy ease, and let's go to the graph editor. Okay, So I want the tennis ball to start a little bit like with momentum and then to speed up. So let's make this Bezier handle like this. So it's going to be like this. It starts slow and then it speed up 20 frames for the timing. I think it's fair. Okay, So now our balance gonna take less time as we discussed before. Let's say so now it hits the ground and now it should bounce back up. So let's say the first, the falling took 20 frames. So let's say the next bounce is going to take 15 frames. So there are t and five, so that's 15 frames. Let's create a keyframe. And now we'll play around with the Bezier handles. And as we discussed before, the angle over here should be equal the angle over here, so we can eyeball it like this. This as well. Now the big question is, how much the height should be for the next bounce. So now our balance is happening. Should it be like this? Or should it be less? We have two ways to figure that out. Either we can eyeball it and just follow our intuition, or we can use a reference curve as we did for the oscillation by creating a new null object and creating new keyframes to have the decay curve for reference. For now, I'm just, I'm gonna continue the balance just by eyeballing it. And maybe at the end, if I'm not satisfied with the bouncing ball, I can create a new null to have it as a reference if I want to adjust my balancing. So let's continue. Now I have second bounds. So the third bounce. It's going to take less time. Let's say ten frames. A new key-frame. And remember this angle should be equal to this angle. Okay, So just by eyeballing it, just make sure it's a decay curve and not a straight line. Right? So if you draw a straight line over the tip of each bounds, make sure it's a curve and not a straight line, as we discussed at the beginning of the lesson. Okay, so here I have my second bonds. Now the third one maybe should be around five frames. I can add it a little. Alright, perfect. I think the balance is good. Just by eyeballing it without using the decay curve. If you think you should. If you are more comfortable using the decay curve, go ahead and use it. It's the same technique as it did for oscillation. So feel free to use it as a reference for me now, I think I'm satisfied with my results. So you can adjust the curves as you want as long as you're satisfied with the final result. Okay, so now let's work on the second component of the balance. And it's the X position. Now, the ball has to be outside the frame and it's going to bounce and enters the frame and it's going to stop at the end. So let's create a new keyframe. Let's move the tennis ball out of the frame. And let's drag it all over here. Maybe it can stop right here. Okay? Okay, so now we can play around with the Curve Editor. First, let's select the two keyframes and press F9. Easy ease. Now I can go to the graph editor. Okay, So here, when it stops, I can make the curve flatter too. Maybe I can test it. Let's say it's going to be like this and see what's going to happen. No, I think it's a bad option. Let's make the curve flatter to arrive really slow and smooth. Let's make beginning maybe like this. It's bad as well. Let's keep it as is and see what's the result. Okay, so now I have my animation, maybe one, maybe here it can continue to, to move a little bit. After it stops bouncing. It stops bouncing, and then it's continuous. Let's let's move it out the frame completely. Okay. I think I'm satisfied with the Curve Editor. I don't need to adjust anything. Alright, so now i'm, I'm satisfied with these two components, the x position and the y position. Now, let's do the rotation, which is the third component of our bounds. So let's create a new keyframe. Let's move it over here and let's spin it a little. Maybe like this. Let's select the keyframes and trusted flying for Easy Ease. Okay, I'm going to add the spinning. Not too much. I think it's good. That said trial and error thing. You can try as much as you want until you are satisfied with the results. Maybe a bit more. Yep, I think this is good. Alright, so that's it for this lesson. Your assignment is to add some bounces to any kind of ball you won't. And that's definitely going to affect the timing and the decay curve of your motion. You can find the project file in the project panel so you can use it and practice as much as you can choose. 11. Follow Through: In this lesson, I'm going to talk about follow-through. Follow-through is one of the principles of animation that adds so much life and playfulness to your motion. So as an animator, be sure to grasp this principle, what is follow-through? Follow-through is one part of a shape continues to move after this shape has stopped. Alright, so now let's jump into After Effects and do some follow-through. Okay, so here I have a punching box. And what I need to do with it is to move it back and forth. But the plus thing is to use the or to add the follow through on it, not just to be back and forth, we have to add the follow-through. I have this stick over here and it's separated into multiple layers. Alright? So in order to rotate this stick back and forth, I have to start from the bottom of this tick. And if I go to this layer and press R for rotation, if I move it back and forth, it's rotating from the center and it's moving along. So what I need to do first is I need to change its anchor point and put it at the bottom of the shape. Press Y. You can press Control and hold it to snap it. Alright, so now if I rotate it left and right, it's rotating from the bottom. Awesome. But now the rest of the shapes are not following this layer. That's because we didn't do yet the parenting. So what I can do now is select this layer over here using the pick whip, drag and drop to layer one. Layer two, which is this one, is the child of this parent layer. So now if I rotate this layer, this layer is going to follow the layer underneath. I'm going to apply the same thing to the above layers. So I select this layer and this layer should follow the layer underneath it. So using the pick whip, drag and drop, this layer as well, it should follow the layer underneath it. So pick whip and drag. And this shape as well should follow the layer underneath it. So pick whip. And you actually are for, now, if I rotate this layer, they are all following the base layer. Alright? Before I proceed, I need to change the anchor point as well for these layers and put all of them at the bottom. So plus y. Snap it to the bottom. This one as well. This one as well at this one. Right? So now let's apply the basic rotation. Let's create a keyframe for the basic layer. Let's move around 20 frames and let's make it -30 -30 plus 30. So it's moving back and forth. Let's apply Easy. Okay, Let's let's make it -30 again. Okay, so now I can go to the graph editor and copy and paste the layers. Alright? Alright, so now that I have the rotation, but as it is now, it looks super basic, it looks stiff and nothing much is happening. So let's apply the follow-through. So what I can do is I can copy, paste these keys over here, copy, and let's paste our keys to this layer above the basic layer. Alright, let's move them maybe around five frames. And let's see what's going to happen. Alright, let's apply the same thing to the above layer. And let's move it as well like five frames. And the same for this one. And the same for this one. Okay. They, they follow through on the stick. Looks good, but maybe I can adjust the rotation of the bag. Maybe I can drag the keys over here for the bag just to follow through any battery away. Alright, so see how much different is the animation now, after we applied the follow-through, it gives more playfulness to the whole motion. Okay, now, let's say I want the whole animation to be less loose, or let's say, I feel it's a little bit of exaggeration is happening over here. And I want the rotation to be less exaggerated. So I can go to the basic layer, go to the Graph Editor. I can select my keyframes over here. And using the transform box, select the press Control Tab on keyboard to change both sides. And maybe I can make it like this. If you want it to be more exaggerated, you can make it like this. That's too much. Okay, so you get the idea. You can apply the same technique to any layer you want over here to make it less or more loose. Alright, so let's move to the next example and now we have a different scenario to deal with. So we have the same punching box. But the difference now is that the stick of the punching box is a one layer shape. So how are we going to apply the follow-through? First, I'll start by applying the basic rotation of this bunching box. So we'll go to this thick. Let's make the anchor point at the bottom of this tick. And you can check this box over here to make it solo. Alright. Create a keyframe for the rotation. Let's move around 15 frames and make it -30, 13. Apply Easy, Ease and let's go to the curve editor to copy paste our keyframes. Okay, So here are our basic rotation for the stick. Alright, so now I'm going to apply follow-through using two tools, Puppet Tool and the Direct basal tool. So I click my stick layer and go over the puppet tool over here. I want to create three puppet tools, one at the bottom of the stick, one in the middle, and one at the top. Alright. So when you open the puppet tool, make sure the Puppet Engine is legacy and not advanced. Alright, so here I have my Puppet Tool. Alright? Alright, so now I need to use Ludwig Basil to have control over these puppet tool in order to make our follow-through. Okay, so go to Windows. Duik basal basal tool is mainly used for character rigging, but for now I'm just going to use one thing from it and which is the add bone. I will show you how in a bit. Let's select our Pen tools. Alright, and go to rigging. Links and constraints and select Add bones. And the bones are added to our Puppet tools. The red ones. Here are the layers. Puppet pin one, puppet pin tool and puppet pin three. So these bones now can control our Puppet Tool. Now let's do the parenting as we did in the previous example. So Pen tool, pin two and pin three to pin two. And let's make burnt the puppet pin one to our layer, stick layer. So when I move the stick, the bones or the controllers shortfall of our shape. All right, so now I have the basic rotation applied to the stick. Now let's apply some follow-through. I don't have to apply any rotation to the to this control at the bottom, I just need to add rotation to this one and the one above. So let's open the rotation properties, create a keyframe. And here I can use the rotation. Let's make it maybe like this. You can just eyeball it. We can copy and paste our keyframes. Let's apply Easy Ease. And now I can copy and paste this controller. Let's move it a little bit. Perfect. Now I have my follow-through applied to the stick. Let's switch off the solo. And let's make sure the bag has to follow our stick. Okay, not this one. Maybe. Make it to the pin. Pin three. Yes. Alright, cool. Alright, so that's a way of doing follow-through. When we have a one shape layer, you can use the puppet tool and we can use Duik basal to add bones to have control over your puppet tool. I've provided a link for you in the project panel so you can download Duik basal and use it in this exercise. Don't forget to share your exercises and the project panel so you can show your progress and inspire other students. Cheers. 12. Squash & Stretch : Alright, so here we are. We've come this far and I hope that you're practicing the principles along this journey. And now we've got to squash and stretch. So squash and stretch is one of the principles of animation that is applied to a shape to give it a sense of realism and flexibility. So let me demonstrate this principle by showing you these two samples. Okay, So I will start by showing you a quick sample of this animation without having squash and stretch applied to it. It's as simple bounds animation and as you can see, it looks stiff and nothing much happening other than the balancing of this bowl. So if we turn on the echo effect, you can see the frames between the animation and the bowl is having the same form or volume across the whole animation. Okay, so now let's see the squash and stretch example. Alright, so as you can see now, the animation looks better. It has squash and stretch applied to it. You can feel the playfulness and the flexibility of the, of the object, of the shape of it turn on the Eco fact. You can see how the volume of the circle is changing through the whole animation. So it starts to squash and stretch at the beginning. Then it collides, then it goes back. And here in the middle, it goes back to its normal volume. Then it continues to squash and stretch. Alright, so now I want to explain something crucial while doing the squash and stretch. Let's say I'll create a new comp. And let's say I have this small ball. Alright, Let's say we have this ball and it's going to move from left to right. So it's going to stretch horizontally. And as you know, an order to play around with this squash and stretch, you have to access this scaling property. Alright? So it's going to stretch horizontally, but it has to squish vertically as well. Right? And if we ignore the vertical squishes, the volume of the ball will be incorrect or rather it will be distorted. So in order to avoid this, we have to put the correct numbers over here to make the volume correct. So let's say if we want the stretch horizontally be 200, the question is should be 50. But this is hectic to do, especially when we have complex numbers. So to make long story short, it's not the ideal way to play around with this squash and stretch. So to make it easier for you, I've got an expression for the squash and stretch using the slider controller. And the expression is applied on the scale of the shape. And using this slide controller, you can move it right and left. And you can have your squash and stretch without worrying about distorting the volume of the object. You can, by the way, download this project file to use it. And I will show you how you can copy and paste this expression and the slide controller to any shape you want. Alright, now I'm going to apply some squash and stretch to this bouncing ball. Okay, first, I'm going to get the expression with the slider controller. So first I'm gonna copy slider, based it on from here. Now I'm trying to get the expression. So select on scale, go to Edit, Copy Expression Only and paste it on the layer. So now I can squash and stretch. Okay, let me make some stretch. Create a keyframe. Press U to reveal all the keyframes on the layer. You make it like this. And now I'm going to orient object to pass to press Control Alt on keyboard. And you can orient this shape along the path. Press Okay, Alright, so now I have this squash and over here it's going to squish. So let's make it like this. Okay? I have an issue with the sliders, so the range is from zero. Hundreds. So I can, I can squash, I can stretch like this. So to fix it, you can press right-click Edit Value and make the range -100, 200. So now I can squash and stretch. Okay, so now I'm going to ask questions, maybe like -25. Okay? So I need to adjust the rotation. So rotation create a keyframe and make it toggle hold keyframe. And over here, just like this, and now I'm going to select all the white position and drag it down to cool to make the ball collide with the ground. Right? Now, it collides and the next frame has to stretch again. So like maybe 25. Alright, and over here it has to go back to normal size, so zero. Okay? And then searches back again, maybe 25. And over here, Let's squish it. Maybe -25. Alright, then here it stretches back in again. Let's make it 25 as well. Let me adjust this key frame to make it okay. Right over here, back to normal size. And then here stretches like this. And over here, -25. And then stretch and over here back to normal. All right. Not bad. Okay. Alright, that's fine. Now if you want to make exaggeration of, you want to exaggerate the balancing. You can, you can make it like this. The question is, are fewer ball? You can make, we can make the stretch like this if you want. If you want to look more cartoony, go ahead and do it like this. I'm just exaggerating here, but feel free to do whatever you want. Alright? So in general, the amount of squash and stretch depends on the style that you want and the exaggeration that you think it fits your, your animation. Okay, So now I will apply the same squash and stretch to this bouncing ball. But the only difference now is that the ball is rotating. So we're going to have a small issue regarding the rotation. Think. So. If I want to, let's say applies some squash for this, see what's going to happen. It looks like a twirling football. So to prevent this from happening, we need to have more control over the squash and stretch of this bowl. So let's return this to zero. And first I'm going to create a new null object. Alright? So the first thing I want to do is to transform the position keys to the not. So copy and paste. And now they're not all has the same animation as the board. So I can get rid of the position animation on the ball layer. And let's parent the ball to the naught. Alright, so now the null is controlling the animation of the bone. Okay? Let's make sure it's orient along path. Since now I can move the ball around. Let's make sure that it's at the top of the novel. Okay, now I want to have this slider controller on the null. So let's copy and paste the expression as well. And let's start creating some squash and stretch. Let's create a keyframe at the beginning. And let's have a rotation key toggle hold. By the way, I kept the rotation of the bowl as is. And on the null object, I'm going to control the squash and stretch and some adjustment in the rotation. The original rotation is still on the ball layer. Okay, so over here, let's make it maybe like this. And now let's change the rotation like this. And I can select all the white position and drag it down to collide to the ground. Alright, so, alright. So now there is no need to make any squishing us, since I just change the rotation of the bowl and then return it to zero. Alright, so over here I can return the board its original size. And then over here, let's make it stretched like this. And here I can change the rotation as well. I can move this position down to collide with the ground. And here, let's return the rotation to zero and the bowl to its original volume. And now it's going to stretch less and less since it's losing its energy. Let's rotate the ball like this and adjust the Y to collide the ground. And zero like this. Okay, I want to adjust the volume of the circle. So over here, now it returns to zero. Alright, so here I have my animation. So basically here's how we can handle the squash and stretch when we have a rotation on the object. Alright, so that's it for squash and stretch. Make sure to get the project file from the project panel and practice as much as you can. And as an exercise you need to do to squash and stretch. One with rotating the bowl so you can practice the null and one without it. So happy practicing and cheers. 13. Secondary Animation: So here we've come to our last lesson of animation principles, the secondary animation, or as they call it, the secondary action. Secondary action is one of the 12 principles of animation. And those principles were designed for character animators, e.g. when a character is arm moves backward before doing the primary action, which is throwing the rock forward, is called secondary animation. So moving the arm backward is the secondary animation which comes before the primary action, which is throwing the rock forward. Now we as motion designers, our understanding of the secondary action is not what our ancient character animators use to think about it. And it's not just restricted to character animation. Secondary animation is an additional animation that supports or reinforces the main action. Alright, so here's a sample animation for McDonald's made by Buck studio. It tastes more video, so let's watch it. Starry Night, same two or three. Blocks and laughter. Brand new. Surprise, 15 a day. They really great. Alright, but it's a cute animation. It's a beautiful animation and it has so many secondary actions happening. I will show you a few. Alright, if we go to this scene, alright, look at the scene over here. Alright, now, look at the small circles inside the strokes as the dog and the mailman drinking soda. These movements of the circles inside this trope is a secondary animation and it gives so much impact to the whole scene. The moving tail here of the dog. Right? So the moving tail here of the dog is a secondary action as well, and it makes it less rigid and more alive. Let's see, in this scene. In this scene, we have the dust particles and the hearts coming up as the witches broom is hitting the ground. These are secondary animations. Now imagine this scene without the secondary animation. I mean, it can pass but to death list some realism to it. Or rather it would have lacked a juicy or effect to the whole scene. Alright, now, I'm going to create some secondary animation to this simple motion. So I'm going to show you how it can be done. Now since we have all the principles at your disposal, this lesson will be a walk in the park. So here I have this ball hitting this barrier or wall, whatever. I need to have some geometric shapes to behave like particles to scattered or burst from behind this wall as if it's part of the world. So first, I'm going to create a new comp Control N. And I'm going to create a simple square. And let's add a stroke not filled. Alright, center the anchor point in the middle of this shape, and let's align it to the middle. Okay, so here I have this simple square shape. Now I'm going to create a new null. And let's parent this shape to the null. Alright? Now let's apply some animation to this square root. And now our null is controlling the shapes. So all the animation is going to happen inside the null. Okay, so first, I will start by separating the position. And let's. Create a y position here and move it around ten frames and scale it and move it up like this. So now I have this movement that's applied is 0s. Okay, so and at the end it should disappear. It's going to act as a particle, so it's going to disappear at the end. Let's scale it down. So over here it's going to disappear. That's apply Easy, Ease. Alright. Let's go to the graph editor. I want the movement of this particle, let's say to move really fast at the beginning. So I'm going to adjust the curve like this. I want to, I want to make the curve steeper. And as you remember, steeper equal speed. So let's say I have it like this. Okay? Maybe I can adjust the curve a little to make it less, less steeper. Alright. Okay, so now I can duplicate this layer, so I can use it to another layer in order not to recreate the animation, I can duplicate the null and I can link it to another object. So in this case, I can create my animation once and I can link it to another shapes. Again, it's a way you can do it. You have so many other ways. Feel free if you have any other way, you're comfortable with it. Go ahead and do it. It's just my own way of doing the particle kind of stuffing. Okay, so now I can pre-comp this null and the shape I have. Okay, Let's turn it off and now let's create, let's say I have the Nano. Now let's create a circular shape. Centered the anchor point and the middle. Let's parent the shape to the nodal. Now, the non is controlling my shapes. See. Now we don't have to recreate our animation from scratch. Okay, Let's duplicate the null and pre-comp our shape. Now I have these two shapes. They are above each other now, but I can adjust them later. Now let's create another shape. Maybe like let's create a square, but now let's fill it. Whatever color I can change the colors. Later. I have this filled square. Let's make it in the middle. And let's parent it to the null. And the animation is already cool. Let's complicate the null and we call this. Okay, now let's create one more shape. And let's say create a polygon shape. Okay? Central the anchor point and put it in the middle of the comp and parented to the null. Alright. Okay, I can see now let's play around with the comps. Let's say I can move the anchor point like this and rotate it. And maybe I can scale it down a little, move it up. Let's rotate this one as well. Keep it swan around. So I'm moving down the anchor points so I can rotate the shape like this. And all I have this particle or scattered effect. I can use it as a secondary animation. Okay, so now since I have my comb plenty, let's name it particles. So I can drag it and drop it to this comp. Let's put it over here. Let's rotate it, scale it down. Okay, so the secondary animation should start when the ball collides with this barrier. So maybe, let's see what do we have now? Alright. Okay, let's add the full effects so I can make the secondary animation white as if it's part of the wall. Okay, I can as well duplicate my particles, comp. Make another one, make it smaller like this. And maybe I can change the rotation a little. Let's see, what do we have? Alright, I think it's perfect. Okay, Now maybe I can add some particles from the, from the bowl as if they are coming out from the bowl. So what I can do is I can duplicate this particle, comp, move it, rotate it a little. Let's position at here, and let's change the fill color to the color of the ball. Alright. I think this is perfect. Alright, so basically that's it for the secondary animation lesson. Go ahead and practice it as much as you can. And what I recommend is if you can take any project that you've worked with before. And if you think you have any space that you can add some, you think that your animation lacks some kind of movement or it lacks some kind of stuff on it. Maybe it's a good idea now to add some secondary animation to it. 14. The Second Part: Alright, so now we've reached the second part of the class where I will be creating the class project. It's a small piece of animation to reveal the class title. And I will try my best to employ all the principles that we've covered during this class. I think you should be ready now to create your own animation piece to reveal the class title in any way you want. It doesn't have to be a long animation, just a small piece to utilize all the principles and techniques that you've learned during this class. 15. Phone Entry: Alright, so let's start. I will start by showing you a small story board that I've created for this class project. It's a simple thing, it's a phone. So I will just type something on the search bar and then some apps appear. And then we have the animation principles, which is the title of our class, will reveal any fun and playful way. Okay, so I'm inside After Effects. I'll start by creating a new project than eight by 108. And let's make the frame rate. Okay, Now I'm going to first create the color palette that I have in this AI file. Now I have a tool called re dynamic color tool. You can create your own color palette here. So you can just click your shape and assign the color directly. But if you don't have this tool, it's fine. You can just create your color palettes over here. You can create boxes and just assign the color to the shape you want. You can have like multiple, multiple shapes. So you can create your color palette and this way. But since I have the tool, I will create it right over here. Okay, So let me think this color. Create a solid color. Just select it and press the plus sign. So I can edit my color palette now. Script-based, doing this one. And this one. Okay, so and I will refresh. So I can have the color palette. Alright, so now using the array dynamic color, now I have my color palette over here. Alright? Okay, now I'm going to copy and paste this shape. I'll select the Pen tool, click and copy and paste. Let's add a stroke to it. Now, I can assign a fill color to it, which is this color. Alright? And to apply the stroke, I can click this one more time. And I can apply the stroke. Maybe I can increase its width like 15 is good. Okay? 15 is good. Let's center it. Okay, so here's our first scene. Alright. So our first scene, the phone is going to enter from left to right. It's going to rotate a little bit here. So selected layer, press P and I'm gonna separate dimensions. The exposition. I think maybe I can extend the timing a little. Maybe let's make it 15 frames to reach the center of the frame. Alright. Please ease. And let's make it smoother when it arrives. Alright. Okay, now I want to know, I want it to rotate a little from this angle. But now I already applied the animation. I can't change its anchor points. So what I can do is I can create a new null object. And let's put it over here. Alright, and let's make the shape burn to the NADH. The NADH is controlling or shape. So I can rotate it from here. Okay, so now it arrives like this, maybe 15. Okay, maybe here I can apply some oscillation. So I can go to the curve editor. Maybe it's too much, I can lower it a little. And over here, it's going to maybe overshoot. Maybe I can add more oscillation. Maybe over here, I can add a new keyframe. Alright. 16. The Search Bar: Alright, so now as our storyboard tells us, we have to zoom in to the phone and then the search bar is going up, up, up over here. So let's create a new null. Let's name it phone control. And let's assign the null one to the phone controls. Now the phone control is controlling the whole thing, the layer, the phone layer and the NADH. So I can use the scale and the position. Can zone like this. Adjust the timing. Okay, So now let me separate the positions. I dusted curve of the y position and the scaling as well. The timing maybe. Alright, I think it's good now. Alright. Now I want to create this search bar. Let's go to the Rectangle Tool and let's choose a rounded rectangle tool. Center the anchor point. And let's kill this stroke and let's apply the green color. Alright, maybe I can make it more rounded. Maybe like this. Alright, and let's name this layer search bar. Alright. Now I want to create this shape as well. So what I can do is I can duplicate and I will, you will know why I'm doing this now. Change the scaling. Maybe like, and make sure to change the scaling from the rectangle path and not from the transform of the shape like this. And let's change its color to yellow, orange, whatever. Okay, so it's gonna be right here. So let's name this slide. This shape is gonna pop up from here and then it's gonna move. Or it's gonna slide to reach this point. So while it's moving from left to right, it has to reveal the shape underneath it, which is this search bar. So what I can do, Let's apply scaling animation on it. And that's some overshoot. Okay, I think this is good. And now, once it pops up, it has two modes. It has to move from this position to this position. So let's apply. So let's separate our position and select it, create a keyframe and that's going to move. It reaches this point. Okay? Let's make the timing faster. Alright. Now I want to add something to this shape, which is the squash and stretch. So first I want to get the code and the slider. So I'm gonna find the project file and get the code and the slider from it. Okay, so here I've got the project file for the squash and stretch, so I can get the slider and the and the code. I think it's here. Yes, so let's copy this slider. And let's get the code. Edit, Copy Expression Only. And then now I can squash and stretch my shape. Let me adjust the, let me add the value so it's minus hundred 200 so I can move it back as well. Alright. I don't need this composition now. Okay? So like this, and then back to normal. Okay, so I'm done with this now, as we said before, I need this shape to reveal the shape underneath it, which is the green search bar. So what I can do first, let's, let me turn this search bar and I will duplicate it. Let's name it mask. And I'm going to, first, I'm going to select the search bar, go to Track Matte and select our mask. Now I can move it to here. And let's parent the mask to the slider. Now. Alright. Okay, so here I have my mat. It's called the storyboard and see what we have. 17. Type in Here: Okay, So here I need to start typing stuff and these geometric shapes will start to appear. Then we have these small boxes here, which, which are the apps. They're gonna start to appear one after the other, I think. Alright, so let's create this shape. Make its stroke and center the anchor point. Make the stroke width. Maybe. I'll write seven as good. Okay? Alright. Now let's, let's make it enter the frame and in a fun way. So I will change the anchor point to the top. Supply some rotation, some animation on the rotation. And let's make it come from the above. And let's apply some trim path. Alright. Can always press U on my keyboard to reveal all the keyframes that you have on your layer is 0s. Okay, Now, let's maybe I can have some oscillation on the rotation. Let's add a couple of keyframes. You see now I'm just doing the oscillation without using the reference curve. Just I'm eyeballing it. So all right, I think this is fun. Okay, now I want to the shape to enter promptly without slowing down at the beginning. So I will make the curve steeper. For the rotation as well. Can maybe I can make the timing faster by selecting all the keyframes and press and hold Command. Alright, yeah, I think this is good. Now I want to move the shape to the right story. Reveal these shapes, geometric shapes. This one. So I will choose the toggle hold keyframe. Here. Here, I want to review three shapes. So 11, this is for the two. I can maybe I can make more time between them. Okay, I think this is good. So first I have the triangular shape. The points three. So I have the rectangle shape, sorry, the triangle shape, and change the color to white. I can put it to you. Okay, so this triangle is going to appear here. So you give them, I will have the square shape. So it's going to appear here. Alright, so form poem. And then I have the circuit. And it's going to appear here, yes. Okay. I can align the shapes by going by selecting all the shapes and going to the Align and Distribute vertically. Horizontally. Alright. I can align them. The top. Maybe. No. Let's keep them like this. Alright, so let's see what do we have now? Okay? Maybe I can move this bar a little bit here. And I can move all the shapes, maybe a little bit to the left. So I don't have this large gap over here. So what I can do is I can create a new null, select all the shapes parented to the null, and drag it like this. Alright? Okay, I can't believe the null now. I don't want it at the moment. If I need, I can recreate one. Can maybe. It's a little bit too far from the shape. Let's turn the deadline to turn it back like this. Alright? Think it's good. Alright, now let's apply some animation to this geometric shapes. So maybe let's make this shape rotate like this. With some oscillation. This is too much. Okay. I can't change the timing. Overruled. So here, our first shape. Yeah, I think it's cool. And let's make this shape rotate from a different angle. Let's try to copy and paste this rotation keys. Yeah, I think we can do that. Let's apply this rotation keys to this one. Yeah. Alright, now let's add some secondary animation, these geometric shapes. A new comp, and let's name it as secondary animation. And I'll create a new shape. Center the anchor point. Let's put it in the middle. Maybe I can make it a little bit bigger. And then I can scale down the whole comp. It's fine. I'll create a new null. And as we did previously, we apply the automation on the null and then we can link our null to any object we want. So in that case, when we do the animation wants. So let's link the shape of the non. No. Alright. Make the curve like this to make it start instantly. Now let's duplicate the null and preComp. I wouldn't all and cheap. Now we can create a new shape and link it to our normal. Perfect. Now we have, can I have the animation ready? I need to just adjust the rotation to make them spread. Alright? I can duplicate some of the shapes and make different scaling. Alright. Now I have my comb ready. I can drag and drop it. Now I can adjust its position. All right. But I can put it over here. Now, duplicate this comp and put it in the square. All right, So yeah, definitely the secondary animation gives so much impact. Do the movement of the geometric shapes. 18. Popping Up Apps: All right, so our next move is to create the apps. They're gonna pop-ups consecutively. Alright, now let's create, maybe I can copy and paste the shape. All right, Let's apply this color. Alright, so now I can create a new null. Let's put it over here and permanent or other shifts to the null. And I can scale it down, scale it up to align with the guideline. Here I have four shapes. Now I can select all and duplicate. And duplicate again. All right. I can select all and okay, so now they're going to pop up. So let's apply some animation on this scaling. And let's, let's have some overshoot as well. Alright? Now they have to pop up, not necessarily consecutively, maybe randomly. So the pop-up in a random way. Alright, I think this is good. Alright, now, getting back to our storyboard, we have to pick a random shape from these squares. And this one it has to scale up to be equal to be like this. So I can choose this shape as if for tapping on it. And maybe while tapping, we can change its color. So it's clear that we are choosing this app to open. So let's apply some scaling to this. Maybe it's scales down and then up. All right. And let's change its color. So maybe we can change it to maybe this color and then back to its original color. And then, and then we can make the rest of the shapes disappear. So. Select all the shapes, create a new keyframe on the scaling. And maybe we can have some anticipation before they scale down. So maybe they scale up a little and then they scaled down. And they can leave randomly as well. So and now this shape will scale up, maybe some anticipation and then it scales up like this. And let's adjust the positioning as well. Can move to this centered like this. Let's adjust the curve to have some anticipation. Made me want it arrives. We can apply some overshoot as well on the scaling. Create a new keyframe. Go to the graph. Let's check our storyboard. So yeah, here we can zoom out a little bit. So on the shape appears. And the one day this one, they start to disappear. And selecting our app, we can zoom out a little. So here we have the controller of the phone. But what we can do as well is let's drag it to the top. And let's select all our shapes inside the phone and link it to the phone controller. So now our phone is controlling our whole shape. So over here, we can start scaling out. Like this. Much, maybe like this. Okay, I didn't scale much. Just the timing. A little bit faster. Okay, I need to adjust this this box so it has to be more centered. And I think we have an issue with the alignment of this bar. It has to be centered as well. Maybe lower and maybe you can scale it up more. Yeah. Let's adjust the overshoot. I think it's too much that's deleted and to create a new one, Maybe it's subtle. Overshoot is enough. Yeah. Okay, before I continue, I need to adjust the alignment of the of the search bar. So okay, so here our search bar with the shapes, Let's assign a new color to them, maybe cyan. Okay, so here I have all my assets for the search bar, I can create a new node and assign all the, all the assets to the null. And let's name it search bar control. And then I need to assign the search bar control to the phone control. Alright, so let's drag it to the last lesson. Much better. Alright. 19. The Title Animation: Alright, now let's move to the final scene. It's the text animation, animation principles. That's the title of the class. Okay, Now, let's copy and paste the text. Center the anchor point. Align the text. Alright, now I need to pre-comp and context. Now I can work on the text animation on a separate composition, so I have more space. Alright, so now I'm going to animate this text and you have different ways of doing that. First, I need to separate this word into characters. So I want each character on a separate layer. So I have a decompose text plugin. It's a, it's a powerful plugin. I can just select my layer and I'll make sure that the decomposed into characters. And then I click decompose, and now I have all my characters on a separate layer, so I have more control over each character so I can animate it in any way I want. So if you don't have the decomposed text, you can do it manually. So the first thing you can do is to count the number of characters that you have in your word. So in my case now I have nine characters in this world. So I want nine copies of this text, 23456789. Now what I should do is I want to separate each layer by masking it, or you can delete the other characters. So now I have a layer, I can have n, can use the pen tool. Alright, And the third character is I. And it goes on until we have each character on separate layer. But since I have the decomposed text, I will just use it. Alright? And by the way, if you want to purchase the decomposed text, you can find it on the e00 script website. Alright, so let me start to animate these characters. Separate positions. Okay, I don't need the X position. Now, I want this text to be out of this box, like this. Okay, So I want to move it out of the box. Alright. To make it a little bit faster. Oops, I forgot. Okay, maybe we can do some overshoot. So let's create a new key. Go to the Graph Editor. Make it like this. So it's going past the final position and then it goes back. Maybe I'll change the timing a little to make it a little bit faster. All right, now let's make the characters a full consecutively. So. Maybe just delay one frame. Alright. Okay, so now I need to make some track matte to make my animation text invisible whenever it's outside this box. So I will duplicate this box. Let's name it. Mask. Right? Okay, now let's animate the principles. What I'm gonna do the same thing. Separate positions. Alright. Let's remove the x position and some overshoots. I think it's too fast. Maybe I can make the overshoot give me a bike and make the overshoot higher. Right? Let's add some delay between the characters. One frame. Okay, Let's make them a pure like randomly, not like the animation texts. Like to have some variety. Well, I should've split the layers before, but it's fine. And I want to adjust the curves as well. So I just need to go to the curve editor and make the Bezier of the curve steeper. So it begins instantly. Let's see what it, what do we have now? So, oh case, I turned off the characters here. Let's check the principles. Okay, now, the last thing I want to do is to make the phone leave the frame. So let me get the phone controller. Alright, now I want to link the text with the phone controller. I don t need to link the mask since the mask is already linked to the text. So I just link the text or the font controller. Alright. Now let's make the phone leave. Let's do some anticipation. And then it leaves the frame. All right, maybe let's rotate it. It looks awesome. All right, good to play around with the curves. It's good. Alright. Alright, so now let's export. Add to Media Encoder. Kids a format H.264 preset high bitrate. Alright, good. And here's our animation. 20. The End: And that's it. Now that you've completed the class, I suppose that you already have a set of animation tools already in your possession that will put you way ahead of the average animators. It's a pleasure for me to share this knowledge and skills that I've learned during the past few years. And I thank you so much for deciding to take this class. Please remember to share your projects to get feedback and inspire other students. And if you found that this class was helpful, I would appreciate it if you leave a review and follow my channel to get updates on my new classes. Until that, cheers and good luck.