Intermediate's Guide to Creating UI Animations

1. Intro: Thank you so much for clicking on this course. I hope that you guys are well. And now we are going to an a lot of new techniques in this course. Thank you so much to all the previous students who watched my previous course and the very first course. I was expecting to reach only ten students before I released the second one. And then there were some problems and I got late. And now there are 73 students at my very first course. And I really love the response on my previous course. Thank you so much to all of you. I would highly suggest and request to all of you that if you please can leave more feedbacks at my previous course, then it will really help me. And now in this class, we're going to first look at which tools and which plugins we are going to be using in this course. Because I want to share with you guys that how we are going to be using lot of files asionally and providing services to the clients, and it's not just about learning how to create good animations. It's also about learning faster and using the time productively and building amazing risk results without wasting any time. Okay. 2. 01.Useful Plugins: So we will be using these three plugins in this course, and you can definitely have none of these and also complete this course. Without this, these are just to save you a lot of time and make your task easier. These are not going to stop you from creating the animation. These are just to help you. That's it. So first of all, we are going to be using motion tools pro. This one is completely featured, so just go ahead and download it and you can just simply install it. And you can find the ttoals of installing these on YouTube pretty simply. Okay. The next one we're going to be using is this one body movin this is the developer himself who created this plug in, is going to have to go ahead and click on this plug in and just click the railes from here. I just hit back, and then you can just download the raw file from here, and then you can solve it. It's pretty simple. And the third plug in that we will be using is overload. Now, this might seem a little bit expensive, but this is going to save a huge amount of time and believe me, it is worth every penny, actually. You can watch this tutorial as well that what does this plug in does, but we will be diving into the usage of this plug in in our course really very deeply. So I'm looking forward to catching you guys in the first class, and good luck to all of you. 3. 02.Recreating Icons & Loopable Icon Animation: Okay, so we have downloaded the plugins and they're pretty simple to install, so you can just if you have any trouble installing them, you can simply search on YouTube, and you will find that tutorials how to install them. Okay, so now we are going to create in this first class a LTI animation. So the plugins have been installed, and now we are going to look at how to create a loop able te animation icon. Okay. So we will be using a WiFi icon for this. And I've just searched WiFi icon, and now I'm just going to visit this one. I think this one is really good for our example. We can use this one as well. But I think this one will work fine. So let's just visit, and we will download the SVG vector file. Okay. So now I'm going to just open it in my folder. I'm going to open my file and do illustrator. Okay, so we have opened our file inside doble straight, and as you can see, our icon is pretty cool, okay? So now there are some problems with our design that we will figure out in a minute. But before we do that, let's just check what is the size of our artboard. It is 800 by 800 points or pixels. Okay. Now we'll be creating a 800 by 800 pixels comp, and we're going to make it ten second duration, and the frame rate is going to be 24 frames, and now we're going to name it icon. Okay. So what we are going to do is select all these layers, and what I'm trying to do is build a animation in my mind. I'm thinking that the lines draw and then they also fade away. So for this, we're going to use a much simpler trick, but we cannot use that with the fill effect applied. It can only be applied to stroke effects. And we can simply create the animation with these shapes as well in after effects, but it won't be lty compatible. As we learned in the fundamentals class, the vagueness class that there are certain restrictions to difies, so that is why we're going to just lock these shapes, and now we're going to create a new layer. Okay, now what we are going to do is create a circle, and I'm going to make it a stroke. I'm going to change the color to red, and I'm going to retrace this design as close to what I can. I'm going to delete the rest of the anchor points. And now we have a simple shape. Okay. So what we're going to do now is go ahead into the properties and increase the stroke point. Okay. That looks pretty good, and we'll just round of that to 80. Now we'll make the gaps round. Okay. So now we will adjust this a little bit. And that's it. We'll take it back a little bit. Okay. Perfect. So now we are going to just duplicate this layer, select it Alt drag it, and now we are going to just add just our anchor points. Now, as you can see, this shape is not working quite well. So in this type of situations, we we can simply to tulate this one and create another circle. We'll make the stroke again to one point so that we can create a good reference. Now I'm going to just eye drop the other stroke, and that will increase the size of our stroke as well. Let's just make some more few adjustments. And we are good to go. Okay. So now about the circle, we really use a simple circle, right here. We're going to make it a fill. And now we're going to make it bigger. Okay, so now our design is done. Now what I'm going to do is go ahead and completely disappear the first layer run of its visibility, and now we're going to change this one's color to black. Now, for that I'm going to do is I'm not going to select the fill one. We will select the circles and the strokes, and I'm going to just make them black black. Now we will make this one also black. Now our design is ready, and now we're going to start the animation process. Select all these layers. Now, what overload does is once you have install the overload, what you can do is you're just going to go into windows and into extensions, and then you're going to select it Overload, and then this window will appear, open up. So this is a dockable panel, which you can dock anywhere you like. Now what you're going to do is select all these layers. There are multiple features inside overload, but we will be only focusing on this one mostly, or you can just select this one as well. It will make the anchor points center of the selected layers. Now, what this is going to do is going to blow your mind. We're just going to click this button and viola. The icon and the icon layers are now inside ab after effect and it didn't waste our time, and it saved us a lot of time, okay? Because all layers are here and now they are a lot of compatible because they are star and shapeless. Actually, I clicked twice by mistake, so I'm just going to click one time. Now you can see there are four layers here. So now you're going to label our layer to make better understanding. Because when you're working with complex files, you're going to have a difficult time. That is why for strokes, we are going to be going with a label color of orange. For fil, we are going to be using a brown color. You can use whatever you like. So you're going to do ahead is we will be using this motion tools. Okay. So what we're going to do is create a anual. Now, what does All object does is? It basically is for simple parenting properties, and we will be using it for that purpose only in this case. Okay. So now what we are going to do is create start building our animation. What I was thinking is that these lines are going to draw from left to right, and then these will appear from right to left. So let me just show you what I mean by that. What we're going to do is add a prim path, and I'm going to start the animation creation like this. We're going to animate the end, like this, as you can see. This is how it draws itself. Now, once it's drawn, I want this to disappear as well like this. It's pretty simple. We're going to hit F nine on our keyboard, and now we're going to apply some easy. Okay. So I second this one and we're going to make this one way and we're going to apply the influence over the other side. So now, this will start at second one and exit at second three. Okay. So this is how it looks. Pretty cool, right? Okay, so what we're going to do is simply go ahead and copy the screen path because we want the same animation on the other layers as well. We're going to copy it and we're going to select the other two layers, and we're going to control. Keep in mind that you should be at the zero and starting point of your comp to make the frames align with other layers as well, because if you go ahead and paste the cream path animation here, then it will start from here. Okay, so keep in mind that. So now we are going to paste this overhre. As you can see, our animation is almost done, we're going to add some more details to it. Okay. What we're going to do ahead is that we will select this circle. We're going to go ahead and animate its scale property. And I'm going to just make it zero. And I'm just going to apply the easing as well. Okay. So what I'm going to do now is I want to play the same animation on this side as well. But with the help of this free plug and what we can do is just select these two key frames, and then we're going to phi if you hover over the button, it will tell you all the functionalities of the button. As you can see, it says, Shift click reverse the animation. What does that mean? I'm holding my shift right now, and I'm going to fight it. So it added two key frames again. But now it has created the reverse dynamon of the same scaling. So it's basically reflection of those key frames in the opposite direction. Right? So now this is a perfect lopable animation. Now, what does a perfect lopable animation means, actually? A perfect lopable animation means that the first frame of our animation should be aligned and equal to the last frame of our animation. That is how we decide and come to the conclusion that it is a perfect lopable animation. In our case, that is an empty frame. Okay. So now what we are going to do is we will be adding some cling between layers, y. Now, how we are going to do that by using this plug in, what we're going to do is now this button decides the selection order in which it will apply the sequencing to the las. Okay. So an offset means that how many frames you want to offset. And a step means that how many steps should be involved in the first offset. Okay. So in our case, we want to offset each layer, one frame, and we will keep the step one because we don't want to add much more steps between the layers because these are only three layers. We can add more steps when we are dealing with more complex or more. Bigger project file sizes which have more layers so that we can add the easing and overflow or overshooting using without over complicating things and keeping it simple. Okay. So now what we are going to do is click the sequence button, and as you can see it has added, let me just show. As you can see, there is one one key frame difference on each layer. Now, let's just go ahead and play it and see how it looks. Okay, so this is how it looks. Okay. But there is a problem. I think the first layer should appear first, and then this one and then this one. So I'm going to just control Zs, and I'm just going to change the order of the sequencing. Now, let's just go ahead and play. See, I think this one looks much better. Now what we're going to do is we're going to reverse this animation. So what we are going to do is we're going to change the selective order, and we're going to hit sequence. Now we're going to align the final key frame back into the workson area. And this is how our animation looks right now. So. As you can see, This is how our animation looks. The first layer appears in the first place, and it fades away in the very last. Okay. So what we're going to do is now create some position ge framing as well, because I want to show the connectivity of WiFi connecting, right? So what we're going to do now is create free position gay frames, and we'll go ahead and press shift and arroks to make them move in the upward direction. Now I'm going to go ahead and I'm not going to just copy and paste e k now. I'm going to just select all these three and hit clone. I'm not hitting Shift clone because we are not reversing any frames. We just want the same keyframes here. Okay, and our animation is now created. Let's apply some easing now. Here's how it looks. Okay, let's just add just some things now. Okay. So now I want to do the same thing. I want to apply offset to this. So the first layer will push the upper layers. So this one will be first, and this one will be second and this one will be third. Let's go ahead and add the sequencing again. Let's see how its Thatsn break down. Okay. So now what I want to do I want to show the influence of circle impacting the layers. So I'm just going to go ahead and take this animation a little bit ahead. Okay, so maybe ten frames. Yeah. I think that will be enough. Now what we are going to do is add a scaling key frame and one, two, three, four, five, six, seven, eight, nine, ten, and I'm going to make it 110. Okay. So now we're going to apply some easing over it. No. Okay. So as you can see, this doesn't look right because the animation starts appearing here, but the impact is very delayed, right? So this is not working. We have to add just the timing of our animation and match it. So it will be better if it starts at the same time, see? That looks much better. And now we're going to clone the key frames as well. We will just take this animation back to where it was. Ten keyframes. I'm going to select all these keyframes and this one as well. And we'll bring them back here. Now what I'm going to do is go to the very last keyframe. I'm going to select these two keyframes. I'm going to c shift them. The other key frame is also replaced by this one. Let's see how this looks first. Okay. Okay, so now there's some problem with the easing, I think? No, it's perfect. Okay. So now, what happens is that the layers drop. But the easing goes delayed. The easing should be on this side of the animation. I'm going to hit F nine, and now this is how it looks. Let's see how it looks. Okay, so it is more delayed. Now, why is this happening because the key frames are ahead of the last key frame. Let's bring them back. We're going to take this one, and we're going to bring it back over here. As this fall. Now, let's just check the easing on these can. As you can see the easing is here, right? So we're going to bring this over here. See, that's more impactful. Yeah, that makes more sense. And then this has to go away. Okay. So we're going to save this one, and as you can see, there is no easing on this part. So we're going to apply the easing. This is how it should be. So now our animation starts like this. See. Okay, so what we can do is now, if you want to, and this is a very subjective choice, and if you like it, you can do it or if you don't, then it's up to you completely. I'm going to add a scaling animation to the parented null object as well because I want the icon to appear from the center of the comp from here and scale up. Okay. So let's see how that looks. I've parented all other ways, and as you can see, we're just going to cron everything again. I'm using the same technique that I used on the circle. So I'm going to crone it and let's see how it looks. Here's how animation looks. And you can provide these type of services to many clients because there's a huge demand of icon animations. And on all types of freelance platforms, there are clients asking for such animations. That is why I just wanted to show you how to create these animations without wasting any time and using these plug ins, you can save a lot of yourself a lot of time. So let's just move to the next tab. 4. 03.Creating Character Animation & Illustration Animation: Okay, so before we start our next exercise, what I wanted to show you is a relevant example in our past class as well. I created this loader animation for a client, okay? So the meaning of showing you is that there are multiple approaches to the same design or same animation as well. This animation was supposed to be a loader animation. Now, what does a loader animation means. Now, this is also a perfect loopable animation. The client basically wanted this animation to be displayed while their website was loading. Now, there is a slight explanation behind that, which is the client basically needed this animation for one purpose. The purpose was when the website is loading on the back end, as you might guys know, that there is some back end data, right? So the website is loading that data. Now, depending on the user's Internet connection as well or their PC capabilities. Or their mobile. Well, most of it is this Internet data connection based speed. But let's just say that if the device works slower than the other, then the website might take a few more seconds to load, right? So I cannot offer the client a logo animation or an animation which will just display and stay on the screen like this other example that I want to show you guys, okay? Because as you see. Now, this also looks good. There's no problem in using such animations as well. But for a loading page, it is better to use these type of animations which have same ending and same starting point. In this way, let's just say that user opens the website and the website lowers within 5 seconds. And another user which has a low capability device lowers the website in 10 seconds. During the 10 seconds, this animation will keep loading again and again and so will this one as well. But I think this will look better in much ways, and there's a reason behind it because this is continuously loading, right? It gives the feeling that the page is loading itself and it is refreshing the page. And this type of animation works better for logo animation purposes that the logo animates and it stays on the screen. Okay. So that is why this is another example that client requested something very similar to what I just created in the previous class. So now I'm going to go ahead into free pick and now we're going to be animating a artw character animation design. So I'm just going to go ahead and select vectors now, and I'm going to go for maybe something like a character of who is in depression's just say let's just try and find something. Okay. Let's just find press woman. Aye. These are quite flat ones. Thinking a little bit of more detail actually. Let's just go above and try to. This one is one doesn't have facial features. I want to animate something with facial features actually. Let's see what this shows us. Not quite actually. No, no, no, no, no, no. I'm looking for? Going to go back and go to keep scrawling until I find something relevant. Let's go ahead on the next page. Going to add the free filter as well. Okay. Depression. In, let's see. How does that look? No. These ones are happy. I'm just going to find something more relevant. She's happy where there's a particular type I think that I'm looking for. And that is from Stories, I think I think Yeah. This type of character design, I think will our work. What is the creator's name? This is fine that. Story set. Okay. I think this guy got what I need. Okay. Okay. Okay. These ones are really, really good. Okay, we're going to use one of these. Oh, this one is quite nice. Yeah. Yeah. This is a really good example, I think. We use this one. Yeah. Okay. This is where I do this. Okay. Okay, so this is the download file. Now, I'm just going to go and create a new artwork size. This is going to be 1,000 by 1,000 points. And now going to select all of these layers, and I'm just going to copy and bat this here. I'm just going to increase the size of this one because when we zoom in inside aftert we won't be able to see the sharp details because after effect is based on pixels. So we won't be able to see what are we actually animating. And before we start importing the artwork, it is important that we ngroup a lot of these groups because if there are too many groups, then overload doesn't work really well. So please keep that in mind while you are animating your stuff. Okay. I'm going to strike all of this, and I'm just going to go into After fats and create a composition of ten 80 by ten 80. We'll call it depression. Girl. I'm going to just hit this button. And let's just see what happens. Okay. Okay, so there's a bit of a problem with the shoe layer, and there are also some elements which have some issues. Now we're going to fix those, and then we're going to head back in here. Okay, we'll select all of this, and we're going to delete it. Now let's go ahead and fix the shoe error. We're going to ngrop the shoe again. Okay, so this is the issue that was being shown there. Okay? So we're going to just ngrop it until there is no group. Okay, now this looks good. Yes, this looks good. Okay. We're going to select all of this again and now we're going to hit the button again. Okay, as you can see our artwork is here. We're going to make it full. Okay. It's really amazing, right? What overload can do, as you can see, it's really amazing. Okay. So now what we're going to do is before we dive into the animation process, we need to labelze the grouping of the layers. Okay. Now, I'm going to divide the elements into some parts, and I'm just going to label these into colors. So we can know within a second which part is this layer of the illustration. Okay? So the clouds are where I'm going to go with them with a brown color, and it's going to turn them off, so I can see if there is something which got non selected. I'm just going to make this brown as well. I'm just going to turn it off. Okay. Now we're going to go for the rained going to make this all dark green, I just turn this off. I just going to select these as well. Okay. So there are some raindrops left, but let's just do our character coloring first. I'm going to go for the orange with this one. Okay, so I'm going to slap the remaining raindrops now. Okay. So You're for. Okay, so now for these bushes, I'm going to go with a peach color. Okay? So I'm going to just to of those, and I'm just going to select these two rain drops, the last one, and I'm just going to make them dark green as well. And now, this one, I think is a part of bodies, I'm just going to make it orange. Okay, and this layer will be just locked. That's it. Now what we're going to do is go ahead and break animation down into pieces. So I'm just going to select all the orange players. I'm just going to turn on its visibility. Now we're going to create the animation of our character. I'm thinking of a loop of 6 seconds in my terms. Okay. So it depends on the type of animation that you're going for. I think 6 seconds will be perfect for what I'm thinking of animating for this woman. Okay. So let's just go ahead and start with the arm. Okay. So for the arm, I'm just going to go ahead and bring the anchor point over here. Okay. So because the arm is not divided into two layers, it's just one single layer. So I think it will be better if we move the anchor point over here. Let's just start rotating it and see how it looks. Okay. I'm just going to bring it over here. And let's just zero. Okay. I'm going to hit zero, I think it looks good. Okay. I'm going to create the first key frame now, and go ahead and create the first key frame here because I want to create a seamless loop animation for this woman. I'm just going to go ahead and make it minus three, and now it will do the counter animation as well in the opposite direction will be four. So let's see how it looks. Okay so the woman is very right. Okay, now we're going to go ahead and animate her neck. This is the main layer of the neck. I'm just going to go ahead and make this one right here. Now there will be some layers which we will need to name actually. I'm just going to make it a neck. I'm going to just remember the layer number as well, is 41. Okay. So we're going to need to parent everything above this layer, the entire head to this layer, so that when we rotate the neck, everything works with it. Let's just go ahead and see if we were successful Okay, but we're not successful. There are some layers which are not parented right now. This is the back layer. I just go ahead and parent that one as well, and this outer layer of hair as well. We're going to parent that? I'm just try and check. I think it's pretty cool. Okay, we're good now. I'm just going to create a key frame on the neck and it's going to go ahead and create. Three frames, three degrees mission here is going to make minus four over here. Because I want the woman to feel like that she's touching her head at this moment. Oh, my what just happened, right? And then just go in the direction as well. Right? So basically, the head moves in the opposite direction of the arm. That's exactly what's happening right now. So the arm moves in the other direction and the head moves in the opposite direction, right? Okay. So now what we are going to do is going to the band of the other woman stays on the right place, right? Be I mean, obviously, we can't move the band because it'll look weird, right? Okay. Because there's not too much moment in the head. Maybe we can add a slight animation on the hairs as well. So I'm just going to bring the anchor point around between the face, because the hairs are connected to the head. So We go to create a frame of maybe two degrees only two is too much. It's breaking the lay. I'm just going to do it one degree, and in the other direction, I'm going to do it minus two. Okay, so let's see how it looks. Okay. So it's lagging a little bit. Okay. So I think it looks pretty good. Yeah. It's not too much. Yeah, I think it looks good. Okay. So now we're going to do is we're going to create the animation on the eyes, right? Because the character is alive. So obviously, the chacor must be blinking. So we are going to animate these cute tears as well. So I'm going to make this one as well. I'm going to save the class as well. This is going to be course class three going to be class three. Okay. So, I'm just going to bring this one anchor point as well here. I can now use the secondary elements as well to color them as well because it will help me identify where are the facial features because there are too many orange layers on the character. The shot is also orange, and the hairs are also orange. So how do I identify where are the facial features. So that's why I didn't use these colors in the labeling of other colors, because I will be using them now. Okay. So for this arm, this is the main arm, so I'm just going to leave it to orange right now because the arm is currently animated, so we're going to just lock it. And I mean, I'm going to now focus on the facial features. Okay. So this band is also interrupting our animation process. So we're just going to lock the layers that are animated right now. And I'm just going to focus on the face layers for now. Okay. So this is the front layer of the hair, so I'm just going to lock this one as well. Okay, we can apply a little bit of animation on here as well. That maybe the hairs are spreading as well a little bit. So I'm just going to bring the anchor point above, and I'm just going to add scaling animation. Right ahead. So these kind of little details actually give the value to, you know, the correct animation to to the next level. And just because of these little details, my animations have been downloaded over thousands of times. So you have to keep in mind of these little details actually. Okay. So let's see how it looks. See, it's very subtle. It's really, very subtle. Okay. So let's make it one one. I think it's a little bit too much. Yeah. Yeah, this looks good, I think. Okay. Yeah, it seems like the hairs are also moving with the woman's head. So we're going to do is we're going to animate the eyebrows, okay? Because the woman is worried too. So we're just going to make them purple, and I'm just going to animate the position keyframes. I'm just going to create two key frames. And as the head moves forward, I'm just going to shift. Create the arrow case here, right? And we have to keep in the perspective of the face right. So I think this looks right. See? The eyebrows are coming in that downward direction. And now I'm just going to set these two and just going to hit C. So these are back at where they were. Now they are going to go in the upper direction a little bit. Okay. So let's see how it looks. Okay, so this is how it looks. Now, we made the size 1,000 pixels by 1,000 pixels, it still is vari, right? And we are rendering it at full. If we were doing it at quarter, oh, my God, we can't even animate it, right? So this is very important, while keeping in mind. Also, keep in mind that when the listed file is here, If we scale it up, it will not affect our lot file size because lot file size is basically working on the basis of vector animation. So increasing the scaling or size of animation, won't do anything. Another tip that you can do is let's just say that maybe client provided a specific size for it, right? So you can't scale it up. So what you can do is bring in the design and then arrange it. And then what you can do is select all these layers. You're going to select all these layers. You're going to press control, A, you're going to control C. What you're going to do is create a new comp, and you're going to lock the aspect ratio. Now you're going to do is multiply this comp size by four. Now what you're going to do is paste all these layers into this new comp. As you can see, these are all here. And now, what you're going to do is you're going to create a new null object. Now you're going to bring it over here in the center, in the center of the character, and now select all of these layers, and you're going to do is you're going to parent it, and then make this null 400. Okay. And then you are going to just line it, right? This what you can do is you can zoom in really well C. This looks much better. But obviously, this will slow down the render process when you are previewing the iniciency. It slows down a lot. So that's why don't go too far with the resolution because then when your artwork is animated, you can just let everything and then go back into the Same comp, paste everything here, delete this one, paste everything here, and bring the scale back down to 100. Okay, so you can give this mind as well. Okay, so let's continue our animation. Okay, so we have added this one and now we need some animation on the eyes as well. Okay. So because the woman is alive, it's most likely that she will be blinking her eyes as well. Now, because the characor is facing downwards, right, and the character's eyes must be like the eyes actually blink in perpendicular, right. So basically, we can't just make this parallel like on the 90 degrees. So we have to keep in mind that we have to keep in mind the perspective of the illustration as well. So I'm not just going to place the anchor point here because it will suit better here because the caracor is looking downwards this way. So, we're going to go ahead and one, two, three, four, five. And now I'm going to create again, this key frame, and it's going to go two frames back, and it's going to make it one 80, and 20. This is the easiest way by the way to create a blink animation. Okay. As you can see now, this is how it looks. Okay, so I'm just going to copy this animation, and I'm just going to paste it into this other eye. I'm going to select this one, and I'm just going to make the anchor point over here as well, and I'm just going to paste it. And here's how it looks. Okay. So without proceeding further in the animation, I selected the wrong layer. This is the right one. Without going ahead, I'm just going to create the repeating of blinking animation here. First of all, so we are done with the blinking animation. Okay. So now about the TS animation. We're going to work on that. It's going to go ahead and make this all purple, and we will be making this one. Here as well. Okay. So as you know, that we are going to be creating a loople animation, right? So it is better to think of the end of this animation as well, do you want the tears to be in the scene or not? Okay? So I think that there won't be any tears in the end of the first key frame because we want to show the feeling that the person is crying and the tears fade away, right? That's what I'm saying, actually. So I'm just going to go ahead and create a scaling animation. On it and it's going to make it zero. Okay, like this one. I'm just going to create a position frame right here. I'm going to bring it back to here. Okay. So now we are going to have some trouble because we animate the scale first. So let's animate the position. Okay, I'm just going to bring it back to here. Now, just to make it let's see how it looks. Okay. So this looks kind of fake right now. We're going to fix that maybe. Okay. So as this comes here, this scales up and the position stops. We don't want the position to stop, I think, because the T should be wiping off the face, and there should be too much movement here. Okay, I'm just going to go ahead and make it in my pad. Okay. I'm just going to do this car with the animation. Okay you're going to be using like this. I'm going to actually this is selecting the anchor point, so I'm just going to make it go back, first of all. Okay and then just going to select this handle and make it like this. Okay, let's watch how this looks now. Okay. So the character is crying, and I think that we're going to just make it fade away with the opacity. Before it stops, right? B because the tear is falling and it is fading away as it falls. I see outs. Okay. This looks quite real. Much more real. Yeah, right? Because we have to keep in mind that this is an idealized world, right? So everything won't be working as same as we think or we want to or let's just say that we're not going to be able to animate this as an actual person cries, and the tears fall off their face. Okay. So Because it is going to be a small chair, right? So we can't just really focus too much on creating a eye drop. Okay. So, now, what I'm going to do with this one is, I'm just thinking that she cries and this one falls off here and fades away right here. Okay. So let's just start from the eye. Okay. We're going to animate this one here and I'm going to keep it as a reference. We will bring up the key fames on the other layer. Okay. So what I'm going to do is now copy the scale keyframes. I'm just going to paste them here. And we will just displace this a little bit. I'm just going to add the pasty key frames as well, and place them, and we will be scrating the position animation as well around here. P for position. Going to go back in time and pret a keyframe, go ahead and bring it down down down down down. Way down, let's see how it looks. Okay. Okay. So the scaling animation happens way later. So we want this to happen earlier. Okay. Okay, this starts fading away too late, I think, because it looks fake to me. This seems more of This is emphasizing the emotion more, I think. Yeah. Also, the position is quite slow. We'll just ease it up a little bit and going to go in a spear graph. Height is equal to speed, by the way, if you're not familiar how to animate the speed. So we're going to start with high speed. Okay. So this is Tom, I think. Yeah, we're just going to do this. Okay. So the third drop. Now, let's just do that really quickly. Okay. Okay, so the animation is created, but there is a problem. I think it will look better if it happens after the blink of the eye. Okay. So I'm just going to make these layers. Move ahead here. And when the animation cuts off or let's say after the last fat down the layers. I'm using control shift D to cut down the layers. Okay. So this is how it. Okay. Let's start. Okay. So the woman is worried, right? She's super depressed. Okay. So now what we're going to do is we're going to just copy and paste the layer as well. We're going to do is we're going to control D, we're going to make them up here, we're going to put them here. Okay. So we can just open this layers and see if the animation is completed or not. Okay. So this one is not completed the as drop. Okay, so I'm just going to make this one a little bit, see how this looks. Okay. So as the crack blinks, the animation starts falling. Okay. Yeah. So, this looks okay. Okay. Yeah. And this other one, Okay. This one should start around here, I think. Okay. So you can add a bit of variety in the animation because I mean, the one were here at the same time, so it's not really important that they should be the same in the other one as well. So you can definitely tweak this as you like as well. Okay, because there are no certain rules about it, you just have to be experimental with your thoughts and your process. Okay. So this is not a perfect loop. By the way, we're going to fix that laser, okay? We'll just hit cron in the end, and we will be recreating all the first key frames to the end ones. So we are just thinking smart right now. Okay. So let's just go ahead and animate the mouth as well now? Because the mouth must be moving a little bit as well. So go ahead and create a key frame. On the position, we're just going to bring bring the face down a little bit. And what I'm thinking is that the character might not lift up the mouth really much. So maybe just it just barely goes back to the previous position. Okay. So maybe like this, I see. Okay. So I think the moment is too much, so I'm just going to make it less. These are going to me in a little bit, and I'm just going to make it less. Okay, so this is the center point, I think. Yes, this is our starting point. So it moves a lot about, so I'm just going to bring it back around here. Yeah. See how it looks. Okay. That looks good. That looks good. Yeah. That looks much better. Okay, now we're going to animate the bras. Okay. And you're going to create position grave frames on the s as well. Going to create one, one, two, and it's going to bring them down over here. Okay, and we'll just lift them up. I'm going to these ones, and I'm going to bring them up. Okay. Yeah, around here. I think this red. Okay. So let's just watch it. Okay. This is lagging quite now. So I swatch it. Okay. Yeah. I think this looks perfect. And it also matches with the upper eyebrows animation as well. So yeah, I think this looks good. Okay. So you're going to do is we're going to animate this arm a little bit as well. Right. So what I'm thinking is that, first of all, if we separate the arm from the upper arm, as you can see, there's no overlapping between the arm, right? So we're going to have a little bit of issue here. What we can do now is we're going to just bring it over here and we're going to experiment it. See, if I rotate the arm, we're having some issues. Let's just hit control Z and it's going to click over here, and let's just see which layer is above. Okay, so this layer, the upper arm is below the actual low arm. That shouldn't be the case, right? So we should bring this one below, and now I'm just going to go ahead into the path, and I'm just going to make the path go beneath the upper arm. That way we will have some overlapping as well, and we will be able to create animation as well. I'm just going to adjust the path a little bit as well so that we can work with some we have some room to work with. Okay. So I'm just going to go ahead and create a rotation yt now going to put the anchor point right, It's going to hit rotation now. And as you can see, we can animate it quite a bit now. Okay. Now, I'm just going to create a rotation frame. I'm just going to go ahead and create Yes, true, right? Okay. So as you can see, this one right here, where is this layer. This is right here. Now we're going to have to go back to zero and pair to this layer. So that it moves with the arm. Okay. So I think this is too much because as you can see over here, it looks kind of way, right, because at this point, the arm is on top of legs, right? So it looks natural. Like there is a feeling that the hand is behind the pants, right? But now when this happens, it doesn't look that way. So we are going to have to cover that as well. We're going to go into the paths, and I'm just going to go ahead and find this path real quickly. We're just going to find this one. Okay. Where is this one? Let's find out. Okay. Here is this one. Okay. I'm just going to give her and create a keyframe. I'm going to come up here and going to select this one. I'm just going to bring it back over here and over here from here. So yeah. I think this should look fine. Let see. It looks pretty good, right? Okay, there is a slight pixel abravation issue, I think. So we'll just have to add this a little bit over here. It seems that the hand is behind there and it is moving. See, keep in mind that this small detail g a huge difference. Okay Okay. Now, what we're going to do is that we're going to go ahead and animate in the wverse direction. First of all, we have to get back to the top of the layer, p, and we're going to create two keyframes here. Okay. So it was plus two, we're going to go for a minus three maybe. So now the hands need to come out of there. So we'll just have to copy the first key frame. Past it over here, going to drag this one down around here, and this here. Okay. So let's play this one as well. See? It looks seamless, right? It looks absolutely perfect. There's no issue with it now. Okay, this looks okay. And what we're going to do is. Most of our crack animation is done. What we can do to emphasize even more the animation is that we're going to animate this as well. Might cause some issue, but let's just experiment with it as well. This layer is the lower arm, and this is the right lower arm. So when you're rigging, you just have to name the layers in this share. R means right. We'll add the under slash, and now we're going to name it lower arm. So this is r means low. Now you're going to present it to the I think. Yeah, this is the m and now we're going to call it upper arm. So now we're going to go ahead and animate it just a little bit. Okay. Okay You can experiment with this as well. It will be better to go with the same direction, but you can go in the counter intuitive direction as well. As you can see, I made a mistake. I didn't add the key frame. So let's add the keyframe. Go back. Going to add one only. As you can see, it broke the other animation. So it would have been better if we created this in the first place, but let's do it for now, and we're going to fix it as well. I'm going to just do minus two over here. And now we can just fix the path animation as well here. I'm going to hit path make the path, move backwards. Okay. Okay. Now, this looks more reasonable, I think. Now we're going to make this come forward even more. There's some white line. We just fix that as well. Let's see how it looks now. Okay, the arm looks perfect. So yeah, this looks perfect. I think this animation looks quite huge at this point. I'm just going to go ahead and animate the lower less, and fix the path as well. Okay, so we are perfect now. All right. Now, what we're going to do is we're going to check over animation till this point. Is this looking great or not? Okay. Okay, this is looking perfect. We're going to go ahead and go to the six second, and now I'm going to unlock all the locked layers. And we're going to be now checking if we left any layer or not. No, we didn't. Okay. So what we're going to do now is we're going to select all of these layers. To make the loop work perfectly. What we're going to do now is we're going to select all of these orange and purple layers because purper are also character lay. Keep that in mind as well. Now, what we're going to do is hit on our keyboard, and now let's just go through all of our layers. As you know that the purple layers are these ones are looped, right? So we just need to focus on the first key frames on everything. Okay. So what we're going to do now is, okay, so there's no layer below. We're going to come to the last one, and now we're going to select this one and go in the upper direction. Okay. All of these are selected. Now we're going to hit clone. And that's it. That's it. Let's check. See, it looks perfect, right? It looks perfect. Okay. So are you going to do now is we're going to select all of these layers. Okay, wait. What we can do is go ahead and lock these layers. Okay. We're going to lock these ones. Now, all of these layers need easing applied. Okay? So you're going to do now we're going to select all of these and F nine on our keyboard. Now, if you need some really customized easing, then you can obviously go ahead and apply easing inside here as well. But I don't really recommend it because if you're uploading it on a profile because I think more easing works pretty fine, in my opinion, but obviously you can go ahead and apply more easing and add the art work easing as you like. Okay, so this is what we have established so far. Okay, so let's go ahead and now animate the rest of the stuff. Okay. We're going to do. Now what we're going to do is we're going to shy these layers. We're going to turn off the purple ones. These ones as well. And now, what I'm going to do is lock these ones. I'm going to select the purple ones, and I'm also going to lock these ones as well. Okay. So now what we're going to do is we got the rid of correct animation, right? You never seen. Perfect. So now what we're going to do is we're going to work on the cloves. Okay, so what I'm thinking about the cloud animation is that I'm just going to first before I animate that. I'm just going to select these two, and I'm going to hit Merge. What this will do is make these one layer, and don't worry. This will still stay ty compatible. I have tested it, so you don't have to worry about it. Okay. So what are you going to do is work on the clouds. First of all, I'm just going to select all of them and I'm just going to bring them over here. So all clouds are here now. In the layer order, press P on our keyboard, hit the position keyframe. And in order to work in a rhythm, the animation is to bind together in everything. So I recommend that you stick to same time stamps in your animation for all the elements, because that way, it looks like everything is working in synchronization with each other. Unless your element is doing something very different from the rest of the scene. So what you're going to do now is The claws are going to move a little bit here and in the opposite direction, then a little bit. In terms of this one, I think that this one will go away and fade away. This keyframe is going to be going here, and this will just fade away, I think. We'll just add the plastics later. What are we going to do for this one T one will collide into this one and this one will collide into this one and this one will come over here and this one will come over here as well, this one will come over here a little bit more, and then the will move in other direction So yeah, let's just do that now. Okay. So this one will go over here. This one will move as well, right here. Okay, so this one will move as well. And this one will move in this direction because you can also you can also be a little bit more randomized with elements because as you know, the weather is disrupting. So it is not necessary that the cloud move in a linear or in a pattern, all of them. So you can make a variety of changes in these type of animations. Okay. So what you're going to do is let all of this now and gonna hit clone. Okay. And I'm just going to go ahead and hit easing. Okay. Let's see how this looks. Okay. Okay, now this moves here. Okay. I want to see the motion parts on every one of them. I'm just going to step all of them. Okay, so this move in this direction. And then in this direction. Okay, so this one moves a lot, I think. It going to make it move so I think this doesn't look real, actually. So this will move. And These are lag a little and then come. Yeah. This is perfectly fine. Now, this one, what does this one? Okay. This one is not animating? I think because the key frame was cloned actually. I'm just going to go ahead and create the plastic keyframe over here. This one will fade away within a second, I think. This won't be on the screen and it will appear. So I'll just appear like this. This one is going to appear, and then just we just fade away at the fifth second and fade away. And I'm just going to shift click over here, and as you can see. Okay. Okay, so there's a bit of a problem. What is that? Now, the cloud seems to stop down because of the easing? So I don't think this easing really works on this cloud. So I'm just going to make it linear. Okay. I think this will work more better for this crowd. You have to keep these details in mind. Some of you might be thinking that I'm a maniac. I'm putting too much detail into every element. Yes, I do, and that is why I think my animations do actually look good. Not a flex, I think. I do believe that it is true to some extent. So yeah, this is the reason. I think small details do matter, actually. So let's just go ahead and our cloths are done. So let's go ahead and turn these ones off as well. We might need this actually, because we're going to animate the rain on the basis of this, so I'm just going to lock this right now. Now we're going to animate the rain. Okay. So what are we going to do with the rain? Okay, so this is the rain. Now what is it going to do now? Okay. So what I'm thinking in terms of raining is that first of all, we will animate one grain, so we can see how does that work? Okay. So we'll make the animation scaling, right? Because I want to emphasize that as the drop falls in towards the ground, it gets a little bit longer. So yeah. And the animation start with capacity difference between the rain drops. Okay. So what are we going to do now is, I'm just going to go ahead and create a scaling animation on the rain drop. And what are we going to do is going to make it lets 120. Okay. And this is just going to speed up in ten key frames. I'll just go back a little bit. And, so this gets a little bit longer. Okay. So I'm just going to go ahead and add that position keyframe and hit you and bring it along here. And this one will go back into the sky and bring it back to the ground. Okay. So like this. Okay. And as this comes back to the ground, is just going to fade away like this. Okay. So is out looks, see? Y interesting, right? Yeah, it looks good. Okay. So I think the rain is a little bit slower at the moment. Sped it up a little bit. Okay. Okay. So if you know how gravity works, it basically works, it starts slower and it gains speed over time. Basically, the rain is falling due to gravity, so I'm going to try to apply that to our animation as well. And how we're going to do that is that height is equal to speed right. The animation is going to start with low speed and going to increase the speed over time like this. Let's see how it looks. See? That looks more realistic. Now, what I might work better if the position ran a little bit more, right? Yeah. As you can see the rain fades away around there. Okay. So you're going to take the tcation a little bit further as well. Way back. Okay. So this looks. Now, I think speed is too much of a rush. It seems like a bullet is coming at the cro. Yeah, this looks more real. Okay. So what are we going to do now is, 5. 04.Animation for clients & Animating Texts: Hello, everyone. Welcome back to the course. Okay. So in this class, I'm going to share an example of a work that I created for your client. Okay? So in this example, you must have seen that there has been a lot of AI stuff going on in the world, right, and people need animations for their AI models, okay, in which they want to convey to the customers that what their AI model can do actually. Okay. So there has been multiple requests, and I've completed multiple orders related to this stuff and multiple projects related to this stuff particularly. So I just wanted to add this in the course as well. And I also show you some examples of how we can use lotifies in these matters. This red shape is basically here just to cover the log of the client because I want to respect their privacy as well. Okay. So what actually happens. Let's go This is our main comp. Okay. So I'll just go into the chat PC comp. As you can see, this is also named as Chat PC means it's a precomp. And inside this precomp, there are multiple layers. Let's just go through our file now. Okay. So first of all, what does happen here is that this chat bubble appears. Okay, so let's go ahead and check that. That's pretty simple as you saw in the previous class, we have animated complex scene. So This is not really a huge thing. As you can see, this is just scale animation, and I've just sequenced the layers using this plug in hair motion rules, okay. So it's basically conning that the chat board is thinking or typing. And the same animation is created for the user and chat board both. Okay. So when you're creating these type of animations, you have to keep a few things in mind. First of all, there's always a feeling that keep that in mind that All the AI stuff that's happening or going around. There's one common thing between that, which is that the AI is going to save your time. Okay? So the animation shouldn't be really very long, or it shouldn't take a lot of time to, you know, showcase the abilities of what the AI can do, actually. So that is why you might think that the animation is animating too quickly, but this animation will be applying on a website. So this will be loading again and again and again. And if someone is really interested in reading the text all of it, then they can just rewatch it because the animation will reload itself and start playing again on the website. So, so we just want to make this look appealing when we're creating these type of animations. The solo purpose is not to animate every letter one by one. So we don't want to make the animation very long and letter by letter because The user might get less interested in watching the entire animation and might scroll down on the website page. Okay? So let's just say, as you can see, this is the bubble animation. And I've just added opacity frames on it. It starts with opacity and fades away, and just text bubble pops up. Okay. Let's just go ahead and check that. Okay. So here's a scaling animation. And on top of that, what happens after that is there's a bit of an overshoot on the bubble. And after that, what actually happens is that the person is asking to AI that I would like to remodel my house, okay. So as you can see that's solo this layer for now. As you can see, this is a text layer. And now we're going to see that what is actually inside the layer, what is actually animated. As you can see, only the opacity is animated, and there is a mask on the layer. Now we can do a lot of other stuff with masking as well, which we will be covering in the more advanced course, which will be coming soon hopefully, and we'll cover a lot of complex techniques that we can do to achieve multiple results with masks inside art animison because masks are supported by art files. So we will really learn how to use these in much more detail. Okay. So now let's just turn off the mask and see. What if there was no mask. Okay. So I disabled the mask, and as you can see, there's nothing as well. And there is this bottom layer as well, which also contains a mask. Now, why I have apply the mask to these layers is you will find this out really soon. As you can see in the next message, there is this text layer. The first line is masked out. And there is this second line, which is also masked out. And then there is this third one as well. So why didn't I choose any other technique instead of using mask is because we will be learning the details of how to export these animations as well, using the body move and plug in, which I installed in the previous class. Okay. So what are we going to be doing is that these masking techniques are going to save us a lot of time if the client requests a lot of changes. So what do you mean by that is that let's just say the client request to change the text. Okay? So what we're going to be doing is all these layers actually are the same layer, okay? So let's just disable the mask on let's just turn of these two and disable the mask on this one. As you can see, the whole text is inside this one. So instead of, let's just say the client requests that they want to change the text. We can simply edit the entire text on one layer, and then we can just duplicate that layer, and then we don't have to move the layer because as you might know, all the companies have some restrictions and some rules for their fonts and their typefaces, and the spacing as well between the lines. So we have to keep everything in mind when it comes to that. So it is better to just keep the standard of what the client say to you, and then you can just edit that and then apply masks to each layer and divide them into the lines. I think this approach works really well, and this saves us a lot of time when it comes to workflow and editing the text as well. Be or other things that you can do, let's just say that you want to learn the alternative to it. The alternative can be that you duplicate this layer. Let's just sold it for now. We'll disable this we'll sold it for now, and let's just remove the mask. Okay. Now, let's just say that we want to create shape layers from this one. Okay. Now, let's just wait, see, now the text is created. Now there's a problem with this one. The problem with this one is that first of all, we can't really edit the text now. And also, if we have to delete the upper two layers, we will have a lot of difficult time. And maybe you can say that, we don't want to edit that. What we want to do is we want to let's sol again. We just want to keep the word considering. Okay. If we delete the upper two lines, what's basically going to happen is that the text is going to change its position. So we might struggle with this a lot. We'll have to just then drag it below the other two layers in the proper position without making any pixel mistakes, and this can waste a lot of your time. Okay. So I don't appreciate this approach, and I think that this approach, the masking one does a lot better work in this type of text conversations animation projects. Okay. And because the region process becomes a lot easier. Okay. And of course, there are going to be times when there will be times when the client changes the script or there are changes due to some other stuff or maybe you typed something wrong. Okay. So it is important to keep that in mind. And also, there's another thing to keep in mind, which we will discuss in another class in the upcoming class. Okay. So now, this bubble as well animates itself, Okay. And then this text comes from the user, and then the AI recognizes that and thinks about it a little bit. And then this is what it suggests to the client, and then the person types everything and then this pops up. Okay. So this is how the conversation goes between AI and the person. Okay. So now we have established the animation. So, for example, in this type of text editing, You can become a lot more frustrated if you choose the other approach that I told you about. But now because I use the same text layer, we just have to displace the layer. That's it and just create masks. That's it. And if client requests to change let's just say the text, what we just have to do is we just have to go ahead and make some few adjustments on the edges of the mask. That's it. Or we can just go ahead and delete it and draw a new one within a minute. We just have to create this one. Go to the pen tool and start creating a new one and just add a few points and make the adjustments as we need them. So you get my point, right? Okay. So now let's just say that we have animated this entire animation. Now, after the animation is completed, now what we are going to do is we are going to make it display for the user that someone is using this animation on a mobile. So we're going to need a mobile phone for this right. We're going to use a placeholder for all of this text to go inside mobile phone. So we're going to go back into our main comp, and I'm going to show you how I created this. Okay. So now what we have created here this is a phone that I got from FP I believe. And now what we can do is or maybe I think the client sent me the file. So this was basically an EPS file. This is the file, which client sent me. I just selected all those layers and just took them to overload and just got them here in after effects. And after that, I just pre Cate and placed it over here and just enable the star button over here. Okay. So, which is known as collapse transformation. Okay. So continuously rasterize or vectorize. Okay. So Now, what we have done here is that here was the logo of the client. We place the logo because, of course, they want to show their branding. Now we're going to just go ahead and lock the phone. And now here's our animation. Let's just go ahead and remove the mask to see how the conversation is looking over here. Okay, because we want to show the entire animation inside a phone, there is a bit of a problem. As you can see, the animation is quite long, actually, right? And as you might know, if you guys have used social media and other stuff. There's a U i panel over here in the Let's just bring back the mask first. Okay. Now I'm going to explain to you why I haven't shown the last messages around here bottom because as you know, the user always types something in this area, as we guys use whatsapp you guys know that this is the area where we type everything, right? Now, you might say that the animation should have worked this way, that there was the text rate being written right here and then going upper in the chat, right? But that's not what the client wanted. The client wanted me to show the conversation between the AI and the person in this manner. Okay. So that's why we went with this approach. Okay. And also, they didn't have UI design of their app yet. So they couldn't really establish that. Okay. So now what I've done is the animation is right here, okay? And now what we want to show is that there is some negative space on the upper part as well because there is the branding, and obviously now the chat starts from here. Now, this is something interesting that what I've done over here is that this chat precomp actually I want to create a scrolling effect, basically, okay? And there are two ways of creating that. One of them is that we can create the animation of scrolling inside here. Okay, and then we can just parent everything to a null and then position key frame the null object. Okay? So everything moves with the null in the pro direction. We can do that as well. But there will be problem while with that when we edit the text because maybe the next paragraph is going to be a little bit longer, and one of them is going to be a little bit shorter, and the gap between the messages might get disruptive. The gap between the messages might not stay the same as you can see it is right now. Okay, so we can run between problems due to that. That is why I chose this approach of creating a precomp because the text animation should be perfect in its own self. Okay. And then the rest of the animation that we want to combine it inside should be created in a more of an expanded attachment. I think. So basically, if something breaks down in the animation, the text animation won't be affected by it because it is inside this layer. It is inside this precomp. So if we make some mistakes or adjustments are wrong, it will be applied only to the precomp. It is not going to ruin all of our project. So first, we just perfected the animation on the chat, and then I just pre Commed everything. Now what I've done over here is that I created a mask in which I wanted to make sure which area is going to be used for our chat, which is this area that you can see. Let's just change the color of our mask so you guys can see clearly. Okay, we're going to make it a lime color. Okay. Okay, so there's no contrast in the background, so let's just use a darker. Okay, we'll use a black. Okay. I think this looks more visible. Okay. So as you can see this work area in this we are going to be animating stuff. And because our animation is going to be a vector animation, we really don't have to worry about the masking or keeping it bras vector because the layers inside are all of them vector. So this won't cause any types of issues actually. Okay. So you can remove the star from the layer. It will not make any problems. I've tested the animations on the platforms. They work perfectly fine. Okay. So there is a mask. Okay. Now what I'm trying to show is that the messages go in the upper direction because there is new data that we want to show inside the chat, right? In simple words, that's how whatsapp works, right? The older messages move upwards and the new messages are below. Okay. So now the Path animates itself from this point to this point. Now what's actually happening, let's just go ahead and watch. Okay. So as you can see, the mask comes from above to bottom. And there's a position animation as well, which is compensating the animation of mask in the apposite direction. And how is that working? Let's just remove the position cition so you can get a better idea. You see what happened there? You get the idea. What we're trying to show here is that we want to move the chat in the upper direction. But as I move the mass downwards, the whole chat seems to coming down on the screen. That's not what we want to show. We want to keep the first message on top of the screen. And there is a bit of a difference if you guys notice the first message comes around here. Let's just draw a guide. But later, the message is around here. So why is there this space not matched? The reason behind this one is that here is this purple message. Now, I could have just simply put it the purple message half cut it over here, but that didn't look really well. So we just went ahead with the idea that we want to make sure that the conversation looks point to point, right? Because it is a story that we're trying to tell. So I just didn't want a half cutted message to be portrayed between the story because people have already read this one, okay? And in the case of that some people haven't read it, there is this. First of all, it's not possible that they haven't read it because this message stays on the screen for a few seconds. Okay. And then this one scrolls up. So I made this decision just to make the design look more clean. That's it. Okay. And as the mask moves down, there's a position animation which takes the whole animation in the upper direction, okay? Like let's just remove the key from on the mask, let's see what happens. You see what's happening? Okay. So basically the chat moves in the upper direction. That's it. That's all that happens. Now, this looks quite weird because we have crossed our marker from here and there is the logo of the client. So that's why I created these four key frames in which one animation is tackling the other one in the opposite direction, and it is just basically making it look like that we are scrawling actually. But that's not actually what's happening. But remember always that It's always about what the person wants to see. It's not about how it's working. It's about the illusion that we're creating. We want to convey the message that this conversation is being animated in the downward direction. Okay? It doesn't matter how we achieved it. Okay? Only the result should be smooth. That's it. And the conversation goes on and this one animates itself as well, and our animation is completed, and it stays on the screen for around a second, and then it starts itself over again. That's it. Okay. So this is how you guys can create these type of animations. And I'm going to show you in the next class that how we're going to export these type of scenes actually and what are the optimized settings and ideal settings for achieving the best results out of your lot files using body moving actually. And because it offers a lot of more advanced features than the lotifiles plug in itself actually. So we'll cover them in the later class. Thank you so much. I'll see in the next class. Okay. 6. 05.Complex Animations & Managing Workflow: Okay, so we're back again. And now we are going to look at another example and another case study of a really complex project as well. I created these animations for a website called Quander actually, and they requested something quite amazing. And I'm going to share this case study with you guys. Let's just show you what I actually created for this company. Okay. So I'm just going to go ahead and play the animation, first of all. Okay. Okay. So as you can see, they are basically displaying and explaining the whole concept of their product, okay, in a really creative way. And I believe that this project was one of my best projects, and it really is something that I want to share with you guys and explain you that how I achieved this type of results. And before we move ahead, I'm just going to show you something which is really important that I created this project quite a while ago. And what I'm going to show you is that I used to also bring the style frames from a astrator that the client sent me and then I just had to recreate everything layer by layer, inside after effects using this step. But it is much better to, you know, just open the files inside liraor and then just create the animation using this overload because then you'll don't have to go through that process, and it'll save you a lot of time. Okay, so let's start with what the client actually sent me. So the client basically just sent me these style frames, okay? I'm just going to open all of them and share with you guys. Okay. So let's start with the first one. Okay, so this is the first one, the animate center this animate center imatet this into this into this into this into this into this into this. And as you can see that there is no text changing. Actually, the files had some issues and the client requested me some changes, and I just got the name found from them, and then I just made the changes as they asked me. So basically, these style frames had some mistakes, actually. So yeah. As you can see, there are no texts here, but there are in my animations. So this is basically what the client shared to me. And now what I did here is the animation process was not really something that the client was thinking of. They didn't have a particular direction of what they wanted to make me do with the animation process. They just needed a smooth animation. I'm conveying their story from point A to point B in this case, which is through these rights. Okay. So I came up with this woo. I'm actually visiting this file after quite a while. So as you see, whoo. It's really amazing man. I'm amazed by my own work, to be honest because I'm opening my file after a really long time. So okay. So basically, first, the concept is also the client requested that they needed this animation in 60 fs per second. So that's why this animation is created in 60 fs per second comp. Okay. So what actually happens is that I had to create smothlest transitions between everything. So I just went ahead with the idea and created this animation. Okay, now we're going to look at some of the techniques that I use, keeping in mind that I will be delivering a lotifile for the client and what techniques I used to get the job done. And there are three animations in this project that I did for the client, but I'll be sharing only one with you guys because I think this is enough to get the idea. Let's just go ahead and dive into this. The first one is a circle animation, which is really simple. This is the circle animation that's animated and circle pops up, and then it goes downwards. Basically, there is no value in keeping this circle on the screen for a long time. Because there is no motif built yet. That what does this circle represents. Okay. So we're going to get to that point later over here, right? That this color is basically representing a learner. Okay. So that's not established here. That is why there is no point in keeping this dot on the screen for quite a long time. But subconsciously, it basically is representing the user who is looking at the screen. Okay. So basically, this is the person who is looking at the screen. Now, this goes down into the students. Okay. And now, these are all the less labeled as yellow color. Okay, we're going to just make this really simple for you guys because this is just too much I think. Okay. So here are the scale K frames. So all of them just circle. First of all, also this circle just goes back into the center, and scale down into the center. Okay. And now, what actually happens over here is that these circles scale up first then what actually happens is after they are scaled, I also had to keep in mind that the frames should be aligned with the client's storyboards. So as you can see in this one. The best way to create these type of animations is that first of all you have to recreate everything, at just go ahead and create this. And the approach to create seamless animations without making any type of mistakes is that when you copy the style frame and it is inside after effects, first of all, you just have to make sure that everything stays the same. That is why you're going to just go ahead and create the key frames of everything that's as it is. Okay. So you're not going to apply any type of changes. You're just going to add keyframes. Okay? You have to keep in mind that what kind of properties are you going to animate? And then you just have to keep that in mind. Obviously, the client provided me the style frames. So I can just go ahead and look at what type of animation I'm going to do. Now, as you can see, this is obvious that we will have to animate the positions. So I just create the position keyframes. Okay. What else are we going to do? Okay, we're going to need opacity keyframes because there is opacity difference. And there's something else. There's a color difference as well, right? As you can see. This color is different. Okay. So that makes three properties. Okay. First of all, we just added position keyframes. Now we're going to add color frames. Okay. So just create color keyframes. What we can do is simply hack this one. We're going to search for color. We're just going to add the layers first of all, and then go to type in color. Okay. So now the color have come, we'll just add the key frames on all the layers. So that's how you basically create the same style frame before starting the animation process. So now the color keyframes are added. Now, the third thing that we want to add is we're going to select all of these. Now we're going to p t because we're going to animate the opacity. We're going to create a key frame. Okay, so now we're good to go. If we're going to animate any other property, we'll just go ahead and look for that as well. But I don't think so that we need to animate any other property. So I think this is enough. Okay, so now I just go ahead and start animating the stuff, okay? That's how you start the animation process. You have to keep in touch with the storyboards and then think about which key frames you're going to need. Because you can't just create rotation and opacity and scale keyframes as well if you don't need them. It's really important to keep that in mind because keyframes contain data, right? So if you add use less key frames, it's just going to increase the lotifile size. Now, obviously, if there is no change in data throughout keyframes, it's not going to really affect anything. But it's important to keep as less key frames as possible in your artifies and if there are certain problems or issues that you want to tackle, which we will talk about as well right now in a minute. Then you can create some extra is as well, which you can optimize later. Okay. So let's just delete this, and let's just go back into the main comp and discuss this further. Okay. So after animation of the scaling on these ones. As you can see, all of these animate. And then what happens is that, so these are the layers. Okay, so we'll go back to this one because maybe there must have been some issues and editing process in these coms. So that's why these are this is not the final com. Because as you can see over here, I have added a field effect. Okay, so this is not going to work in the lottie. So this may be the first draft of the animation. And also, you can do this while creating the rough animation that you don't have to keep everything in mind about the lottie. You can just create a quick rough draft of the animation because as you can see, if we actually I'm sorry, I just didn't lock that one. Okay, so let's go ahead and lock that one. It's just an important tip that let's just say that we have to recolor all of these layers. So there are a few steps. The way we can recolor these layers. One of them is adding a filift which is really a shortcut way, and this will save us a lot of time. We have to do that. So I just use this approach over here to save myself some time because the client may later request the edit in the text or something like that. Then you will have to recreate the shape layers of the text and then change the color as well. So that is why this can get problematic sometimes. So I just created this in the rough draft. So I just leave this one out of the way, we'll just focus on the one lot, which is the final five, which is arty compatible. Okay. So after this, there is animation of open the position property. Okay, so position starts from here. Okay, so all of the animation starts from the center of the com, and then they scale up and to their respective position. So basically, I created these key frames later, okay? We started from here. I pasted these keyframes. I started with these keyframes, okay, this ones. And then I created these ones, and then I went to the next ones. Okay. So Now, from here to here, this stays the same. Okay. So these are just the copies of the first key frames because there is no interpolation between the key frames. So this not really make much of a difference on the rotifi size. Now what we're going to do ahead is that this animates from here to here. Okay. So how would I have achieved that? In simple words, I would have achieved that in a way that is go ahead and into 1.3. Okay. And I would have just created all of these as well into shape layers, created position keyframes on these ones as well and then copy the keyframes from these and just clo them. Well, not actually claw them because you can't claw the keyframe on another layer. So most likely I would have done is create these into shape layers and then make position frames on this ones like this. Okay and then just copy all the layers. This, bring them over here like this and then just select one of the balls of the circle and then just select the respective one and then just copy and paste everything from the reference one to the other one. Okay. So let me just show you one example of that. We'll just keep one of these here. We'll just delete the rest of them. Okay. I'm just going to delete the rest. Keep this one. I'm just supplying a fill effect on this. Okay let's select this one. Clip this one off. Okay. So let's just move this one around here. Now we're going to go ahead and copy this key frame. Okay. And now I'm just going to click over here. Click on the key frame. There is this layer. Okay. It's around here. Control V, and this is exactly in the same position. That's how I would have done that. Okay. So now let's go ahead onto the next step. What is happening after that? Okay. So here's a text layer, and it contains a few spaces. Okay. So let's just make the background black so we can read the text. Okay, so there is a gap between the text, and then the rest of the text just simply appears with position and opacity. Okay, there's one thing to keep in mind that As you can see, this animation is ten, 20, 30, key frans okay? And so is this one, and so is this one, and so is this one. You have to make a standard for every animation when you're creating work for the client, as we've discussed this before, so that the branding doesn't, you know, miss out on some of the layers, and some of the layers are animating in another way from the first one. So that will look weird. Okay. So now what we are going to do is I have just created these layers. Okay. So one layer appears for around a second so the person can read it, and then it moves on to the second one. Okay. So now the opacity animates. Let's go ahead and check the opacity key frames now. Okay. So I hit T on our keyboard, and I will see how I have animated this. Okay. Okay, now this is something noticeable here that all of these are animating right except this one. This one is not getting animated. The opacity is not getting animated, but still, as you can see there are key frames here. Now, these key frames do not contain any data between each other. This is also hounded and this one is also ded. So why did I create these two keyframes? The reason for creating these keyframes is that it makes everything much more easy when you're copying and pasting all the animation. And also, if the client requests that they want to make the animation longer, right? They want the animation to be longer in time and take more time and it should be slow, right? Then I can't just drag these keyframes ahead because there will be some gaps in the layer. The one that is not animating will be disrupted because all the keyframes are not aligned with each other. I can't I can't just simply go ahead and sequence these layers as well because there are some gaps between the layers. So that is why it is important to keep this in mind, and it will also make my job easier while animating everything because I will get less confused that which layer is animating and hicclaer is not animating. Because in terms of looking at what I should be animating, that's not a big problem, because you say that, I'm not sure what I need to animate. I'm just going to go ahead and check the style frame. That's it. Okay? So that's not a big headache. I just have to go ahead and check. That's it. And I will know which one should be animated and which one should be not. I can check that in the reference. Okay. So the same thing is going to happen with the color keyframes as well. Okay, so let's just go ahead and check the color key fms now. I'm going to select all of these. Go ahead and check the color key films. Okay. So as you can see, half of the layers change their color, but there are keyframes on every one of them. And also, as I told you, there is a reference key frame at the very start, Okay? See, every layer started with the same color, so there is a key frame. And now, here is where the animation starts, so there is a key frame and from here the color stars changing. So let's just go and check when the color star is changing itself. Okay. Okay. So the color starts changing itself from here to here. Okay. So let's just go ahead and see over here. As you can see, these layers are changing their color, but there are key frames on the below one as well, right? Okay. So because there is no color change going to happen around here, so there is no keyframe here. Okay. And as you'll see, we go through the file, there are key frames on every point. This is a mistake that I haven't added keyframes on these ones because there should be keyframes on these layers as well so that every layer has a keyframe at every point in time even when one layer changes its color, all the other layers have key frames as well. Now, there might be some people who must be thinking that this may increase the lot file size, but that's not the case actually because there is no interpolation between the key frames. So this doesn't increase any file size actually. And In some cases, even if it does, or there are some problematic. Maybe there will be some problems with this type of key framing when you are using images or raster based data. So then I would highly suggest that you don't add extra keyframes, or maybe you can just go ahead and clean the keyframes once the client has approved the project, and then you can just create a copy of this cop and then just go ahead and delete all the extra keyframes like these ones around here. You can just go ahead and delete these six keyframes. But once the project is done, and you're on the final step of delivering the files, only do it then, okay? Just for the optimization of the file. Don't do it before that. I would highly recommend it, or else you will be confused a lot. Okay. So after that, you can see half of the last change your color, and the text keeps animating itself. So now, basically, the text is reflecting the story between these dots. So the dots react to the text. As you can see, personalized lessons are more effective than typical instruction. And now, now it's basically targeting the other audience, which is what kind of a teacher are you. Okay? So now they have used a really unique concept of representing that as well with dots only. That's it. They didn't use a correct animation or something like that. They used a very minimalistic approach with this. You can also add markers, by the way, to make sure that you're going to add one slide. And if you actually check the timestam between these. It's just say ten, 20, 30, 40, 50, 60701890, 100, 110, and 120. So this one is also 120, this is also 120. So each animation is taking 2 seconds, okay? So what you can do in the starting of the project is that you can just bring all of your project assets. And then what you can do is let me just go ahead and show you what I mean by that. Okay. We're going to create a seven 50 by seven 50. We call it testing. And now I'm just going to go ahead and change its color. This one, going to call it. Okay. Now we're going to just track all of these to here. Okay. Now what I'm thinking is that let's just say that the client doesn't know how many time will be effective for each of the slide. So I'm just going to go without any hard work. I'm just going to make sure that the timing of the animation is right. I'm just going to go ahead and make these 2 seconds each. Okay. So Instead of using this, we can also go ahead and do this that we'll select all of these. Okay, now we're going to just change this orientation order of the order of the layers, and now I'll add the steps one 20. We will apply the offset to only one layer, and I'm going to hit sequence. Okay, so the plugin is actually not working due to some reason, and it actually happens. So we'll just have to restart our after effects in order for it to work. Okay, so now we're going to select all the layer and hit sequence. Due to some reason, the plugin is not working. Let's just go ahead and select it from here as well. The plugin is going to be around. Due to some reason the plugin is not working. I'm not quite sure why this is happening. So what we're going to do is we're going to do this manually. Okay, so you can basically create a simple slide like this and you can send this to the client. We have to change the order of the layers. That's it, and we will be ready to go. Okay, so this is the second slide. Okay. We're going to unlock these ones. Now what you can do is you can send this to your client and let them have a look that if the timing looks correct or not. They can get a pretty good idea from here, that how is the animation going to or if the timing is correct or not. That's it. You can just do it within 5 minutes and send it to the client. So that's what I must have done and then started the animation process by creating the time steps and finalizing the final timing of the animation. Okay. So as the animation goes on and the text keeps animating itself, and the dots animate themselves. There's opacity changes going on and there are color changes going on at the same time as well. Okay, I'm just going to go ahead and hide the layers and it's going to slip all of them and reveal opacity, as you can see, everywhere the captions are created even on the layers which are not being animated. Okay. Okay. This looks more less confusing when it comes to adding revisions to your files or something like that. Or maybe you have to adjust the timing of the key frames, or you have to just make the whole animation longer or shorter. You can just alt click and drag all of this. Okay. So but if there are gaps between the key frames, this will ruin the animation. You can't really change the timing. Also, you cannot use expressions as well. In latifiles they don't work really well. So we can't really use any reversal or time stretching expressions or effects as well. So we'll just have to change the timing of the animation manually. So this is really helpful in terms of that. The animation goes through all of that and then this text appears itself and it's animated. Now, as you can see, there is a huge disadvantage to shape layers when it comes to text because now all the letters are animated separately. But if it was a tax layer, there would be only one layer. So our project would have very less space and very less layers. And with the help of that, the after effect will lag very less. And we're going to learn in the next class that how we are going to export these files in the best ways possible. So let's just move to the next class and see how we're going to do that. Okay. 7. 06.Bodymovin walkthrough & Exporting Options: Okay, so this is the body moving plug in, and here is how the interface looks. Okay, so there are multiple options that we're going to take advantage of, and there are multiple settings that we will be discussing in the more advanced course, actually. Okay, so you're going to go ahead and go into the windows into the extension, and then you will find the body moving plug in and you're going to click on it, and this is how it will pop up. First of all, there might not be any coms, you're just going to have to click the refresh list button and it will make you appear all the comps that are created inside after effects. Now you're going to go ahead and focus on Duty one. Okay. So before rendering it, we just have to select it. They're just going to click on this button, and this layer is this C is now selected. Now, this is the setting button, actually. There are quite cute animations inside. Body move and plug in, by the way, if you notice them. Okay. So from here, you can just go ahead and change the location of your animation, actually, where you're going to save this. So let's go ahead and make it the same as course classes one. So let's just go ahead and save it there. Okay, I'm just going to call it D t one. Inter. Now you're going to just change a few settings. Okay. So, the settings. Now, there are a lot of things that we can apply in the body Moggin and there are multiple types of settings that we can apply. Okay. So most of all, important option is going to be the glyphs one, okay? What does this one do is that basically, we can change the dynamic fonts actually in loti files, and you can learn that on the YouTube that how the developers do that, that's where developer stuff actually. And if you're going to change the font on website in your lot animation, then you want to untick this one. But unless you're going to do that, you want to keep this blis on, because what this does is that it basically, as you can see, there is a text layer in our animation, right? This one. What this will do is that it will automatically when exporting the file, it will change all the characters and letters in your font into shape layers, automatically. So there will be not a lot of mess. Okay? You just have to type in your text, and that's it. It will do it and convert this into shape layers when it is being exported. So you don't have to really create such layers like this one. Okay. I created this one because I was struggling to create the same font style, actually, because they actually customized one or two letter between this, I think. So that's why I struggled with this. Okay. So this is the first and most important option that you can use this feature value very usefully. And it will not affect the file size as well. It will keep it minimum. Also, after that, there is an option known as the replace characters with coms. Okay, replace the characters with custom compositions from folder. I really haven't used it a lot and never almost. I think I don't really know that what does this feature do actually? Okay. And after that, there is hidden select if you need hidden layers to be exported. As you know that there are layers in the composition like this one, which is basically a created copy, but it is locked and hided. If we want to exploit this one as well, then we'll just have to click our hair as well, but we don't want that, we just want the data that is asable in the comp. Basically, if there are multiple layers inside your comp which are hidden and locked, then you don't have to worry about them because body moven will not export them and they will not be added in your animation, and it will not impact your file size. After that, this option is guides. Select a few need guided layers to be exported. As you know, Afterft has the option to make a layer a guide layer. From here, you can just make the layers guide las. What guide layers is used for is basically referencing, actually, a lot of people use it when they import a color palette, they just make it a guide layer, and they work with their guide layer on. So because when the aftereffects renders the animation, it does not export the guide las. That is the main function and advantage of a guide layer. Okay. So this option can include the guide layer as well. And we don't need that as well. So it is going to leave that extra comps. Select if expressions are pointing through the external clumps. This might be useful when you're creating character animation using this because there might be some precomps of arms and legs of characters that are pointed or linked to the main con of the character. But I don't really recommend this because expressions don't work very well on all the platforms. They might cause some issues on mobile laps. So just ignore this one. I would say, or maybe you have a very specific demand from a client in which they are going to use the animation on web only. Then you'll just have to do some testing before you give the animation to the client. So this is really experimental in my opinion. Then there's this feature, which is known as this is one of the most important features. We're going to go more in dive in this feature in the next course, the more advanced course. And what this basically does is you can include images inside your tifiles. So we're going to just leave this one for now because we haven't really used any raster images in our project so far. Now it as for what is the export mode that you want. First is the option that standard exports animation as a GSM file. Split split comp in multiple JS files every second. It will basically split the animation into, let's just say we want one animation of 1 second. It'll make we can just type in the number and it will export it will export more than 24 J because the animation is more than 24 seconds. But it's not really useful and I haven't really used it ever because there's no point in dividing your data actually. So it's if this unmarked. And then this is a button for exports and HTML for local preview. This is also going to be further discussed in the more Moscos because this is also very complicated to explain. And there are some exceptions for clients when they're going to ask for an HTML file, but you can't really export all of your lot files into TML because HTML also has some very restrictions, and even strict restrictions, then lot animations, actually. So you can't really animal trim path as well, I think, in HTML imation. So you're going to have to be extra careful when creating an HTML animation. So this is a topic for another day actually. Okay. And also, you can create a report of the animation, which is basically a text file, which explains everything about your composition. That what is the size of the composition, the color, the type of layers and everything. So that's it in simple words. Maybe the developer can use this to find an error in your animation. So maybe they're struggling with the issue. You can just send them this report, export it from here and then send them this. So it will help them read the data really well and find the error without efforts. Okay. And then there's this button which says RV animation project. Okay, so RV is basically booming from a few months now, and I'm learning it. And I haven't really tested this one because RV and emissions are quite different from the way ti works. So I haven't really tested this because There are some restrictions in R as well when it comes to animation. So I don't think that after effect animations will really work there as well smoothly. And people have done some testing on this and the results are not really ideal. So it's not really recommended because if you really want to create the animation for RF, then it's recommended that you create the animation in their native software, instead of creating it here and exploiting it as a RIF project. Okay. And then there's this stand alone export player and animation in a single S file. I haven't really used it, and I don't know how this works. So you can find some data on it obviously on the YouTube channels of people. But I have never really used it, and not even once our client has requested this as well. So I have never really used. Okay. And this one says banner bundle of piles for banner usage. I've never really used this one as well. And then there is this one and XML for Androids animated v vector draw available. There is going to be a whole course on this one in the future. It will take a lot of time to build that one, I think. So I'm just working on building that one. I'm working on the idea of that course and collecting the ideas on creating some really useful classes for this one, because there are some changes applied into the Android new update. And since those updates, there has been some issues between artifis working inside mobile laps. So yeah, but it is very niche based, and it'll take some time to get detailed data on this one, and then I'll create course on this one. And then there's this port and SVG file that uses SML for animation. This is experimental and not everything will work. So this is basically going to be an SVG animation. If you guys, I don't know if you know it or not. As we all know that SVG is a format for Steel images, steel images vectors, scalable vector graphics. That what SVG means. But you can actually animate the SVG using coding. And then a lot of developers actually do that, but it's really very complex. So most of the animation that you create over here might not actually be converted into the SVG data really well. So this really doesn't work because if it works it would have worked really well. Then people will be using this instead of ft actually because it's much more easy to implement SVG simply. Okay. And then there is this option that says expression options converts expression to key frames. So, what is this basically is that let's just say that you apply a gal animation to one of the layers, right. So it will basically convert all of the gal animation to convert into key frames, but it will make the file size huge. So really not recommended. In most of the cases, I would highly recommend that you just don't use expressions at all. But obviously, there are some exceptions. So I would highly recommend that you experiment with this a lot before giving the file to the client. Okay. And then there's this advanced export features which are just more of a developer side issue. In my opinion, because it says that use composition names as IDS composition names will be used as a reference IDs. So basically, the developer may be able to use the comp name and import the file and maybe connect the data to Lot's cos. Let's just say that there are multiple coms inside a lot file, so maybe they can trigger only a specific comp using this type of IDs. Okay. So there is this export in a more human readable format, do not use for final file, since file size gets significantly larger. So basically, we need this as well. And non supported properties. Only check this if you need a specific property uses other than the player. So what this basically means is that it will also render the effects on your file as well. But I mean, the file is not going to work. So I don't know who will use this feature. Okay. And then there's going to be tram used keyframes and layers, remove layers and keyframes beyond the work area. You can really use this and this might save you a few KBs on the file size data, but not really necessary in my opinion. And export JSF for backward compatibility, let's just say that people are building the animation for an app, but some of the users are using previous version of androids, maybe this will help you in creating a more compatible JSON file for that, but not in the most normal cases. And then there is the essential properties, Export essential properties, Export essential properties from the root composition. This is checked by default, so leave it as it is, and then there is option which is essential properties as slots. I don't know what this means actually. I act will map essential properties two slots on the JSON file that allows for easy modification. I activity, it will replace the properties in line in the composition. Not really sure how this works. There's this metadata. Not really interested in that. Blueprint, really don't know how we're going to use that as well. Use up blueprint to attach to the animation to validate export. Not really necessary. Now, audio files are basically, I have never really used audio files inside not animations because developer can actually connect the audio files to the animation when they are embedding the animation actually. So I've talked to the developers about this as well, and I think that works much better because when you work inside After fx, you have to apply compression on audio as well. So it's better if they just do it manually when they are embedding the file. Okay, so these are all the settings. Now are going to hit safe There's another really amazing feature. First, we're going to just export this one and hit save and then hit render. As you can see that one of the most important to keep in mind here right now is that when we exported the file using Roti files plug in, it actually required me to have an Internet connection in order to save the file into the workspace. Yes you say that I don't have a internet connection, but I still want to export my GSN files. We can really use body mopin here instead of using a lot plug in because lot plug in actually requires you to Save the files in their workspace. So this program really helps in that way that you don't have an internet connection actually. Okay. So now the animation is rendered finished, and now we can preview the animation really easily. We're just going to preview, and we're going to apply the animation. Now we can just preview the animation. Okay. Okay, so I just messed up the animation on this one. So We can just fix that later as well. As you can see, the animation is perfect, right? Okay. So another thing that you can do, which is really, very important and quite useful is that you can import plot animations which are on your drive, and you can preview them here, which is really amazing, actually. Let's just say that a client sends you a f egg, right? And the client quests. Let's just say that the client sends you the same animation and says, I want to fix the animation on this start, right? The animation on this start, right? So what we're going to do is let's just say we're going to import local file type in the path, and we're just going to select the files sent by the client, and we're just going to hit. Okay. Now this may take some time, but it will build the animation again inside after fats. And by the way, you can use this feature to learn from other creators as well. You can just go ahead on lotyFiles. You can download other people's lotty animations, and then you can import them inside after fax and then learn from their files. Let's say that you're interested in one of my uti animations, and you might be curious that how I created a particular Auty animation or maybe something that you might think that how did I achieve that particular effect or something like that, right? Then you can just go ahead and download my animation. Let's just say that you think that this one is really nice and you want to see how I animated everything. You just have to go ahead and download this one, and then you can just download the JS file, and then you can import it here. Okay. And then the animation will be, in your com as it was created by me. There might be some differences. And let me tell you those. The labels will not be applied to the emission when it is imported because the reason behind that is the labels are created inside after effects. So this data is not exported into the JSN file, so that might not work. Okay. So this is taking some time, but you get the idea that you can use this feature really well. I'm just going to cancel the export. You can also type in the URL as well, but it will obviously require the Internet connection. Okay. And you can preview the animations as well. Let's say I want to preview a local file, right? I just want to watch it. I don't want to recreate the animation. Let's just say our client says that the animation is not working properly. So what I'm going to do is, I'm just going to select the animation, and I'm just going to hit enter. And it just imported that animation here. Now, I'm watching the animation from my drive. This is not the animation which we have rented. It is picking the lotifile from the drive. Okay. So this is really useful. You can go ahead and check in the file. That if a client says that there is an issue in the file, I want you to preview this file. You can just come inside here and go into the body movement and just hit preview and browse a locker file. That's it. That's it. That's all you have to do. Okay. So this is really useful. You can indefinitely import reports and go into the settings, and I have never really used this one. And you can also go into these types as well, select one or more properties from your composition to get the information about their support. Okay, so you're going to. As you can see, this really helps you understand that which property is accepted on which platform. So if there is some problem in your file, or maybe you want to check that if this will work on the Android feature, 4.5 0.0, you can just go ahead and read the data, or you can just take the screenshot of this and send this to your client and help them, that this is the data and tell your developer this data, and this will help the developer understand why the animation is not working. Or maybe they'll find a way to make it work. So yeah. And this is how this plug in works, and these are the features. So this is how the plug in works, and these are the advantages that it offers instead of and in the comparison of lot files versus body moble plug in. I highly recommend using body moble plug in when working for clients. So thank you so much. 8. Congratulations and...: Congratulations for completing this course. I'm going to see you guys in the next one really very soon, and believe me, this is not going to take another year. I will be back really very soon. You can also support me financially by buying me coffees as well. You can also follow me on social media as well to share what you have come up with and what you have learned through my work. You can also reach out to me if you have any questions or you are keen to learn anything new. You can drop me a message on Instagram by any means and any time as you like. Looking forward to teaching you guys more and looking forward to seeing the craft. Please go ahead and submit me some work on the Class page because I haven't really seen one animation till yet. It will be really amazing if I see some of your works as well. And looking forward to your feedback as well on this course, I'll see you in the next one. Thank you so much. Goodbye.