Cavalry for Beginners: How to Animate Software/Website/App UIs Like a Pro

1. Intro: If you've ever watched an ad for a software or an app or a SAS platform like Base 44 Weeks, Canva, Figma, you probably notice something. All their animations look very smooth, cinematic, and every decision, every action seems intentional. The animations make the product look cool. A button gets clicked and another UI elements react as the view rotates, all sorts of UI elements reacting to interactions to show what the software can do at a glance. So how do they do that? How do they create these animations? What most people don't realize is that this kind of animation does not need a huge team of people. Doesn't require Adobe After effects or years of motion design experience. It requires knowing the right tool and the right approach that will allow you to create complex two D animations very quickly. And that's the tool I'm going to teach you today. In this class, we're going to build one of those animations from scratch using a free two D design and animation tool called Cavalry. Let me show you what we're going to make. To get you familiar with the tools Cavalry has to offer, we're going to start with a simple subscribe button. We're going to use cavalry's native shape tools, and then we're going to add a notification icon, give it a drop shadow, and then animate a mouse cursor that travels along a curved path and clicks the button with a visual reaction that looks real. And then we'll move on to the next level where we're going to design two UI cards, a user profile card and a message card. And then we're going to design a news headline that looks like one of those CNBC or Bloomberg titles you see in their documentaries, and then we're going to animate the whole sequence. This is a relatively simple but elegant project that will introduce you to some of the most commonly used tools in Cavalry. Every technique builds on the one before it, and by the end, you will have a finished UI you showcase to potential clients and the skills to create cool animations for your own sas or software product. My name is Ken, and I teach UI UX design. Web design and three D modeling on Skillshare and YouTube. This is Cavalry for beginners, the practical way. Are you ready? If you're ready, let's get into it. 2. Cavalry Overview: Just to have a quick overview of what we're looking at before we get started. If you've used any video editing software before, you probably already understand most of what we're going to talk about here. So, of course, this is the artboard, and this is your scene. This is where you're going to add elements and animate them. And as you add elements, they're going to show up here in the scene window, and this is where they appear as layers. These are layers. And this is the timeline. This is where you manage colors. So if you have an object selected, you can change its color right here. But I rarely use this side. I just go to the attributes because when you have anything selected here, its attributes will appear here and you can change very many aspects. For example, we can go to the field color and just click this and change it right here. This is the selected item. These are just shortcuts that the Cavalry team placed here for the commonly used features, commonly used deformers and other features. So they thought about making them accessible to the user right here. So those are shortcuts, and we're going to see how to use some of them as we work on our project. Finally, you already noticed that to draw these rectangles, I selected this rectangle tool and started drawing. These are the different shapes you can draw. And, of course, in the class, we're going to see how to use some of these shapes to draw our UI components. So that's just a quick overview of what you need to know about the UI. The other thing I want us to look at is how to create a new project folder. So I'm going to anytime you want to start a new project, a new Cavalry project, you want to make sure that project is in its own folder so that everything you work on, everything you import, everything you save in here in the project is contained in just one folder. So the way to do that is you go here to this drop down menu, say create. I'm going to go to my two D projects, and in here, I'm going to create a new folder. I'll call it Project name. Then choose folder. As you can see, it's already highlighted here. You can also just double click, go inside it, then choose. So now this has changed to project name. This is a scene in the project name folder. If we click this, let me just close that. If I over it, it says project description. It's describing every folder that has been created inside the folder we just created. We've created a scenes folder, renders folders. An assets folder and all these other folders. If I close that and say Control S, Notice now, it's automatically gone into the scenes folder. This is the project folder we just created. If I go up, as you can see, we have a scenes folder. Automatically, we can save the scene in there. We can have various scenes. If I say Control N for new, Control N and Control S to save it. We can save a second scene within this project folder. So we can save several scenes if we want different scenes or precompositions for one overall scene. So I can call this project name one and save it. Now we have two scenes in this project folder. That's it for now. This was just a quick introduction and overview of the Cavalry UI and how to create a project folder. In the next lesson, let's talk about the pivot point, which is very important. See you shortly. 3. Pivot Point: Us to talk about something called the pivot point because it's very important to animation, and we're still inside the sample project folder we created. So we're just looking at an example. We're going to create a new project folder in the next lesson. So right now, I want to add a rectangle. So I'm just going to select the rectangle to and draw something there, draw another one there. If I select the selection tool, as you can see, the rectangle has this Gizmo right here at its center. If I select this one, it also has the Gizmo at its center locally. But if I select the two of them, by holding down Shift and selecting the two of them, Control G. Now, as you can see, the pivot point is in the middle. All right. If I undo that Control Z, if I select this rectangle and place it right here and select the two of them, Control G, you will notice that the pivot point is still at the center of the screen. So if we try to animate this group, maybe by rotating it, it's going to rotate around the center of the artboard, when maybe we want it to rotate right here in the center of the two of them. So that means we have to be very careful about where we place this pivot point when we're drawing or designing our UI elements. Okay, of course, as you can see, when we have a group selected or even any shape, there is a pivot attribute. And you can move it, for example, if I move it in the X, as you can see, we're moving it around. If I select a group, we can also move its pivot. And notice it's the shapes or it's the group that's moving relative to the pivot point. The pivot point is remaining at the center. So this brings us to the conclusion I wanted you to have. When we're drawing a UI element, I would advise you to draw it right here in the center because if you draw it if you design different elements in the artboard and then group them, the Pivot point is going to go to the center, and you're going to have to manually move that group to the center, the same way we did to this group. So it's always best to draw that group in here, just add whatever elements you're creating, and you will be designing them relative to the gizmo right here at the center. And when you group all of them and move them, they will all move with the gizmo already in the center. We're going to see how to do that when we start drawing. So that was just a quick overview of the pivot points, and we need to keep that in mind. 4. Design a Button: Let's draw a button. Before we do that, let's go ahead and create a brand new project because this is now a serious project. So I'm going to go here to that drop down menu, create, and let's just go up to the parent folder, and I'm going to create a new folder. Call it button. Enter and then choose. All right, so we have this button folder and it's created all these folders. So now we don't want to save this. I'm just going to say Control N and then discard because we want to create a new scene. Control N is new scene, not new project. So discard this scene. We can control S, and it's going to be saved inside the button folder scenes folder. And the name is button dot cv. So there we go. We have a button folder and a button dot cv scene. Now, I want to switch to magnific.com, formally named FreePeek. Nowadays, they call it Magnific and I want to go to the stock assets. These are vectors. I want to search for subscribe. Alright, I had looked for a nice subscribe button. The color should be red. There is one that I really like, but this one. I like this one, but yeah, let's go ahead and create this one. So I'm just going to download the image JPEG, or you can just grab a screenshot. Here we go. Now, back in Cavalry, I'm going to double click this. And go to the Downloads folder, and here is the button we just downloaded. So here it is. I'm just going to drop it in here. It's too large. So I can hold out shift and click this square here and pull inward to make it smaller. Maybe that size. So now zoom in with a mouse wheel and here is the image. So I'm going to lock it so that it's not selectable. Because what we want to do and it's been added to the center of the artboard. So if I hold down Alt, if I want to draw a rectangle here, I can select the rectangle tool and draw and do. But if I want to draw it smack in the middle of the artboard, I'll hold down and just click it. It will add a rectangle smack in the world origin, 0.00 in the X and Y, as you can see in the attributes, rectangle position X zero, Y zero. So now we also have the primitive type here, under the attributes of the rectangle and under the attributes of any other shape here, if I add an ellipse and draw the ellipse there. The ellipse is selected here. You can see we have the primitive type here. This section just allows you to change whatever shape you just drew into any other shape here if you change your mind. So I can change my mind and say, I don't want this to be an ellipse. I wanted it to be a rectangle, so I can come here and say rectangle. And so it becomes a rectangle. I can come here with the select tool, select this and say, I wanted this to be an ellipse, and now it's an ellipse. This primitive type section here allows you to affect the shape you just drill as a primitive. So let me just undo all that and be left with this. So if we want to increase the size of this rectangle in the X, we're going to the width right here, primitive size rectangle width. And what this allows us to do is if we go to the corner radius, we can increase the corner radius like that. Now, if I undo that Control Z, you might have been tempted originally to assume if you want to increase the width of this rectangle, is to go to the scale X and Valla. But if we go and increase the corner radius, it looks stretched. So keep that in mind. So I'm going to redo that, then increase that radius up to that point, maybe 200 just to round it off. In fact, we can just put this on the side and see it always. So we don't need it there because we're not trying to trace it. So I'll select this unlock it, and drag it to the side, then zoom in. Now that we have this, can control D to duplicate it. Now we have another smaller one like this one, reduce the width and the height. We can change the color just to differentiate it. All right. Now, let's just select this outer one. Can go to the fill, select that, and I'll give it this darkish red color. Then select this smaller one, go to the field. Let's give it a bright red. And let's go to the stroke of the smaller one enable the stroke. And let's also make it red, but slightly darker. Stroke. What about there? No. Yeah, I like that. Now I'm going to click Hold on At because everything is in the center here. At and click T. Now, as you can see, the Gizmo is offset from the text. We want the text. Let's go to the attributes of the text because it's selected here. Let's go to vertical alignment. Now it's aligned center in relation to the Gizmo. Let's also align it to the center like that. And now let's change this to subscribe. We can give it this color. It's not white, looks like bright cream. I love it. Now, if you want to add this bell, we can go to I had opened up svgple.com. You can come here and search for bell or notification. First you thought about Alright. So let me just select this. You can edit the color before downloading it, select that. If we want it to be this color. Let me select this. Go to the fill, select that copy, go here, paste it. Then let's say export a SVG. So now here we go. We have the SVG. I can just drag and drop this here. There we go, or double click this and go to the Download and click that. So here we have the SVG ripple. I'm going to drop it in here as asset layer. If I select it, I can hold down out and shift and reduce the size, push it to the side like that. Push that to the side. I think I like that. Or is it too big? A shift. You should also select this, I want to reduce the height. So this one as well, reduce the height. I'm just winging it using my eye to judge the size. I think I love the size like that. So now let's just delete that. And now we have a button. Control S to save it, and our button is ready. So in the next lesson, let's see how to design a mouse cursor. See you shortly. 5. Design a Mouse Cursor: Now it's time to design a mouse cursor. Now, I know what you're thinking. Hey, Ken, why not just go here to SVG Repo and look for a mouse cursor? Mouse cursor. We have so many of them. Or just cursor. We have so many of them. And that's true, and we want to draw one that looks like this. And the reason we're doing this is because I'm looking for a reason for us to learn how to use the pen tool in here. So first of all, let's group these into a button. So I've selected all of them, Control G, select the group, Enter. Button. Now, if I select the group and drag it around, as you can see, the pivot point is always at its center. So if I animate the rotation, it's going to happen exactly at the center, just like we want it to. Now, we might want it to happen on a different spot. We can move the pivot point. Let me just undo that and leave it at the center, but I'm going to hide it. Now, let's add a rectangle in the center. So out, hold down out and click. There we go. Zoom in. Let's add a line. Hold out and click. There we go. Now I'm going while the line is selected to hit Control D, to duplicate it. Now we have line and line one, and I'm going to rotate line one, 90 degrees. All right. Now I'm going to select this line again, Control D, and just drag it down up to maybe that spot, somewhere near the bottom. It doesn't have to be accurate because what we want is to be able to select this tool now, pen tool and make sure snapping is enabled, so you can snap to the corners like that, then snap to that line like that, then snap to that other corner, then snap to that spot right there, and finally right there. So now, all these others can go. Those other were just guidelines. Now we have a nice, beautiful mouse cursor. The other thing we want to do is go to the stroke. And for the join style, let's say round. Alright, let's go to the fill color and change that to we can make it light. And the stroke can be a little bit brighter. And let's go to the rotation. Shape, rotation, let's say 20 degrees. If you look at our mouse cursor and that cursor we just drill, the rotation is almost the same. 20 degrees. So now, Let's select it. Let's reduce the size. So scale. If I reduce this scale, it's going to reduce the X scale. But if I hold down out, I'm going to reduce both X and Y. I want it to be small. In fact, let's just drag it to the side like that. Then let's unhide the button. Here's the mouse cursor. There we go. So let's make it smaller. Hold down out. Yeah, that's a good size now. I love it. I think this is a good spot to end this. In the next lesson, let's see how to animate this setup. The mouse cursor will come in and click the button. How do we do that? Let's see how to do that shortly. 6. Animate the Cursor: This lesson, we're going to animate the mouse cursor and then in the next lesson, we're going to animate the button. Let's go ahead and do that. Selecting the cursor, let me just hit Enter right here and call it a cursor. If you're a beginner, the way you would animate a cursor is by maybe dragging it. Let me just drag it off the side like that. Then let's go to position and then animate that and that set a key frame for those two right there at the beginning. And then maybe up to that point, you bring it right there. So now, if I play. That's a mouse curse. Animation. But the problem is if you look at me moving the mouse cursor around the screen, you never ever move your mouse cursor in a super straight line. It always seems to be curving if you're working naturally. So we want to move this mouse cursor in a curved way. So how do you do that? We use a path. So let me just remove these key frames, go back to the very beginning. And now what we want to do is take the pent and draw the path we want the mouse cursor to follow. So if I click that and maybe there Escape. Maybe I can double click it and then carry that out to that spot. Then V. Now we have a path. How do we get the mouse onto the path? We use a path finder to find the path. So I'll just go here and say pathfinder. Enter. And on the pathfinders attributes, you will notice here we have input shape. This field is asking in the pathfinder, this field is asking, Where is the path? Show me the path. All right, so let's show you the path. So I'm just going to drag our editable shave here, which is the path. Let me enter and rename it to path. Now, this path is what we need to provide to this field that's asking Where's the path. So I'm going to drag this into this input shape. As you can see now, it says path, the name we gave our path. So now, the pathfinder knows the path we want to use. So we want to tell this cursor in the position attribute, Hey, you know what? Follow this path that's provided by the pathfinder. So we want to come to the pathfinder and drag and connect it into the position. So we're driving the position of the mouse cursor. Instead of manually driving these positions ourselves, we're saying position yourself, you mouse cursor according to where the path tells you the pathfinder tells you. So connect to the pathfinder, like that. And as you can see, the mouse jumped to where the pathfinder told it the path is. Now, on the cursor, we can't animate anything because now it's driven by the pathfinder, which means to animate the mouse cursor, we have to animate an attribute of the pathfinder, which is the travel. Because you can see, but now it's following that path. So all we have to do is go to the first keyframe, zero, right there. Now, let's create a keyframe. And then maybe let me just play. That's where I want the mouse to soh to. So let's increase this up to that spot, 99.5. And now automatically another key frame has been added. So now it comes in this way. Now we can add path, the path itself. It's hidden, but the mouse knows where the path is. So if I play it, but now notice it's coming in very linearly. It doesn't have that sense of animation, that elasticity. We need to add that elasticity that makes animations look better. So what we need to do is go from the time editor to the graph editor, hold down shift and reduce the height of this, hold down control to zoom in. Select both of them, hold down out and click one of them to change this to bezier curve. It was a linear curve. Now it's a Bezier curve. So with the two of them selected, I can hold down shift to constrain them to move in a straight line. But what we want to do is create that S shape like that. So what that means is the animation will start slowly then increase suddenly, then slow down slowly like this. So let's see that. If I play, can you see that? So, let's switch back to time editor. Let's just play it. I like it. Let me just reduce the time Control K to bring up the composition editor if I escape. We can also go here to composition, composition settings. We can reduce this to 20 frame range 20. So we have a shorter timeline. So play that. So I think that's a very natural mouse cursor movement. In the next lesson, let's see how to animate the button as it gets clicked, because right now you can't tell if the button has been clicked. I'll see you shortly. Don't go anywhere. 7. Animate the Button Click: Open, everybody. Welcome back. So now it's time to animate the button itself. So let me just play to see where I want it to animate. So right here, right here. So we need to increase the length of the project, maybe up to 60. That's all 60. Hold down out to expand and contract it. So now, let me play again. Right there. So I want to select the button itself, the button group. Remember, it's a group with many things. We're animating the group itself. And what I want to do is animate the Y position. So I'll add a keyframe there. And the key frame will be added right here. So if I play it I want to copy this copy and paste it right there because in the middle, it's going to move down a bit. So in the Y axis, let's say 15. So it's going to start at the normal position and end up at the normal position, but in the middle, it goes down a bit in the Y axis. Let's just play that. Let me select all of them and pull them back a bit. Like that. There we go. So now, one more thing to add some realism to it is go to the graph editor, and let's do the same treatment we gave the other key frames. So hold down Shift to reduce the height here, select all of them. Hold on out. Hold down shift, and then click and drag to form that S curve. Alright. One more thing. Let's go here. And I want us to go to Pixa Bay. Pixel Bay sound effects. Because we want to add that click sound. I had downloaded one, but I don't remember where it is. So explore. No, let's just go to sound Effects. Then I'll search for Click. As you can see, I had searched for Click earlier. Is this it? Alright, I'll just download this first one. But choose the one you like most. There we go. So I'm just going to drag it into here. And now, here it is Universal field computer mouse click. So I'm going to drag and drop it somewhere here. Where is it? There we go. So now I'll drag and place it right below where the clicking happens. Let's play it from the beginning. Just like that. I like the results, but this is just the beginning. Of course, this is an example and an entry point into what we're about to do in the coming lessons. I wanted us to get comfortable with animating components. I hope now you have the confidence to move on to the next lessons where we're going to start by designing a user profile card. I'll see you shortly. And one more thing just in case you want to regulate the volume of your audio, just like every other element here, audio has attributes, and one of the attributes here is the volume. So you can reduce it up to whatever levels you want. I usually go up to negative 20 for things that I want to keep subtle. Let me just play that. Just like that. So just play around with the attributes and see what you want to change and improve the click sound. So I think this is a good spot to end this. In the next lesson, let's design a user profile card. See you shortly. 8. Design User Profile Card: So now that we're done with this button, because we were using it as an example, it's time to create a brand new project. So I'm just going to go here, create go to my two D Projects folder. I'm going to provide this project folder as well if you want to examine it. But right now, I'm just going to create it in here. App, UI animation because we're going to contain all the UI components here that we're going to animate for the rest of the class. So enter, choose and of course, this is in a different project, so I'm just going to say Control N for new scene. And now we can save this first scene as user profile card. Let me just copy this name here. User profile card. Save that. So the first thing is, of course, to bring in the inspiration if we already have the UI. Of course, if you're animating a UI, you're basing it on a real app or software or website, and so we need to have a screenshot of it. So I'm going to double click this. I downloaded some UI elements. From magnific. Let me just look for it very quickly and come back. Alright, so we're back. So now I'm going to go inside the project folder. This is our project folder, and of course, these are the folders that were created. One of the automatically created folders was assets. I'm going to go in here and paste the UI I want us to use. Then I'm going to double click. Oh, wait, we're already in here. So let me just go into the two D projects. Assets, here's the UI I wanted us to use. So I'm going to drag and drop it in here, hold down Shift and drag. So the elements we want are this and this message UI, and we're going to create that news headline as well. Now that we have this here, let me just drag and put this on the side here so we can observe it as we draw it here. 9. Design User Profile Card: All right. So now, hold down Alt and click the rectangle. Let's increase the heights. And the width. So let's say 750 by 550? Let's say by 600. Yeah, like that. And remember, it's smack in the middle. It's at the center of the artboard. And that's where we want it. All right now this is interfering. So let me just select it. Then hold on out here. Yeah, like that. Zoom in. Now, we want to select this and go to the corner radius. Crease the corner radius up to that point, change the color. And as you can see, we have a background purple. So click this Background shape. Background is a shape like all these other shapes, double click that, and you can drag and place it at the back or just use the normal adobe illustrator shortcuts. Control Shift left bracket to send it to the back. Another shortcut is V for the select tool or A for the direct select, which is called Edit Shape two. So all the shortcuts you're used to work in here. So it's in the back. Now, while it's still selected, let's go to the fill color and change it to that purplish color. I like purple. It's bluish also. Or we can just use the Eyedropper tool to sample this instead of wasting too much time. There we go. So zooming in, I'm going to select this and also use the Eyedropper tool to save time and select that. Now, let's create this user profile text. So I'm just going to select the text tool and click there User Profile. User profile. Select the selection tool. Hold down shift, click this and resize it. Now we can go in here, and I like aligning it to the Gizmo like that. Maybe that point. We can also make it bold. I want it black. That's thicker than bold. And ours is a little bit bigger. So we can continue resizing it this way or just use the font size instead of the scale, but it doesn't matter for what we want. Next, we want to create this menu. So I'm going to hold down Alt and click on the Ellipse too and I'm going to click the duplicator to create a duplication of that. I'm going to go to the automatically selected duplicator and change to linear and increase the size to space it out like that. Then we can reduce the size of this thing. Just like that. And we can change this to vertical. If we click aside, in fact, this is not locked. So let me lock it, the background. Now, we need to space this out. Let me zoom in. Compared to this other one, we need to space it out. So while it's still selected out, increase the size. Yeah, I like it. But the circles are still bigger. So we can also just select the ellipse itself and scale down holding down to reduce the size of each individual shape. Let's go to the duplicator. Place that there. Now, we need to do some organization very quickly here. What is this? This is the card. Enter, card background or card BG. Text is user profile. Text, the ellipse. Well, that's the dotted menu ellipse shape, just so we can know what it is. It's the original shape we drew that we've now duplicated with the duplicator. So this duplicator can be renamed to dotted menu duplicator. So we can know what it's a duplicator of. And we can always just parent this to the duplicator because this is what's duplicated by the duplicator. So it can be a child of the duplicator. What else? I think for now, that's good enough. We can also group these all of them into a user profile group, but we're going to do that later. So let's create this Adam Sally. Holding down while this is selected, these texts or any shape, holding down and pulling duplicates it. So I'm going to double click that and Adam savaging. There we go. I'm going to increase the size. Yeah. 10. Design User Profile Card: Now, for the Avata, you can go back to our website right here. To SVG Repo, search for Avatar. Or if you have a user profile image, use your image. So use Avatar. As you can see, the one I went with in my example is this. So I'm just going to select this. No need to edit vector, so download it and I can drag and drop it in there. Then I can drag and drop it into there as an asset layer. And while it's selected, hold down Shift A to reduce the size. Let me just see, it's a good comparison. All right. Now, let's create the stars, the five star review. So I'm going to hold down Alt and click drag that and place it there. Hold down Alt Shift, just like that. Can drag and place it right there. All right. Before we do that, let's first of all, duplicate it. Duplicators work best when you start at the world origin 0.00. So this is what we should have done, duplicate it like that. Then change to linear increase this to five. And let's increase the size to space them out, space them out completely. Then let's reduce the size of the duplicator itself. We're just eyeballing it. We're not trying to be perfect or exactly like this. We're just learning the concepts. Using the mouse right there. We can space them out further, so increase the size. And we can move the pivot point to this end. If we wanted to animate the stars from this side, we would move the pivot point to the beginning like that. And then if we do any animation, it would be in relation to that pivot point, even whatever kind of animation. So now, with that, I think we have a good star rating. We can go and change the color. So that's the Avatar. This is a star shape. So Home, five star rating. Shape. And this is the five star the rating duplicator. So we can place this under that. There is no importance in doing that. We're just organizing it so that I'm able to collapse that because this is what we're really interested in right now. But if you want to make granular very specific changes to the star itself, we can do that. For example, we can go to the fill and change the color to that purple. I almost nailed it in the first go, so I just select this color. In fact, let's just go back and fill color. No, we had the this. Let's just use the drop eye dropper. Copy that. Let's go in escape. Why isn't this going away? All right. Now, let's go in here and enable that. Let's zoom in. If we go to the joint style and say round, let's increase the size of the border like that. Then paste the color the purple color in there to make it more rounded. So now what we need to do is reduce the size of the duplicator further, holding down out just like that. I like it. Now, holding down out, I can drag that. Of course, we can reduce the size of this and change this to regular double cliques and my email at email.com. With this selected, I'm going to Alt drag and Alt drag again. Double click Enter the phone number plus 25407001, two, three, four, five, six. Double click that Mombasa Road, Nairobi. Mombasa Road. Now all we need to do is go look for icons from this place, SBG Repo, email or mail. I like this, but we want to change the color to this purple. So I'm going to select this. No, select this shape itself, go here, select this color code, go in here, edit, paste the color there, then export the SVG. Drag the SVG and place it in here. Here it is. Let's just drop it there as an asset layer. Select it. Hold down, All shift. There we go. So let's do the same for phone and location. Smartphone. Export SVG. Let's drop it in here. Asset layer, select it. For some reason. Oh, wait. I dropped it in the wrong place. Sorry about that. I should have dropped it outside the email. But it's falling inside the email, so I'll drag it outside like that. Alright, now. What size is this email? 0.047. So 0.047 and 0.047. Yeah, we're getting close. Location. Go to drop it right below there. There's an asset layer. Yeah, it's not inside those icons. At shift, 0.470 0.047. 0.047. So as you can see, designing any user interface in Cavalry is very easy with these Adobe Illustrator like tools. It's very easy if you've already been using graphic design tools. Let's bring these down. All right. So we're almost there. Let's draw the buttons, increase the width. I Before we move it, let's first of all finish the text and everything. So increase the corner radius to 30. Hold down out, then click to add text. Let's align it vertically to the center and align it center horizontally. Give it this color. Now, let's give it white. Reduce the size. Double click. Follow. I think the font size is still big. Yeah, let's say, 24, selection two. While it's still selected, hold down Shift to select both of them and place them there. While they're still selected, hold down out. Alright why isn't it working? Is it because they're not a group? I'm trying to duplicate them. So anyway, select the rectangle. At drag. Select the text. At drag. Why am I selecting this? Let me just lock it. Now, let's see. Yeah, like that. At drag. Double click that. Message. I'll select this. Let's go to feel. Eye drop a two and select that. Select the second one, go to the color, make it lighter. We can give it a gradient, but I want to keep things simple for now. Let's select the text, go to the color and make it darker. Not black but dark. And there we go. I think we have ourselves a nice card. I want to select these two, hold down shift to select both of them and then push them down. And I think we have a nice UI. Before we move on, I want to select these and Control G to group them. And now, as you can see, we should have finished creating them in the middle, but no problem, we can move the pivot points. So where is the pivot point in the Y axis. And then now let's move the pivot point itself because what we're animating is the pivot point. Select this and this Control G. Let's move the pivot point as well. And let's move it down again. Now, selecting all of them including this card background. Control G. Now we can move this card as a whole and we can animate it as a card. But if we animate whatever is inside the group, actually, this is a group. Let me enter and rename it to User Profile card. Now, whatever is inside the user profile card is everything we had. So now we had this group called the message card, Enter. Message button and this second group here, Enter. Follow button. We can also now animate the buttons within the group. So it's always good to have that pivot point right there. Now, the pivot point of these others don't really matter because we're going to animate the buttons and the card. This is already a duplicator, so we're going to animate it as a duplicator. So I think this is a nice spot to end this lesson. This was learning how to design something more complex than a button. In the next lesson, you're going to design the message card because, remember, we said we have several things to design. This is the next thing we're going to design. In fact, this is an exercise for you. Follow the same principles we've followed to design this to design this. I'll see you shortly. 11. Design Message Card: Now it's time to design the message card or the chat card, this card right here. Now, we already created this and it has its Gizmo right in the middle. So why not just duplicate it? So I'm going to collapse it, User profile card, then Control D, and it's going to create a duplicate called User Profile card with everything in it. But we don't need everything because as you can see, the reference here doesn't have any button. So why not delete? First of all, let me select card one. I'm going to hide the original card, then select this and enter. Then call it the message card. Expand it, collapse all these. We want to get rid of. In fact, we're going to use these two because we can use this as one of the chat bubbles and this other one. Selecting this enter chat bubble one, and this other one enter. Hat bubble two. We can remove all these other details. Let's see what it looks like. We might use let's remove all these icons. Remove the Avatar, or it has the avatar. So we select the Avatar and move it to the top. Hold down shift to move in a straight line. Hold down shift out to resize it. User profile. While it's still selected, hold down out and drag. Double click it. Control A, select everything. Online, I think it says online. This is bold. We want it regular and reduce the size. And let's push it down. Holding down Control to move in small increments, push it down. Let's see. Remove that that five star rating. Card BG is okay. In fact, we need to label this. Enter. User name. And here it's supposed to read Adam savaging as the user name. Then this here is the online online text. It should also be the user name text. Online text. I already read online. Now let's go to the Avatar. Then we have the dotted menu. That's okay. Chat bubble one. Can pull it up here. Now notice if we expand it. Oh, that's hat bubble two. If we expand it, if we go to the rectangle shape on the corner radius, we can change from all to individual and here change these to 20. 20 and 20. That creates a speech bubble sort of shape. So selecting it again, and we can increase the height, can select the text and provide whatever text we want. Let me see if I can grab some text here. So copy that, paste it in there. Now, it comes in as a single text, so I'm just going to delete that and instead, I'm going to select a text tool, click in here and drag to create a text box in which I can now paste all my text. Where is it? Why did it go up there? So let's go back in here again. Text. Paste. Yeah, it's supposed to be pasted in here. So I'm just going to remove some text. We just want some Let's left align it and change the field color to white. Push it manually with arrow keys, and there we go, we have a speech bubble. Now, instead of wasting time with this other one here, let's delete it and then select this control Oh, wait. This text we just added should be inside that chat bubble two to form that group. Now, if we control D hat bubble two, it's going to form a new bubble like that. Let's expand it. The shape. In here, this is supposed to be five and this 20. Then the background color, we can sample this, let's sample this. So do. Right there. Select the text, change the color to a dark gray, not black, dark gray. That's a nice speech bubble. Alright, you can change the text to say something else or just leave it as it is. Let me just change that. Now I can select speech bubble two again, shift D, and then pull it down then speech bubble three. Control D, and pull it down. Control S. Now we could add let me select this, Control D, and pull it down to the bottom. And let's remove expand it, delete the text. Select the rectangle. We want to create the typing area, this textbox. Selecting the rectangle, go to this also 20. Let's go to the fill color and make it darker. Maybe give it a border but very faint as well. No, it's too dark. So first of all, slightly lighter. Alright, my project is hanging. Alright, now, my project is hanging. Let me restart it, and I'll be back shortly. 12. Design Message Card: And, welcome back. Now, I had to restart Cavalry after it froze, so let me just hit Control O to open our scene again. And we named this scene user profile card. But we've already seen we're already creating even the message card in here. So let's just change this name to app UI animation because it's going to contain all the cards. We're not going to create every card as an individual scene, but it's possible. So let me just click that. Let me just expand hat bubble five, and we want to duplicate that background. So I'm going to select it Control D. I'm going to change the stroke color. To a very faint but slightly darker shade. Still light. So I want to go back in here. I like that. So selecting it, let's push it down with the arrow keys. And let's change from this speech bubble shape to all the corner radii being 30 so that it's all round, just like that. Now, one thing I want us to do at this point, if I drag this to the side is select the card rectangle, card BG, and we want to apply a drop shadow to it. How do we apply a drop shadow? A drop shadow is an effect, and filters are what we call effects in Cavalry. If you want to apply a drop shadow, blur, all those types of effects, you use filter. So I'll click PAS on the card BG. Plus on the filters, then I'll go to drop shadow. As you can see now we have a drop shadow, and the drop shadow is added right there, so I'm going to select it. Everything you add in Cavalry is like a node. That's why it's appearing here individually. In after effects, when you apply an effect, it doesn't even show up as a layer because it's not a node, but in here, it's a node. So the drop shadow, we can play around with opacity. Can make it less visible. We can spread it out. Let's just hold down Alt and or not hold down Alt, see where it goes. Blur amount, can blur it out. Yeah, I like it. Blur it out. Let's reduce the Alpha. Maybe in the X, we can move the positive side. There we go. Now, the good thing about effects and filters and deformers being individual nodes is that you can reuse them. We can use this same drop shadow for the user profile card background. I can just pull this and place it outside all of them. Now we have the message card and the user profile card. Let me select the message card and push it to the side like that. Then hide the user profile card we hit. It had its own background, card BG. So we can come here to this drop shadow and drag it into the card BG. Filters. Yeah, exactly like that. Or let me just undo that. With the card BG itself selected, we can go back to the drop shadow. And because the drop shadow, as you already saw, is a filter. And if we wanted to add a drop shadow to this card BG, we would select it and go to the filters. We can just go to this filter that was already added and drag it into this filters field of this card. Just like that, and it's already now showing the effect of the drop shadow. So that's it. I think we're ready to move on to the next step, which is designing the news headline before we start the animation. So I'll see you shortly. 13. Design Message Card: One thing I just remembered is instead of this being a text bubble, it can be those loading buttons that show that someone is typing. So why not go in here message card. And that is chat bubble five. And in fact, we still have some this text area in here. Let's place it in the message card and outside the chat bubble so that the chat bubble is just that. But now we want to remove this text. And we want to duplicate this dotted menu and place it in here. So message card, dotted menu, Control D to duplicate it. Going to call this Enter, dotted text typing effect. Effect duplicator Enter. So now we can drag it down. And because it's a duplicator, remember, it has this distribution which we can change direction we can change to horizontal. Now it's behind this speech bubble. So let's place it above that speech bubble. Right above right below rectangle shape. Exactly in front of this. Now this is speech bubble five. So if I select the rectangle, let's reduce the width and height. And let's push it to the side. Holding down shift to move to constrain it in a straight line. Going to select a dotted duplicator. I think we should make these circles a little bit bigger shape scale, holding down out, but also increasing the size here to space them out. I think the shape scale is too big. So maybe 1.8. No, that's too big. And this is too big as well. So 800 maybe. And this maybe 1.5 h selecting it again. I think that's a good size. Now, of course, we're going to animate it, but for now, I still want to reduce the intensity of this dark color. So now, let me just expand the dotted typing effect and select the ellipse itself and go to the field color. We want to reduce the field color opacity, reduce the Alpha. Maybe out to that spot. We're going to animate it. Don't worry. But for now, I think that's a good spot to end this. In the next lesson, let's create the news headline before we move on to animation. So I'll see you shortly. 14. Design News Headline: Now it's time to design the news headline. Now, we're already done with this screenshot, so I'm just going to delete that, select these two, and I'm going to hold down Shift out to reduce the size. And I'm going to place them there. No problem. It doesn't really matter. So now, collapse that. So we have two cards. We have a drop shadow that they're sharing, and we have a background. We want to hide these two. Control S to save that. Now we want to create a news headline right here, following the same principles of making sure the Gizmo is right in the middle. So I'm just going to pick the text tool and drag to create a textbox. And I have a sample headline here, top five tech skills in demand right now. Let's switch to selection tool. I'm going to increase the size. Let's switch to a different font. The leader one. Bold. You can choose whatever font you want. Let's reduce the line spacing. I think we're done. We can always change the font. Let me see what about monster ax. But I want black. Very thick. Yeah, something like that. If I double click it, we can drag this to increase the width. I think I like that shape now. So go back to selection two. While it's still selected, I'm going to out drag and double click in there, Control A, and I'm going to type a smaller subtopic or subheadline. Copy that. Alright, it's too big, so let's reduce that size. I just want one sentence. Something like that. Holding down shift, I can drag it in a straight line downwards. And while it's still selected, I can drag again to duplicate it and double click in there, Control A, date, maybe a column, selection tool. And the textbox is too big, so zoom out. In fact, this is what should What I want to do is delete that and just select this and click to make a single line textbook instead of a paragraph textbook. So now let's change this to date and a column. The blog post was written out drag Double click that. What date? 29th, May 2026. And for this, we're going to use regular. For this one, we're going to use regular as well. Now, let's just leave it as bold. I'll drag the date. Written by Alt drag, holding down shift to move in a straight line. Alright, I was unable to do that. Let's say, Michelle Lin or something. I don't want this to be black, so let's just make it bold. Bold. Selecting all of it right now. We can group it enter, and call it News headline. We can also move its pivot point if we don't like where it is, maybe we want it there. Now, one more thing we can add are those highlights, top five tech skills. Yeah, let's say that one. And while it's still selected, I'm going to drag high demand, select this side and pull. So we want the highlighter. While they're still selected, I'm going to go into opacity and reduce the opacity to maybe 70. And now, these are the strike throughs or highlighter effects we're going to animate on top of the text. So let's just reduce that. Let's say you're using a marker that's not covering the entire text. But we're going to animate this text, animate these highlights. In fact, let's change that to a green highlighter. Or whatever color you want to use. This is it for now. I think this is a good spot to end this. I wanted us to create the news headline and don't forget to add these shapes to the news headline group so that when you move the group, you're moving everything. When you're animating the group, you're animating everything. Controls. 15. Mouse Cursor: Before we move on to animation, we will need a mouse cursor. And since this is a new project, we don't have the mouse cursor we created earlier. Now we can import that mouse cursor as a pre comp or a precomposed asset and start using it, but we don't have time to start talking about precomps right now. So we're going to have to create a mouse cursor again, but this is up to you. This is your exercise. Create a mouse cursor following the steps we followed earlier in the button lessons and create a nice mouse cursor that we can use in our animation. I'll see you in the next lesson. 16. Animate the Cursor: So now, as you can see, I've already created my own mouse cursor, and it's time to start animation. So let me just hide the news headline. And as you can see, this is what we have. I want to make it smaller. So I'll select it and hold down I'll shift because we want to fit everything on this screen and then animate everything. So I want to push it down there to that corner. And I want to unhide these other two. We can place this here. In fact, let's push them up and to the side. Let's select them all, except the mouse cursor and just reduce the size like that because you want to We want each one of them to have enough space to fit in the screen like this without the other showing. So we want this somewhere here and this somewhere here. We're going to clean up the arrangement shortly. We just wanted to have a rough place where the mouse can move from place to place animated. Now, this should be opposite like that. And so now we want to think about the mouse cursor's journey. How is it going to travel across and for how long at every given point? So that's our job now. Of course, the first step is to create the path that the mouse is going to pass through from beginning to end, and then we're going to time every single part where it interacts with an element. So, let's say, let me pick the pent. We want the mouse cursor to come here and then hover over the star rating and click it. It's going to start as an unrated user profile with just the stars having an outline. And then when clicked, they're going to have a field color. Then the mouse is going to go down here to the message button and click it. Then go here. We're going to see these three buttons animated, then move to this spot. So the path we want is something similar to this. It doesn't have to be like this. Maybe up to that spot, and then you hesitate a bit, then click the five star rating, then move to the message button, but we want it to be a curved move. Then we can just continue this curve. The mouse cursor can move to that spot. Then after staying there for a moment, we can navigate to this point. Then escape. So that's the path the mouse cursor is going to take. Alright, let's go ahead and rename the mouse cursor, shape, enter, mouse cursor, and the path. In fact, yeah, let's just call it Path and select the mouse cursor as well and Control G. Now we have them as a group, and I want to hit Enter and call them cursor. So if we expand, we have the mouse cursor and the path all in one group. Now, let's also create add a Pathfinder. Remember, we need a pathfinder. In here, and the pathfinder is asking us, Where's the path you want to use? So here's the path. So we drag this path into here. Now it knows about this path, and the mouse cursor's position attribute needs to be driven by the pathfinder. So let's now drag the pathfinder into the position of the mouse cursor. Now, because we're at the very beginning here, we can set a key frame on the pathfinders travel. And let's just play this to see where we want the mouse cursor to get to this point, maybe at that spot. So by that time, the mouse cursor should have traveled to that spot. And as you can see, a keyframe has been automatically created. Now, at the same time, we want to edit this path so that the mouse cursor is not too high. The mouse cursor is too high above the star rating. So we can go to the direct selection to and edit the path. So we can select that point, hold down shift, select this point, or just select that point and place it down there. We want it to point there. But at the same time, I also want to select this cursor and reduce the size. It's too big. This is checked to make sure both of them are constrained to work together. And if I go to the direct selection tool again, select this point. Right there. So these are just a tiny little adjustments you would wonder how to make. I'm just trying to show you how to do that. Now, at that point, we do not want the mouse cursor right there. I want to pull it back a little bit. If we go to the pathfinder, as you can see, we're on the green keyframe. That means we're on the keyframe and we can edit what the keyframe value is. We can go back here. We want it there. Then for a moment, we want to linger here. Maybe up to that point, let's go. So I can copy this and paste it there. That means this value is copied to this spot, and so it will remain there before it does anything else. So now let's move to this spot maybe and continue this maybe up to that point. So this is assuming you're clicking the five star rating. So it comes like that, delays, then moves and clicks the five star rating. Now we want to copy this last keyframe because we want it to remain there for a moment and paste it there. So these two values are the same here. So it will delay there after clicking it. Delay there for a moment. And then from here, we can start moving down. So let's see how long I want it to last moving down from there up to that spot. So by the time it gets to 160, it should be at 36 point let's say 55 45. Yeah, right there. So it will come like that. Delay there. Check the star rating, then go down to the message button before. Alright now let's delay there for a moment because we want to delay as we click it. So it'll get there, then delay. That's where we'll click it, then start moving. So we'll click it at maybe 200. So we're just saying this value this value is the same as this value. So between this point and this point, the mouse cursor should not change its position. But then after here, we can start moving. We move it now to this point. So we need to increase the time here. So let's go to composition settings. Let's let's make it 1,000. 1,000. Hold on out to zoom out. And now, as you can see, we have more space. I can select all of them, move to the end and hold on out to zoom in. Over over there to see that highlight at the end and now pull towards the end. Right there. So now we say once it gets there, we click, then it starts moving. So let's go to the pathfinder and continue that. Maybe that spot. Let's copy that value, and let's allow it to delay there for a second. Then paste before we move finally to the text to the news headline. So let's add a keyframe for the news headline. Right there. Save that. So if I hold down out and zoom out with my mouse wheel, go back to the beginning. Zoom out here. Click that Mouse message, move there, see the three buttons. Exactly. Let's say, up to 450. So Control K to bring up the composition settings 450 or maybe even 400. Exactly. Escape. There we go. Take that. All right now, let's play without. Let's hide the path. Where is the path? Let's hide it. Let's play that. Exactly. I love it. Let's go to 360, Control K. Still have too much time left there. 360. Yeah, Escape. Alright, Control S. Now what's left is for us to select. Let's switch to the graph editor. And we want to go to the pathfinder. Remember, this is what we were animating the travel. We want to come here, hold down shift to reduce the height, select all of them, hold down out, click one of them, and let's zoom in on that. Hold down shift, and let's create a nice set of S curves all over. So that means the mouse cursor will move in better animations. Let's just see what happens here. Let's go. Yeah. Exactly. So it's touched slowly then fast then slowly. All right. We have quite a few things to animate. We also haven't animated the five star rating. When it's clicked, it should behave somehow. When the mouse cursor is passing over this purple button, it needs to show some hover effects. It needs to react. And then when it gets to here, it also needs to hover. All those effects, we need to have those reactions. But before we do that, let's first of all, animate the camera. I'll see you in the next lesson. 17. Animate Camera: Now it's time to animate the camera. So let's see how to do that. First of all, I want to collapse the pathfinder here and collapse the cursor. What else do we have? Let me just drag the drop shadow down there so that we have all the shapes above here and these other helpers down there. So right now we're animating the camera. So I want to say plus camera. And now we have a camera. And for the camera to work, we need to convert everything here to 2.5 D. So let's check all these boxes. No, yeah, including the background because we also want the background to move together with everything as we move the camera. Now, here's the camera. That's what we have selected, and we can move things around. So for example, we don't want to look at. I want freeform this is the type I want. In future lessons or in future courses, I will show you how to use these other types, but for now, we're going to use free foam. That just allows us to move around and navigate very easily like this. And you will notice when this is now the camera moving. Assume we're holding the camera and moving in the world. The world is not moving. We are moving. This is the camera seeing what it sees and we're animating what the cameras looking at. So we don't want this white color. So what we need to do is go to the background and increase its size. So scale it. I'm going to check that and just bump up the size. That's okay. Now, I want us because this is 2.5 D, let's go to the camera. This is 2.5 D. We can zoom in in the Z axis like this and move this like that. Zoom in like that and like that. Maybe up to that spot. Now, we're at the very beginning, so we can set a keyframe right here. So with the camera selected, and of course, we want to make sure all these three, if I hold down out, we've set a keyframe for the X, Y, and Z. So the X, the Y, and the Z axis know that we start here at this point. That's why we have the keyframes. Now let's move forward a little bit. Now as you can see, the mouse has come in. Now it's right there. This gives us an opportunity to copy these keyframes, copy and paste so that when we're moving it to click the five star rating, we can zoom in. So first of all, at this point, it's right there. In fact, let's move it forward a little bit, right there. So I want to drag these key frames right there. In fact, let's move it back a bit. Now, we need to move to zoom in at that point. So in the Z axis, so let's move in in the Z axis. X axis and the Y axis. X axis a little bit. Hold down control to move in smaller increments. And now we want to stay here for a moment. I'm going to select this copy, then move forward a little bit, up to that time when we click it. Now we're assuming this is the time when we're clicking that, paste that. For all the time, key the values here will be the same up to that point, so we're not going to move around the camera. Let's just play that and see. So since from here to here, we're moving the mouse to go and click that. We need to delay the camera right here up to that spot. So let me just click that copy and paste it there. That means we're going to delay there for that moment before we start moving out. So now let's move out. So in the Z axis and in the Y axis, Z axis again. Y axis. I think that's a good spot. Say that, Control. I'm also going to copy the X axis and paste it there because it's also going to be animated as we go into the future in the remaining part of the timeline. So we want it to also know it's supposed to maintain its position and axis value until it's changed. So now, we're going to delay here for a moment, as well. Until the mouse cursor moves because at some point here, the button is going to be clicked. So let's say it's going to be clicked at that point. So by that time, he should have maintained that same position. Let's paste these same positions right here. And when it's clicked, we now move to the other spot to the other card. So, in fact, let's drag these further out. Control S to save. Let's go back and play this from the beginning. Mm hmm. Delay there, click, then move. So now we start moving here. We start moving from here, and by the time we get to this point, let's see what we have. By the time we get to that point, we have that and let's also zoom in in the Z slightly. Exactly, like that. After delaying here for a moment, the button gets clicked. Then we move on to follow where the mouse cursor is going. We get there before it. Then let's delay here for a moment, copy the until it's time to move. So let's paste it right there before we start moving down to the title. So Control S, and then let's play that. Message clicked. We go here to see the message typing effect. Then from here, let's move out and see what we got. Moving the Z And let's zoom in. X. I think that's a good spot. So now we have that. We delayed here for a moment, then move to the news headline, and that's where we relax. Or shall we move slowly? What if we move faster? Yeah, faster is better. Alright, let's move it back there. Alright, so now let's play it from the beginning. Play that. Click the Strating message Adam savaging. We can see them replying. Then read that. That's where we're going to animate that highlighter effect. Let's do one more important thing. As you can see, the animation looks very dull and linear. We want to give it that bouncy, elastic animation feel. So that bouncy easing. So as usual, let's select all these hold down shift to reduce the height there. Select all of them. Hold on out and click one of them to change them to bezier curves. Hold down shift. And let's create some nice curves like that. S shapes. Alright, now, going back to the timer and let's play it from the beginning and C. Yeah. Exactly. Looks very professional. I love it. Now imagine when we add some music and some sound effects. It's going to be epic. In the next lesson, let's see how to animate now these other elements. I'll see you shortly. 18. Animate the User Profile Card: Now it's time to animate the reactions of the mouse cursor clicking or hovering. So we're going to start with the user profile card, which is this. And the first thing we see here is the mouse cursor comes here and gets close to the star rating. So let's animate the star rating. It's in the user profile card. Five star rating duplicator. Now, what we want to do is duplicate this five star rating duplicator because we want one that does not have a fill and one that has a fill. Let me show you. So with this selected, and remember, we put the five star the star itself, the star shape inside the duplicator, just so we're able to move them around as one thing. So what we want to do is select the five star rating duplicator and Control D. Now we have two of them. I'm going to enter this and say, fill and select this, enter and say stroke. This is going to be the one with the stroke. I'm going to expand that and go to the field here and disable that fill. I only has a stroke. All we have to do now is move in the timeline. Before the mouse cursor gets to the star rating. So right here, let's select the one that has a feel, go to the very beginning and select that handle. And basically what we're saying is from this moment, all the way to this moment, just show this five star rating stroke. But when we get to this point, introduce the one with the feel. So we've not actually animated anything. We've just moved one of them further into the future. So that produces the effect that when we hover over it, it changes color. I want to hold down Alt, zoom in here with a mouse wheel, select this. That's where it should begin. Alright, let's grab this like that. Alright, so hold down Alt and mouse will to zoom out. So let's play that and see. Like that. I love it. Now, the next thing we're going to do here is get to this point. When the mouse cast gets to this purple button, the color should change. So this is the follow button inside the user profile. Here it is. So expand that follow button. For the rectangle shape. We know it's at this point that we want to change the color. So rectangle. Fill color. We're going to hold down out and click that. So at that point, we're saying the color of this rectangle should be that color at this time. But now, let's move back slightly. In fact, we want it I want it right there. That's where we want it to be this color. But when it moves to the next frame in the button itself, it needs to be a different color. And before we do that, let's first of all, handle after the mouse cursor leaves the button. So it's still in the button, still in the button, outside the button. So at that point, it should also be this color, the normal color, paste. But now, in between here, it should be a different color. So what color. Let's give it a darker purple. Automatically, some key frames have been introduced. So at this point, purple, light purple, dark, then light again. So let's play that and see. So it produces that hover effect. I love it. We want to do the same for the message button. So right before that point, let me collapse and that and expand the message button, the rectangle here. So at this point, we're saying we want the color of this rectangle to be that color. And when we get to this point where the mouse cursor is pointing the button, let's set another keyframe. So holding down out, we're going to set another keyframe, but let's make it darker just slightly. Like that. And, of course, after that, when the mouse cursor leaves the button, it needs to go back to the color. So let's copy that. And let's move forward slightly. It's going to delay there. Let's say, at that point, at that point, paste. So we have that hover effect, over effect. And when it's over there, let's also now give it that position animation. Collapse that rectangle, select the message button as a whole, and let's animate the position at that point. So going back here, we click it at that point. So right there, Let's expand that. Copy that, paste it. Now, in between, push it down. So like that. Then we start moving. So let's go. Play. Exactly. Right here, we want to animate the dots, and that's what we're going to be doing in the next lesson. I'll see you shortly. 19. Animate the Message Card: Now it's time to see how to animate Let me just bring the screen. Let me just hit F to fill it up. Then we want to see how to animate these three dots right here. So this is the message card. I'm going to expand it. And I think these three dots were grouped together with this. I forgot to separate them because I was looking for it and found it in here. And yet this rectangle shape six is this texteria. So I'm going to pull this and put it inside hat bubble five because this is hat bubble five, which I should actually call dotted typing effect because that's not a speech bubble. So now if we expand it, we're going to find the duplicator we were looking for. This duplicator has three dots. So what we want to do is animate these three dots, and the specific attribute we want to animate is the opacity so that at this second, the first dot is lighter than the second and the third is darkest. The next second, the next dot is lighter or more faint and onwards along the timeline. So we want to alternate the opacity. So how do we do that? A good way to alternate values or data inside Cavalry is using the oscillator. An oscillator is a deformer, and we're going to see how to use it. But if we want to apply a deformer to every element in a duplicator or in a group that's been duplicated like this, we need to access them through the submsh deformer. So with the duplicator selected, I'm going to go to the deformers and I'm going to select the submsh deformer. So I'm going now to select the sub mesh, and this is what we have. The sub mesh is a deformer that simply selects every item in a duplicator and does the thing you've told the duplicator to do. So if we have a group of dots, what happens is the sub mesh picks the first item in the duplicator and does what you've told it to do. Then it goes again, picks the second item in the duplicator and applies the thing you've told it to apply. Then it goes to the third item in the duplicator and applies the thing you told it to apply. So with the submsh selected, we're going to go into the field color. And what are we telling the submers to do to each item? This is the Alpha field. Alpha is all about opacity. We want to say to this, let's add an oscillator. So right here, I'm going to say oscillator. And now I'm going I'm going to select the sub mesh and drag the oscillator into the Alpha channel. Now, I'm going to go into the oscillator. And if we play this, you're going to see that something is happening, but it's moving too fast. Can you see them? So what we want to do is increase, first of all, the maximum value and the minimum value as well. We don't want it to be too dark. Now as it oscillates, the lowest it can go is 21 in terms of opacity, 21%. As you can see now, it's oscillating 21-48. If I can give this maybe 70 or 80, it's going to be darker on the higher side. Like that. Now, the good thing about deformers is that you don't need to key frame them. They just happen automatically, as you can see, we've not added any keyframes, but it's animating. But the problem is, if we play this, it's happening too fast. It's blinking and it seems to be all the dots seem to be blinking at the same time. So what we want to do is add a stagger here. Now if we play that, but they're moving fast. So let's go to the frequency and say 0.1. Let's try that. Play that. Okay, it's too slow. 0.3. 0.4. Yeah, like that. We can even say 0.5. There we go. That was the only thing we were supposed to animate on the message card. The next thing we're going to do in the next lesson is animate these highlighter effects. So I'll see you shortly. 20. Animate the News Headline: Now, in this lesson, we want to see how to animate this highlighter effect. So this is the news headline. I'm going to expand that. And these were the last two shapes we drew. So I'm going to hit Enter and rename it to Highlighter per Enter, high lighter, lower so I can distinguish between the two. Now, what we want to do is select this highlighter, upper first, and I want to add an align deformer to it. And what that does is, before I add it, if I say highlighter upper and go to the size scale, we can animate these fields. We can animate the scale. But the problem is, it's going to always grow from the center, but we want it to grow from this side towards the right, the same way you would highlight a sentence. So how do you do that? We want to align this. We want to use something called an align deformer to say grow from this side or behave however you will behave from this side. So with this highlighter selected, I'm going to go into the deformers align. The align is going to be added here. So as always, I can just add this highlighter to the align. And or I can add this align to the highlighter. Now this align here, I can use it to push things left or right. Now if I push that like that and I select the highlighter itself, scaling it up or down in the X means now we're scaling from this side. What I can do now is position it right here in the X five tech skills from there, increase the scale to the end. So I want to see where I'm going to play it from. So I'm going to play that. So it's going to animate and when it gets to this point, it's going to delay for a second, then start drawing from here. So I want to place a keyframe right here on the highlighter. So scale, first of all, set a key frame. And for the scale, I want to in fact, let me use my arrow key down until it disappears. So at this point, the scale in the X is zero. Now, if I play, by that point, I wanted to have drawn the whole highlighter. So let's draw it. So from here to here, it's going to draw that. Let's see, play. Exactly. Then from here, we need to do the same to this second highlighter. I'm going to select the lower one, go to deformers align. Where is the align? I'm going to put it under the highlighter it's aligning so that I can just collapse that and expand it. But now let's select the align and push this to the very end. Now select the highlighter itself. So we need to position it here. And now we can keyframe the scale only. So keyframe the scale. Zero at that point. And then at that point, one. Exactly. So what we need to do is expand this as well. Select the hold down Control, select that, switch to graph editor, shift, scroll down, select those out. Hold down shift. Let's pull that. Hold down shift to reduce the height, zoom in. And now let's go back here and play and see what happens. It's a rap, my friend. Now the only thing remaining is sound effects. We want some background music and click sounds and all that. Let's do that in the next lesson. 21. Add Sound Effects: Now it's time to add some sound to our project. So I want to go back to our favorite website for Resources, and it's called Pixel Bay. In addition to sound effects, they also have free music. So I'm going to choose music. And you can choose whatever type of sound you want. So let's say ambient technology. Now, go ahead and choose one soundtrack here and download it. Now, one thing I like doing is looking at this. I like downloading only assets that have this content ID shield, and there is a good reason for that. If I open this on a new tab, content ID is registered. And if I say download this for free, I'm going to be able to download a license certificate. So I have the beat. So I have the instrumental and the license. If I open the license, here it is. This is the license you're going to be asked to provide inside YouTube. In case you publish your video and there is a content ID notice, you're going to be asked to prove that you have the permission to use that sound. And so this is what you're going to provide. There's a place you're going to paste. It's very simple, very easy, a few minutes time. There are many, many other instrumentals here without such without such a license, and they're completely free for you to use. The problem is, sometimes you might use this and you might not be flagged for anything. But at some point in the future, you might wake up one morning and realize there's a content ID infringement notice based on this instrumental, and there is no license anywhere to download. So you have to pull down that video or find ways to remove that section where the song is playing. So avoid using instrumentals without content ID. Let's go back to sound effects. And I want to search for we already downloaded a click Sound. We also want to download a ssh, a few ssh sounds. Like Okay, my volume is down, so let me just play this. Yeah. So look for sounds that will play as things move through out the video. Those are the things that make sound awesome. I'll be back to show you what I've been able to download. See you shortly. As you can see, I've been able to download a few sound effects and a background instrumental. So I'm just going to drag them into this folder. And now they're going to be imported as a group. If I expand it, all my sounds are in one group. So let's start with the main sound. Oh, wait. That's in a different place. Let me just double click that. Let me collapse that and double click this. So this is the song I want to use as the background track. I'm going to drag it into there. And I'm going to drag it below the background outside the background, but below. I want the boom to start right here. No, right here. Yeah, like that. Now we need a mouse click right here. In fact, we need a mouse click right here when we're giving a five star rating click. So let's just place it right there. Then Control D to duplicate it. Move it ahead. Right there, we also need right there. So let's play that. All right. Let's add a swoosh. Yeah, like that. Check this out. We can have a slower one here. Was that other soh. Take your time to make it perfect. Yeah, let's see that. We're going to regulate the volume. Don't worry. Yeah. Alright now as we drift from here to here, we need another one. Let's just duplicate this and place it right here. So right now, we're not trying to be perfect. Control D once again to finalize here. There we go. Then finally, the highlights are sound. Where is it? Is it at the beginning? Yeah. Control D. All right. Now, right here, I'm going to have to increase my speaker volume to regulate the sound for a moment. So just give me one moment. I want to balance the sound. So this translation is too loud. Negative 16. Let's say negative ten. So it should also be negative 20. Oh, it should be negative ten, negative 20, negative ten, negative 20, negative 20, probably, negative 20, and these negative 15 each. All right, let's start from the talk. Let's say negative 20 as well. See nah, I still think negative 20, negative 30. Still too loud. Yeah. So I played around with the volume of each sound, and I think I like what we have right now. It's not perfect, but it's much better. So, take your time and play around with the volume adjustment right here. Work in the negatives, most of the time because anything positive, anything close to one and above is too loud. As you can see, most of mine here are negative 20, negative 16, negative ten, negative 20, in the negative tens. So Control S. I'm going to say that, and we're now done with the sound. Now that we're done with the entire design and animation, it's time to export our video. How do we do that? Let's find out in the next lesson. See you shortly. 22. Export: Project is almost done, but we need to export it to share it with people. How do we do that? So the first thing we need to do is make sure our color space is set to at least for me, what works is color working space Rec seven oh nine. Now, if you enable this and change this to some other value here, you might not get the results you expect. First of all, just by the fact that we've enabled color management, all our colors have changed here. This was purple. Now it's blue. So I haven't played around with color management a lot in Cavalry. I've only been playing around with the software for less than a month. And so this is something I'm here to know more about. So what I found works for me is disable that. Set this No, go here and set this to Rec seven oh nine, disable that. Then go to render manager. So let's select the current composition, and we'll see all the default settings. I don't change many things here, maybe the name of the composition UI animation. And the automatic render folder is the automatically created renders folder that was created when we created the UI animation, renders. Remember that. Anything else here? Now, of course, before rendering, you can always go to the composition settings and change the frame range, but that will also change where your key frames work because your path and everything you created is based on this size of the timeline. If you expand the timeline, that means all these key frames are now not exactly where they were. They're slightly off. So anyway, let's go ahead and export or render. I think we're good. So I'm just going to hit Enter. Let's go to Format. Right now, the format is P four. That's what I'm going to export. Let's hit Render. This is actually the destination folder. We can open it. Now that it's done, let's open the destination folder, and there is our video. Let's play it and here what we have. Let me just increase the volume. Oh, it's playing on my second screen. Let me just bring it here. All right. Alright. I'm very excited to play. Let's go. Let's go. Let's begin a game, man. I love it. So there we go. I think this is a good place to end this lesson. I have a few more final thoughts and next steps that I would recommend taking. So see you in the next and final lesson. Don't go anywhere. 23. Next Steps: And that's a wrap on your first Cavalry animation. You went from a blank composition to a fully animated UI scene with a cursor that moves like a real mouse, buttons that react to clicks, hover effects, a cinematic camera drip between different cards and UI elements, a typing indicator, and a news headline with animated highlighter effects. And so I just want to say congratulations for getting this far. Now have the skills to create your own animations going forward. If you create a vibe coded or vibe engineered app or software or website, you can now promote it with nice animated videos, courtesy of Cavalry. More classes are coming soon. I plan on going deeper into data driven animations, motion graphics for YouTube, and eventually full product animation. If you want to be alerted when I drop a new class on Cavalry, make sure to follow me right here on Skillshare and stay informed. If you enjoy this class, let me know what you thought about it. What did you enjoy about it? And hopefully maybe what do you want me to cover in the next class. You might not know this, but your review is the best way to let me know how I'm performing as a Cavalry teacher, and it also helps other students know if this class can help them. So drop a review and let me know what you thought. My name is Ken, and I just want to say thank you for sticking with me from the very first lesson to the very last one. Now, go out and animate something awesome. I'll see you in the next class. Peace.