Godfather of Lottiefiles

1. Intro: Hello and welcome to the course. In this course, you are going to learn a lot of new techniques, and it is highly recommended that you watch the previous classes before continuing because we will be covering a lot of new advanced techniques that will make you top 1% Lottie creators. Okay? And as you know, I am Bolt Bite, and I have been certified LatiflesTurnament creator by the LatifilsOficial Discord tournament, and I'm also certified on Contra as well. And I have multiple badges which are given to me by LottieFiles themselves on my contra and I have been creating Lottie animations for the past five years, and I will be sharing in these courses that one moment where there was a glitch in a file, which didn't happen across 100 projects, but it happened once. So this course is packed with tons of new techniques, how I created multiple complicated character animations for multiple projects. We are going to learn how and what is animated Splash Screen and how can you create one for multiple mobile apps? And we are going to also look at some of the very complicated projects that I created for clients so that you are ready to go ahead and become the top one person creator in ILTiflePlatform. So let's just go ahead and get into it. 2. 01.What is Splash Screen?: In this class, we are going to learn what is a Splash Screen. So let's just go ahead and let's just figure out what is Splash Screen. So what is Splash Screen Android? I have just added Android because I wanted to show you some things. First of all, let's just go ahead and click the first Android developer official Link by Android Development. So you will see here that there are some notes. I am not going to get into the technical details because then the course will be too much long. So basically, you can read all the data here, and I'm going to be basically sharing my experience because by the time of this recording, I have created 100 plus to be exact 137 animated splash screens for mobile apps. So let's just go ahead and have a look at what is a Splash Screen. You will see that there is a slight animation going on here. Now, that is a Splash Screen. Something that appears when you open an app on a phone, either it is IOS or Android, then there is a brief animation, which is basically kind of a logo animation, and you can use the same animation as logo animation as Valvo will discuss this now in detail, and you can create these animations with the client's logo or typography logo that they provide you, and you can provide some really good services in this category because there is a lot of potential here, and everybody is now trying to build, you know, motion first apps, and it is highly has become common that people use it. So let's just learn that what is necessary to create Lottie animated a Splash Screen. So first of all, the animation should be 2.5 seconds long, or it can go up to 3 seconds. Now, these are the nodes, actually, and it is highly recommended that the animation is around to 2.5 seconds. But there have been times when the developer has requested me an animation which was over 5 seconds. So there are some exceptions as well. There might not be that written here, but the developer can actually do that as well. So if a client requests you that, then you can definitely create longer animations as well because embedding the animation inside the app is the headache of the developer. Your job is to create something that actually works. That's it. And we have covered a lot of techniques in previous classes, and you know everything by now, and this is a top 1% creator course. So that is why we will not get into details that what features are supported and not because those are explained already in the previous classes. So, let's just go ahead and see and let me just show you how I created a animated Splash Screen. So first of all, I can just preview some of my work. So here is and animation that I created for our client. This is just a case of study. It is highly recommended that you go through these processes as well when you're working on a client project. And you can see the animation is here. Now, this is what I created for the final animation for the animated Splash Screen. Here is another project where I created this animated Splash Screen. We have covered icon animation in detail in previous classes, so we're not going to get into a lot of detail there because it's really simple stuff. And then there are mock up animations, obviously, just to showcase the new clients that how their animation would look most likely. Okay. And then there is this state side as well where I created on boarding animation. We have covered character animation as well in the intermediate class, so you can check that out and yeah, that's basically it. There is the animated Displash screen. And you can see that there are two variants that I created, one for their website and one for their mobile app. So this can also happen, depending upon your case. You have to create two words and sometimes. So let's just have a look at how I create these animations. I'm just going to go ahead and open my file. Okay, so we have opened the file. Now let me show you something really important here, which is, in most case scenarios, you are going to be creating the animation in a square canvas. Now, that is not the case in this file, but let me show you another file to give you another example. Now, this is a really nice case study. So let's just go over this one first. Okay, so this is our square animation, okay? And basically what is actually going to happen is this is really important to keep in mind that the client can use this animation as a logo animation as well. So you can just provide them a MP four format as well of these files and you can chart them extra that you are creating a Splash Screen plus a logo animation, and you can tweak the animation if needed. And that's basically it. For example, you can create a logo. For example, if the logo was, for example, this box, you can create the animated Splash Screen from this and you can do the logo animation of this logo, right, that typography logo. So let's just go through there and we can have a look at how and what is the thought process that I go through when creating these animations. Now, this is purely UI animation courses and classes, so we're not going to get into the details of the principles of animation. If you really want me to do that or create a separate class on that, then let me know. But that is a separate discussion. Or separate. So here is this box and it is SVG layer. And then after that, at this point, the layer basically breaks up. So this layer cuts down right at this point, right? And then after that, we have these four scattered pieces. Now, these are just masks added onto four parts. There is opacity going on, as you can see, fading away, right? And then basically, there is just position key frame as well. Other than that, to give more impact to the animation, what I have done extra is that I've added a bit of pieces of just rectangular or triangular shapes which are giving the feeling of confetti. And other than that, there is just this splash animation, which is just lines animating with trim path. Pretty simple stuff, nothing too complicated going on. Now, focusing on the character or sorry, the writing animation, what we have here. Let's just have a look at that as well now. So we have this writing effect animation over here. And you will see that there are some arcs going on, arc animations, which are just the secondary motion, which is added later actually. So first, you have to just do the writing animation effect. And then after that, you just have to draw some basic, just go ahead. You do not have to design this stuff in Illustrator. You can just pick your pen tool just draw a simple path and then add trim paths on top of it. And that's pretty much it. And then you can add trim pathing on top of those as well. And if you notice that there is this green writing effect also going on behind our animation. So what is this? First, let me lock these layers so that we can focus on this. So we have our layer over here, and this is our animation in purple color, as you can see. So basically, what I have done is basically created the entire animation first and then created a duplicate copy of that, okay? And the duplicate copy of that is actually you will see here. That the entire duplicate copy is actually below with the green feel, actually. Let me just go ahead and click another layer so that I can show you. Let me just solo it. See? So basically, I created the entire animation, first, duplicate that and just bring the entire animation back. One frame, that's it. Then I just change its color to the green, and now it gives this creative writing effect and has added much more personality because of that green fill color animation behind it. And that's basically it. The entire animation is completed, and now let's move on, you will see that the animation is 4 seconds here, and the composition is square. Now, what is the advantage of creating the animation in a square? First of all, if the animation is created in a square, what you can do is most of the time the developers request me that they need danimation in a square, and the animation should have negative space. So the animation should be let's just say 500 by 500 Pixel square, there should be a pixel square, and the animation should be inside that, so that there is plenty of negative space. And sometimes the client requests that they need the vertical option, and this is the standard vertical format for reels and they request dynimation in that size. So what you can basically do is dragon drop it here. Let's just go ahead and play it. You can see the animation fits in really well. Now, if you have to rearrange it, what you can do is basically dragon drop it like this, right? So you can rearrange it really, really nicely. If you have any other issues as well, you can just pre count the whole thing, or it is already pre counted as here. You can just create another square size composition and you can just move it around. Align it however you want, depending upon your size, and you can also scale it down as well, because it is vector, so it is not going to affect any differences on the quality. And if they are going to use it as MP for animation as well, then what you can do is basically, let's just say that they are going to add it on YouTube as well. You can just create FHD version and then basically drag the square over here. Then that's it. You can just render this out. You can scale it up as well. If you want. You can enable the star so that the animation stays crispy. You can also provide the four K format as well, double it and you can send it that as well. So now let's just go ahead and have a look at another animated Splash Screen, which I created a very similar concept, but just to showcase you how you can add so much personality because even if you do not have multiple effects going on, you can still add a lot of personality into your animation just like I showed you in the previous project and now in this one. Basically, there is this animation, and you will see that there is a lot of squash and stretch and anticipation on our main hero character. There is also follow through on the rest of the animation because this one is creating so much impact, and it is affecting the others to come out of there. And then there is squash and stretch, which is another animation principle, and then there is just secondary motion. So the secondary motion is actually added in the end, as you can see on here as well as I showed you, that the this is actually the revision or so called basically revised version of the concept or added some additional details. So you can see these can be added later as well. You just have to draws some lines, and that's it. And it also depends upon the type of the feeling of the brand and also the target audience which kind of feeling you are trying to achieve in the animation. So you have to keep those things in mind as well. Okay, so pretty simple stuff. There's nothing too complicated going on that I should explain here. So let's just move on to the next one, which is Okay, so this one is basically just the same thing animated Splash Screen. A very simple concept. You can see we are just changing the color of the layer over here, and then there is just some scale animation going on with just some offset to the layers. That's basically it. Very simple stuff. This is really important to show KSU that most of the time, what actually happens is the client can also request the dark and light version of the app, depending upon the user's mobile device theme, maybe, or maybe they can you can go into the settings of the app and also change the dark or light mode of the app. So this is the dark version, right? And then we have the same animation. You can basically just see that the animation is same, we just have different colors. Now, this is really important that you duplicate or copy paste the file. Once this concept is approved, the animation is approved, everything, you just have to duplicate the file and then just change the colors. Now, why I recommend doing this is really a basic concept, which is because we have created the entire animation here. Let's just say that the client also requested this in four K in two k in vertical as well, in square format as well, and also on the horizontal format, full actually as well, w. So what you can do basically is something really simple, which is you just create the animation. And if the client requests some changes, you just have to make those changes here. Because this is a pre comp added into these coms, those changes will be added here automatically. So this will save you a lot of time. And once all of this is done, that you have created one version for multiple coms. If you duplicate that file, these coms would have been already created in the other version already. So you will just have to go into one comp again and then just change the colors, and the entire light version would also be ready. So these are just some tips that will save you tons of time. There is one very important key thing to remember, which is a client can also request some times AVD format as well, but this has happened to me only twice when I created 100 animated splash screens. The client actually works with the JSON file, but only two times the developer requested this version as well. So just in case a developer asks you that do not panic just this option and send this version to them. Okay, so pretty simple stuff, nothing too complicated. So that's basically it. And I hope you learn something new in this class. See you in the next one. 3. 02.Mascot Animations: And Okay, so in this class, we are going to discuss how to create Mascot Animations for your client projects. Now, if you know Duolingo is a very famous example, and if you are a UI motion designer, you must know Duolingo already. So let's just get into a few examples of how I created these. Okay, so let's just go ahead and check a project that I did for Maro parents, which is a IOS app, and it is live right now. So let me show you the animations first, and then we will look at the case study. So these are multiple expressions of the same character. Now, it was really challenging because the character does not have a mouth, does not have a nose, does not have eyebrows, so there is a lot of minimalism to the character. So this is basically for kids with mental health problems. So these are multiple poses of the animation. Okay. Okay, so let's get into the file and let's have a look at the animation. So let's just go ahead and open our first one. I'll just trim this one down so that we can focus on our animation. Okay. So let's just see how these are created. So these are just basically shape layers. The character designs were done in Illustrator, and you can see, this is just about your skills as an animator because there is nothing too complicated going on and you have to work with what you are given to work with. And that's basically it. There's not too much detail or too much work going on in the animation. These are just simple layers that are just being animated, and that's it. Okay? And let me just lock the background. And you will see that the pupil is here. Let me just slow it down. Okay. And you can see there is just this pupil, which is basically parented to the right eye, which is basically getting animated. And then after that, we have this really simple eye Blink, which has been done on the pupils. Okay. Very simple animation done here. We have discussed eyeblinks before in the previous classes, so you can check those out if you face any confusions. Moving on, we have this slightly unfocused. The eyes are moving, so only the pupils are getting animated. And then there is this one which is not focused. And the design team hadn't actually decided that if they will add the entire body or if they will crop it down to the head, that is why there is not much animation going on on the legs or on the hands. And because the kids also faced mental health issues and they were pretty young age, so we just didn't want it to create much distraction. With these animations. These are just to showcase them how they are feeling today. Okay, so let's have a look at jumping animation. So let's just deep dive into it a little bit. So this is our body, okay? And this is getting animated. Pretty simple. Okay. So there is transform scaling, right? Now, the reason because I have animated this transform inside a group is because other layers are actually parented to this one. So that is why if I animate a scale, everything else will also be animated as well. But I don't want other scales to animate. I just wanted to show that the body has motion, not the entire thing to squash and stretch. So pretty simple stuff. Okay. And then there is bend on the legs. Now, how this is created, let's have a look at that. Okay, so at this point, you will see that the leg is basically just bending on a separate layer. Okay? So this layer right here. And then once we have the cut, we have another layer of legs trimming down, starting from the same key frame, but because it had to be parented, because if I parent it right here, then the body cannot move downwards because everything is parented to the center of the gravity, and that is why we have to keep this in mind. Okay? So this is our control over here. You can see that we can move the entire animation around with this, I think. Yeah, everything can be moved as well. So the entire character animation does not break. So pretty simple stuff, nothing too complicated going on over here, and then there is just rotation on the arms. Now, because the arms were a little bit already curved, so we didn't have to actually add much motion, as I said, we didn't want to create much distractions for the kids. So pretty simple animation, nothing too complicated going on over here as well. And after that, we have the one with the beer. So the beer is basically some layers with opacity. With different opacities, and that's basically it. The designer did a really great job, though, and you can see that it made my job really easy because if the design is really great, you can create really nice animations out of it. But if the design is not actually great, you can't actually make something great out of a bad design. So your focus should be on design as well and how you can get most of the value out of that design. So that's it, most of it, I think, and let's just go ahead and have a look at other animations. So this one is disgusted. I did not want to change the ice to the strokes because I wanted to keep it constrained the same. So I added additional layers on sides, which are basically just spirals getting animated. Pretty simple stuff. Nothing too complicated going on, right? Now it feels like that the kid is, you know, feeling disgusted or kind of thinking about vomiting. So that's why it's covering its mouth. So basically because now you might say that there is no mouth layer, but you can notice that these kind of details are very self explanatory, right? So it's basically homo logic and nothing else is going on over here, pretty simple stuff. And on the fearful one, what I have over here is basically just the drops which are precomped and then just to bligated. That's it. And then we have the for example, if you have to create some stuff like this, how you can animate it is really, very simple. Let me just tell you about that as well. So let's just say that these are the legs and let's just press you and you will see that these are actually shaking a lot, right? So this is the arm and then you can see that there are gels per second and there is stuff like that going on. Okay. Now how this is created, let's just go ahead and check the gel path. So basically, I just converted these keyframes, actually, back to them, and then just create the animation out of this. Nothing too complicated going on here as well. What you can also do is that instead of adding gels, you can just create one line, one simple line like this. Okay? And then what you can do is basically create some deformations on the leg as well. Now, this is a really, really very old project, actually. So that's why maybe I didn't know that I could do that at that time. So maybe I just found a solution that I could at that time. And what you can basically do is, let's just go ahead and animate this a bit so that you can understand. I will go ahead to key frames and let me just animate this a little bit roughly right here. There should be actually more path points, but this is just to illustrate the purpose and make you understand what we are actually trying to achieve. So on four frames, we are going to just make it like this. Pretty simple stuff. Nothing too complicated going on. And then after that, you can go to the six key frame and then just copy and paste the first key frame. So this has become now a loop like this. Now obviously, you understand my point. So I don't think that I really have to recreate the entire animation to explain this to you. So basically just copy it and paste it, and this can create the Feeling of, you know, fear that I achieved here. So pretty simple stuff. Nothing too complicated going on. Now, there is another one which has a lot of different examples of emotion as well. Or let's just say that simple emotions but represented in different characters, posies. So this is the animation. Let's just have a look at this first. Now, the client only provided me the character design. So basically, there is this body layer which is getting animated. After that, we have the arms getting animated, which are parented to the body liar. You can see that the key frame are offsetted by one key frame because it is a character animation rule which is known as follow through, that one part of the body moves after another part. Okay? And that's basically it. And the most away part from the body is the s, and that is why those are actually animated or, you know, added like this. Okay, so pretty simple stuff. Nothing too complicated going on over here. Now, you can adjust this animation a little bit more. For example, if I wanted to more exaggerate the ear motion, I can drag this one key frame ahead as well and notice the difference here. But it was getting too much, and one key frame does create a difference. So you can test this out in your animations and you will see the difference and impact of your animation. Okay. And other than that, the rockets were not provided by the client. So I just created these rocket animations by myself. Pretty simple lopable animation. Now, how these are created is pretty simple as well. So these are basically just brust animations of different stroke lines. Pretty simple. Now, the main focus is on the rocket. The rocket is basically shape layer. So two parts are actually inside one rocket. Okay? So both shapes are inside one layer so that I can animate it more easily. And then there is so much booster coming from it when it starts. Okay and remember that we are in a fictional world, so everything does not have to look super realistic because this character does not also exist in the reality. So you have to keep these things in mind and you are open to try out some wild ideas. And after that, there is just this small line behind it, okay, which is getting trim path, actually, animating. Then there is this motion arcs, also, which is just a line, which is just creating this effect that the motion was too fast and there is kind of a flame behind it, which just goes away when it is getting animated. And then after that, there is basically just simple squash happening on the scale as you can see. First we start from the zero, zero, then we go to the 58 and 108 because it is squashed a lot. So it's stretching a lot, and then we squash it as if it's brusting into the energy. The same principle applies on all of these three. Now, I created the confetti animation in a separate file, which is here. Now, why I did it was very simple. I can create multiple variants here. As you can see, this is a green one. You will see that there is confetti version two. You will see that there is confetti version three. You will see there is a one which has gray and purple color, and there is also one which has yellow and purple. So I can just drag and drop these, and every animation is parented to the null. Also the rocket, by the way. So if I move this, the rocket may also move. Maybe it is a mistake by my end, so I apologize for that. But the entire animation were actually animated or parented actually correctly. So it should have been parented as well. So I should just parent this, okay. And that will be basically it, and then I can just move around everything and then everything will work. Yeah, you can see that this one is parented correctly. So if I move this one around, you can see this what I can do is I can create multiple variants of the animation, suited to my character needs because the character is not standing on the same place in every animation. So I might have to adjust animation. So why create the animation again and again? In this one, I had to add the accent color, which is yellow over here. And because the yellow was in the center and the character was, you know, in a different position, I just moved the sparkles to different locations. And that's basically it. The same thing has been done in multiple other poses as well. So same confetti animation, but with different character animations, giving that same impact, and you can see it looks really, really beautiful. The animations are really loopable and the requirements were that the animation should be two to 3 seconds, so depending upon what felt right, I made the loop on the basis of that. Okay, pretty simple stuff. Really nice looking animation. And this project is by givers, actually. So there's a company out there called givers and these character animations were created for them. Let's just go ahead and have a real quick look at the rest of the animation. So pretty simple stuff going on because the character is feeling jolly. So very simple animation. After that, we have the character animation. Now, this one is really important to showcase you something really, really simple, which is, you will see that there are multiple variants of this animation. There is this three second. There is also this six second animation as well. You will notice that the character design also changes its colors. Now, why I added this subtle deedle? Because it adds so much story and meaning. Givers is basically about donating or helping people out in difficult times or taking care of old people. So basically, our character is representing the gray, and a gray basically means that there is lifelessness and there is no happiness. And once the character is hugging the other character, you can see that it is feeling the warmth. Oh, these things actually suddenly also consciously communicate a lot more detail and a lot more meaning into the animation. Now, this was not requested by the clients. You have to create all of these extra details to give much more meaning and depth to your animations. Okay, let's move ahead to the next one. Now, this is really simple one. This is basically going to be sitting on the CTA, so called to action animation, okay. So pretty simple. They do not need the sparkles or the confetti on this one. After that, we have the guy who is basically shouting or saying, Whoa ho ho. You know? So basically doing kind of a celebration. Or maybe they can just add this basically on when they are basically having a sale, they can use this in their GML marketing as well that the character is shouting, Whoa ho ho, and they can put a bigger sticker, 40% off with it, and that is going to look really, really nice. Okay. And then let's just move on. Okay, this one is really simple. This is also kind of a CTA animation called to action. So basically kind of waving on the footer maybe or on the welcome screen. So pretty simple stuff. These kind of character animations can be added in the onboarding animations as well as you are logging into your app as well. So really nice stuff. And now we have the last one, which is basically just spreading love or spreading happiness. Yeah Okay, so pretty simple animation going on here as well. There's a bit of animation on the mouth layer. Now, I basically grouped and merged all of these layers together because it made more sense to just animate these together instead of just, you know, the whole thing could be breaking out. The teeth could be moving in another direction or the misalignment could happen a lot. So I just merge them together, and basically, it does a little bit of smile with the scaling and position as well. Pretty simple stuff. The arms are animated to the body as done in all previous animation. So pretty simple stuff. Nothing too complicated going on here as well. And I hope you learn something from this project. So that's it for this class. I will see you in the next one. 4. 03.Solving Hidden Issues: In this class, we are going to figure out how to use AIUXPlugin instead of using overload. Now, we touched it a little bit in our previous class in the intermediate one, so you can learn how to install it by following that. And after that, what you can do is, let's just go ahead and discuss all the details. Now, let me just go ahead and show you one important thing. If we go overload battle X, let's just search for that, and you will notice that there is this tool, which we have discussed before. Now, overload has released 2.2, actually. So overload two point oh has been released, but it is $75. And if you have to update, and if you want to update your plugin, you have to pay additional money. Now, there is a better alternative, which is AEUX and it is completely free. Now, there were a lot of issues in overload 1.2 there are also a little bit of issues in using AEUX and let's just go through those as well. Now, overload has its own place. It offers a lot of new solutions as well, and there's a lot of stuff that it can do. It can transfer your work from Photoshop as well, but that is not our primary focus in creating UI animations. That is someone who is creating a stuff like this maybe with some textures and stuff like that. Okay, so let's just go ahead and look at AEUX. We talked about this previous but let's just go ahead and look at this AEUX is on Github. You can just download it from here and read how to install it, pretty simple stuff, nothing too complicated. And what you can basically do is, let's just go ahead Figma and let me show you how you can use it. So basically how overload works. Sorry, my BD, the AEUX how actually works is basically is pretty very simple. Let's just go ahead and create a few different layers. And let me just copy some kind of image. Now, this is an image. So let's just copy that, d it over here as well. Okay. Now this is really important that the work that you are trying to transfer should be in a frame. You have to right click, go into your plugins, go into development, and go into AIUX. Once it is opened, what you can do is basically you can go ahead and just hit Send selection to AE and then it is going to ask you for a folder. Let's just go ahead and create a folder, which will be our AEUX testing. So let's just select that Okay, you can see that the image has been added here as well, and you can see that the shapes are also added as well. Now, this works really well with gradients as well. You can add gradients, transfer those as well. It works really, really well. But there is one really important thing that you have to keep in mind when you're working on client projects, which is you have to go into the extension, hit the AUX. There are a lot of settings over here that you have to cover. You can select the option that it will create a new compare automatically. You can add image safe path as well. I have not selected any folder, so it requests me a new folder every time. You can choose the frame rate as well of the new comp, which can be 60 as well, which can be 24 as well. Comp duration should be around 60 seconds. Now, why? Because sometimes it has made me regret that why my comp size was actually shorter because the client asked me to slow down the animation. And if what actually happens is the client has so many layers or so many complex animation that is going on or their character or their artwork has so many frames, actually, or if the animation is actually created using autolayout, then there are multiple frames. Every frame that has been added here actually translates as a neo comp. Inside After Effects. Let me just try to retest it. Maybe that will work. Yeah, you can see this. This frame is actually added. Now what actually happens if the animation starts from here. But the client has requested that the animation is going to be now 10 seconds long, but your comp size was 5 seconds. What you can do is just hit Control K and then just basically change the duration. Pretty simple stuff, nothing to complicated, right? But but, but, but. The important thing is if you have multiple frames inside this mainframe, then what actually happens is inside this frame, there will be another frame. So basically, another pre comp. You have to open that, and then you have to basically drag out the layer. Then you have to open that, and then you have to also do the same thing and make it longer. So why go through all that effort keep it 60. Simple as that, this does not increase the file size anyways. So no harm in doing that. Detect shape parameters should be checked. Now, it says pre comp groups. Now that is completely your choice, but I do not recommend it. And there is other stuff that you can pre comp groups as well, not recommend it. After that, you have un precomp, which is in this case, for example, you can select this and hit un precomp. And this is really useful. Sometimes you really do not want to do this because there will be over 100 plus layers. So you will be confused a lot that, what should I animate and what is which layer. So you have to keep those things in mind. There are also some additional things to keep in mind, which is sometimes when you transfer a complicated artwork, there will be some weird guide layers added here as well, and there is a real project that I want to showcase you. But unfortunately, I do not have the Figma file for that project. And what you can basically do is once that is happening, you can just Google guide layers visibility off and on, and you can select those and then just delete those as well. Simple as that, and the system tab is basically nothing, so just leave it. Pretty simple stuff, and now we have gone through this. Now, what are the advantages of using AEUX? As I mentioned, it's completely free. I mean, that's a huge plus. The only problem is the pre comp issue that I just mentioned to you guys, write this one, and you can resolve it by just keeping the comp duration longer. Other than that, there are not really that many issues. Sometimes one in 100 times, there would be a very, very weird issue, and we are going to deal with that as well. But let's just first go ahead and look at our case of studies that how I created different types of animations using this plug in. Now, this is how the AEUX actually sends the data into your folder. This is a client project and the file actually had so many gradients, you can see the individual layers over here. This is not really as complicated because first of all, this data is already added into your file, so you don't really have to worry if there's a lot of weird stuff going on here. Just ignore this stuff. Also, you have to keep in mind that if there is a layer that is turned over here, for example, like this, the AEUX is still going to copy and paste it over here. So that is why there are multiple instances of the same layer. And you will notice that some layers have really clean names. Now that is actually exported manually by me. Why? I will explain that now in a minute. Let's just go ahead and open the file and let me show you a much more complex project, and let me guide you through it that how you are going to in these case is optimize the file. First of all, you know that we cannot use freedom gradients and you cannot also add multiple style layers which are actually available in Figma. These actually do not translate really well into After Effects. And if these translate as well, you cannot actually technically export it for every platform. Every feature is not supported, as you know, dropshat is not supported on IUS, so keep those things in mind, right? And you have to cheat code around those things as discussed in previous classes. So basically, what actually was happening with this background is a separate story, and I'll talk about it in a bit. Let's just look at our capsules. You can see the capsule is basically just this nothing animating over here. I just decided to animate everything here by just adding everything to a parent null, and then that is animating. Yes, you can see, pretty simple stuff, and these dots are basically just following a path. Now, how to create this is really simple. What you have to do is basically just create one key frame on this path. Copy it, read the key frame. Go to your shape layer. Let's just create new one real quickly. Let me make the fill red. Let me drop this. Okay. And let me go to the position. Hit. Now, the first keyframe must be selected and hit Control V. Okay. And if this does not copy, actually, it should, but let me just look into the detail on how to do it. Okay, so once you have copied it, you have to just paste it over here, and you will see that the path has added and also the keyframes are added here as well. And you will notice that it is following a path. Now you can definitely make it in the other direction as well. So let's just go ahead, press halt and do it. Now, after that, you have to take care of these middle keyframes and you have to convert these into K frame interpolation to make it linear and rove across time, make it lock to time. That's it. Do the same thing with this one as well. So or you can just hit rove across time to off. I'll make this linear. Okay. And then maybe I have ruined something. Yeah, I think I have ruined something. Let me just go ahead and check what is actually that I have done wrong. Once you have copy and paste the keyframe, you might have to adjust it. Okay. And after that, what you can do, there are two things that you can do. First of all, what you can do is basically put your path and match it like this. Okay? And then you can put your shape like this, using the plug in. Simple as that. And after that, you just have to drag and drop it wherever you want. Simple as that, nothing too complicated. Okay. And if you have curves in the path, then you just have to tweak those, and then you can just create the following animation. Simple as that. The same way I did the line animations. And then there is just this capsule animation going on. Now you will notice that the animation starts from genetics. And it ends on the genetics. Now, how I created this is really, really simple. I just duplicated the entire, you know, you will see that some things are more than one time on the timeline. For example, the watch once here, the watch is again here. Okay, the same way, I just created enough spacing and created a scroll, which is above here, and I can drag it to show you as well that everything is same, just create it twice above. Now because these are pre cooms it does not add additional data, and these type of decisions actually optimize your files. Simple stuff, but it has to be done with care. Now, the background had some issues and it was not actually transferring correctly, so I just had to go there in the file, turn off everything, keep only one layer. For example, this layer only turned down, turn of everything else, or you can just select this layer and just hit Export. And if you want to only transfer this layer, then just select it, hit Export. That's it. Then you can go ahead and what you can do is this is really important as well that you just before starting the animation, click this, export one key frame, and name it as a reference and then put it in your comp as well on the back. And then on top of that, you can notice if anything is misaligned or something like that. Sometimes there would be an issue which we are going to discuss. As we have covered this one, we will cover that other detailed mistake as well, which happens in some projects. But before that, let's just go ahead and have a look at other two animations that I created for this project. Actually, there are three, I think. So again, there are multiple images. Same cards, same images, simple stuff. Again, the loopable effect, the liners are created, everything is inside those moving in the opposite direction. Simple stuff, nothing too complicated going on. Okay. And yeah, that's basically it. And you can delete these additional layers when needed, but if they are turned off, they do not actually export. So it's a win win either way. And you can see this is the final comp where everything is rendered. Okay. And you will see that this is our frame, again, the same issue with the gradients or something that I was facing. So I just did the same thing. Also, another thing which is really important is that I use the same sizing of the mask as well so that everything trims down out of it. Okay. And because the requirements were these, the client needed the animation to add these negative spaces. That's why I added this. Otherwise, I could just drop it down as well. Pretty simple stuff, same cards, kind of just animating. Let's just go into the card compat so you can see it as well. So three cards, okay. And then I basically just duplicated those cards with same spacing. So let's just go ahead and you can see now that where this card actually starts. Okay. Pretty simple stuff, just duplication of the layers to optimize the file sizes. That's it. Now, let's just go ahead and have a look at our third file. Now, this is let's just open. Okay, so this one actually had some issues, and let's just go over this as well. You will notice that this is a stroke that I actually had to create here. Now, because sometimes the gradients are actually messed up. For example, if you're adding a simpler gradient, I have also really noticed, which is kind of really strange that when I receive these type of files from client, only then I face these kind of issues. There is another project that we will discuss really very soon in this class, which is the cryptaPject. Now, this is from a designer known as Gacofz. We have collaborated on some projects. He's a really amazing designer. Does some really great framer work and does some really great design work as well. So you can check their work out as well. And once he designs most of the stuff, I have not really seen much issues other than the issues that we faced in these projects which we will discuss. Other than that, when I work with the client projects, I have noticed that there are multiple gradient issues that the gradients are looking perfect here. But when I transfer them into AE, I kind of see very, very strange issues. You will see that there are no issues here, right? The gradient has come here really perfectly. But sometimes I just have to recreate the layer. I don't know why this happens. There is no such explanation regarding it because it's just kind of a tool which does not have much support. So it's just a tool that you have to just work with. But it's a free alternative, and I worked over 100 plus projects with this tool, and it works really well. So that's why you know, requires to be created a separate class on it. So pretty simple stuff created over here using the same technique. The gradient is basically really simple. The opacity is fading away in the lower corner. Let me just go ahead and show you the gradient. And let's just look at where this is. Yeah. You can see the gradient points. Actually, yeah, now you can see better. See? Pretty simple gradient. Nothing too fancy. You just have to sometimes do this stuff manually as well. I know it can be sometimes problematic, but it will also help you improve or get a better designer, and this will also make you stand out from the crowd and make you become the top 1% creator as well. So this is basically to explain and show you guys that problem solving is actually a huge aspect of doing these animation as well. You just not have to add keyframes. You also have to keep in mind of these things, and how I have created the offset animation is pretty simple. However you create a simple loop pebble animation, you just create three keyframes. You just copy and paste them again, and then you basically just offset them. Very simple stuff, nothing too complicated going on here as well. And the background is basically just an image. The same way I had some issues with this one as well. So just add a image. You can see that I have added a mask because the corners were needed to be rounded, but you know that the comps are actually square in every composition software and everywhere. So that's why I just added a rectangular mask to fix that problem. Okay, pretty simple stuff. Because when I was actually transferring this from Figma, it did not have mask, so I just had to add it and the corner radius if there is any added in Figma, it does not actually translate. To After Effects as well. Let me just try and show you that as well. I think that this does not work well. Oh, it does. So because maybe it was actually addted on an image, that's why it didn't work. But anyways, just to keep things in mind or keep things tedious, this is just a technique to have in the bag. So now let's just go ahead and cover something that we haven't actually discussed so far in any of the classes. So let me just go ahead and show you a header animation. Now, what is actually a header animation? A header animation is something that is displayed on the top of a website, okay? And in this example, the animation is pretty simple. Basically an AI just talking. Simple as that, we have created chat animations in very, very detail in the intermediate class and in the advanced class as well. You can check those out. So pretty simple stuff going on. Let's just see what is different over here that hasn't been discussed before, maybe. Okay. And there is another example that I will be covering really soon in this class that is going to show you how you can create actually live systems that go into different sections of website. Okay, so yeah, you can see there is basically this half card. Now this is locked, I believe. Yeah, this one seems to be it. Yeah. This one is a bubble. So basically the same way that we did animation before in the previous class, everything is inside animated here. Same thing, M stuff. These are just images, simple stuff. Now you can see that what I discussed earlier, you can see that there are comps inside coms inside coms, right? Now this is where you can get into trouble if you have to make your animation longer. That will go in every comp and increase the file side and then stretch out the layers. We really should avoid this type of extra work. Okay, so this is basically the animation. Nothing too complicated going on here as well. Pretty simple stuff. And this icon is also just image as well. Okay. So what is actually header animation? Let me just show you a project that I created. I hope that their website is live, yes. Now, unfortunately, I cannot really locate the files, maybe these were actually deleted when the data got corrupted in my other drive. But you can see the animations over here. Okay? So this is basically a SVG design, entire SVG design, and then just animated on top of a mobile image. Then there is this whatsapp messages, pretty simple to create. And you can see how much value it adds, right? And basically entire workflow animation that you can see. We created a very similar animation in advanced class, so you can check that out. And that's basically it. That's how your work is going to look. And the colors, the concepts are really going to matter. So please try to keep these things in mind and take care of good branding of the brand that you are working with. Okay. So let's just go ahead and let me show you one other really good guess study. That I created. Okay, so let's just go ahead and have a look at this. Okay, so let's just go ahead and have a look at a local be brand that I created animations for. Now, in this project, I did something really amazing and really interesting. Let me just go ahead and first show you how the website actually came out. Okay. And this is actually the website of a live project. So basically the business is live. Now this is really interesting. And what I did was for this project is that I created the logo as well. I did the design of the logo. I did the entire design plus the animation as well. Okay. So there were just two colors only purple from the brand and then green that I added as complimentary color. And you can see the animation is running really smoothly. So this is basically something which is known as header animation. That basically explains most of the product, right? It is self explanatory that what the business does. And then we have all of the designs were done by me, and then we have these workflow animations, right? Very simple stuff, but really interestingly done. And then we have the Google Business icon, which is basically getting boosted up, right? So basically, once you choose a plan from the platform, what you get is if you notice you buy you scale up, you have so much analytics, sales going on, you go from this to this, so a lot of growth happening because it is about a storytelling, right? When you have complete freedom over the project, this is the type of work that you should create. And this is the type of services that will get you stand out of the crowd. And then you can see this really nice loupeb animation. Right? Then we have this footer, which basically shows what Local B is going to do. Now, all animations are lot compatible. You can see that nothing too fancy is going on. There are no special effects, but still, you will see that the animation looks really beautiful. It adds so much meaning and life to the website. And that's basically how you can make brands stand off of the crowd. You can create some amazing work. And once you have created something amazing like this, what you can basically do is you can create nice case of study out of this and showcase that to the world that this is what you are capable of doing. Okay? So basically, these are all the animations and we'll just go through them, real quickly because the designs were done by me, so there's not really a lot of trouble in those scenarios. Really simple stuff. When the B basically picks the logo, the path has been cut it down. It is a pre comp. The layer has been trimmed down because now it is parented to the logo itself. And the logo is basically precommed and animating like this. And I just add the position key framing on the precomp, pretty simple stuff. Nothing too complicated. Okay. Right. Pretty simple stuff. Okay? And then we have the other one. Let's just have a look at that. Okay, so this is the design input from Illustrator. Now, you will notice that the fonts are actually I used a font which I had in my computer, so I just didn't have to convert these because the texts were not animating as well. And the focus was only on the elements. So the text is only appearing with opacity, so we don't have to convert these into She players. That will be extra work, no need for that. Pretty simple, like an animation over here. Just some scale up really nicely. Okay. Let me just show you the keyframes. Pretty simple scale up animation. Nothing too complicated. After that, we have the arrow animation, which is dream path. We discussed this in the advanced course that how to make the arrows optimize. And then we have the AI bot. We have the SEO, pretty simple stuff, right? But so much meaningful and really fits into the whole brand style. After that, we have the Google business boost. Let's have a look at that. Okay, so this one is a little bit long. So there is this whole journey going on. So we go here. We pick this package. Let's just go down. Now, because I want it to I was basically one element is basically connected to other elements, that is why all the work is in one composition. And I was having fun animating it, so I didn't really paid much attention to adding precams over here. And also the client was really, you know, willing to trust me. He did not ask for much revisions. So that's why I was confident that he would love it. So that's why I just didn't add precams. Yeah, so pretty simple stuff going on over here. Then basically this line comes, and I think it will be some trouble to find the line. Yeah, I think. Let me just try to find it. Maybe this one? Nope. Yeah, this one. Okay. So the line design is simple, but it is just the other line is basically separate. Okay? So it just streams out the end and then we reveal this one and the logo is basically just following it. Now, all the gift frames are added over here because the same layer is actually going through the whole journey, so I did not have to pre compit because it is single layer. If I pre comp it, it is the same story. So nothing different. Then we have this the lines actually had some taper effect. No, I did not really want to compromise this, and that is why I just animated this via mask. Now, it is some extra work, as you can see, but it is definitely worth it because the taper effect on the line looks really nice. And that is why I had to expand the layer, because you cannot add taper effect on Lottie. And then we have this line, which is also a taper line. Simply animated. Then we have scaling balls, dots. That's it. Then we have the numbers scaling up really subtly. So our entire focus is over here and we have the analytics rotating in. Simple stuff. Some random scaling animation over here going on with some offset to the layers. So it looks really nice, right? So there is some offset offset can be achieved by this. Pretty simple, right? Then we have this animation right here, right? Pretty simple stuff, scaling offset again here. Simple stuff. Now, really important thing to keep in mind is that now we have two fields on the layer. So to basically reduce the layers in your comp or clean it up a bit, you just can select one or two layers, drag like this and then just merge them. This does not affect the layer in any way. And then simple as that. And after that, we have the Google review. Let's just have a look at that. I think this is the header animation, the most impact. Yeah. So now you will see that first, I created the animation in the Google format, right, in the Google colors. But the client really wanted the brand touch, right? So that's why I recolored simple as that. Pretty simple stuff. Nothing too complicated, right? And you will notice that the green, the yellow, everything basically the yellow basically matches the Google. The purple is from the brand. The standard rule is basically when you're adding color is that you should go into your, I believe, hue, and if the number is over 150, you should minus 150 from it, okay? And that is going to give you a very complimentary color. If the number is below 150, you just add 150 to it. That is going to give you the perfect value. So just a design tip over there. Now, this will be really helpful in creating really nice contrasts. And the client loved it. So I said, why not? Let's just go with it. And that's basically it. And if you're thinking about how the animation is created over here is basically just some overshoot on the layer with 120 scale, and then we scale back down to hundred. Same animation on every layer. But just add it with a little bit of, you know, offset. You can see the offset here, right? And then there's just these Google reviews popping out, right? So one after another. So this is basically just Google reviews getting boosted, you know, they appear and then they just go into this and then we have the rating go up. So we are basically just telling the whole story. And all of these are actually just apparently to their own nulls, and then those are just nulls being moved via position Krames. So these are the things that you have to keep in mind to just optimize your files. You can customize them later or you can just basically now when I'm explaining this to you, I am not really having a difficult time animating a stuff like this. But if you are working on Figma file that I really showed you on the previous client project, it is difficult to animate those and also keep arrangement of those files. So keep that in mind. And if you get into struggling that which layer is wag, then don't worry. I have also been there and you will learn with experience. Trust me. Okay, so after that, we have the logo animation, okay? And we have the logo animation in multiple formats. Let's just show you the gift animation because there is not much going on. Pretty simple stuff. Nothing too complicated, just some squash and stretch, a little bit of animation and overshoot on the antennas of the B. Pretty simple stuff. And the same animation has been, you know, offered in multiple sizes, and you can see that. Same animation, but different sizes. I just created this square version and then just put that pre comp everywhere. Simple stuff, really useful and saves a lot of time. Okay, so that's basically it for this class. See you in the next one. 5. 04.Error Solving: Okay, so in this class, we are going to discuss how to troubleshoot some errors that you might face and you do not get an idea how those issues are being created. So let's just go ahead and discuss our case of study, and let's just look at some of the errors that we were facing. You can see that there is some text ratio here, there is some text ratio here, and there are some text issue all over here as well. So how to fix this. Now this is really surprising that when I actually exported these files from my After Effects, there were no issues at all. What do I mean by that is when I exported the animation, what I actually was seeing. The animation inside my preview was completely perfect, okay? There were no issues at all. The animation looked perfect. The animation looked perfect here as well. There were no issues. There wasn't even a single issue that I could see here. And the first time this actually happened, I was really scared a lot because I couldn't understand why this is happening. I don't get it because the client was complaining a lot. So this is how you actually fix it. So basically, let's just go ahead and import our asset to first understand what was actually happening. And then we will learn the methods of troubleshooting these actually. Okay? So let's just go ahead and add our graph. Let's just close this project and import this one. Okay, everything is added over here. Okay. So this is the layer which was causing issue. Okay? And let's just go ahead and create a very simple animation. Okay. Let's just animate this layer only. So pretty simple animation. That's it. Let's just try and explore this. By the way, we discussed that there would be some group players, and you can see those group players here as well. Okay? And let's just go ahead and you can see that the group players can be disabled or enabled, as well. Okay? But these layers do not have any data. Nothing is on them. And what you can do is basically delete group players. And your composition will become clean. Okay, so we have covered this feature as well. Now, let's go ahead and refresh. Click here, click our graph. And now just hit test. Let's just click current renders and you can see the animation. Perfect. Now, I cannot really zoom in over here, but you can see that there is no issue over here, right? Now, this is where the problem solving comes. You have to go on Google and search for Lottie preview. Okay. There is LottieFiles Preview. You can open that. There's LottieFiles from Lottie and then let's just try to find some others. Let's just try to find multiple, okay? Because the more the better. So let's just see Okay, and now I'm going to go here, click on Mets Jason, drag it here. And you're seeing that there are no issues happening over here as well. Now, because maybe I fix the layer actually in Figma, maybe this is exactly why this is not happening. No, no, no, no, I think it is happening over here. Let's zoom in. You can see there is this issue, but this is not actually getting detected in our animation, which is kind of strange. Now to fix this, let's just go ahead and also let's just see if we can test it on some other platform as well. Okay? And so this is basically plug ins or leave it, and let's just hit plod animation. Let's just drag and drop it. Oops, not working. So let's just go ahead, copy our path, paste it here, and then hit test. You can see there is issue here as well. And then let's just see. Now, let's not use this, leave it. Okay? So you can use these Lottie previews, different of multiple styles of them and multiple websites, and then test your animation. And it is highly, highly, highly recommended that even if you are confident on your animation, it will not take more than 2 minutes, test it for the sake of better clients and doing some extra ordinary work, putting some extra value out there, okay? Because that is what's going to make you stand out of the crowd. Okay, so now how to fix it. There are two ways to fix this actually. Now, these issues are actually caused by a very simple thing. There's one solution which is you can click on the layer, right click and create shapes from text. Now, that will fix the issue. Now this is solution number one. Let's just say that there is a whole paragraph, and that is going to lag your system. You want to keep the text layer actually preserved. What you can do is double click over here and then you have to just rack the bottom box out like this. Okay? And you can also make it drop like this as well a bit. Okay? And then let's just refresh. Let's just hit our Export again and let's just hit test again. Let's just replace our file. Let's hit Render. Let's just wait a minute and see how this turns out. Okay, so the file has exploded. Let's just go ahead and test our new file. Let's click here and let's just the Lottie Lab one. Yeah. Let's just drag and drop our file. Let's zoom in and see, our issue has been resolved. Pretty simple to do nothing to complicate it, but just a way to fix a very complicated issue that you might not actually find the solution on the Internet, and this has been only learned via experience. Okay. So another issue that you could face is when you have actually now this typically happens when you are working with gradients, not with solid layers. What actually happens is let's just say that there is this gradient or let's just say that there is this shape layer, okay? And we have a really nice color in the gradient. Now, basically what actually happens is, let's just drag it into a frame. Let me just go ahead and put it over here. Okay. Let me just send it to After Effects. Now what is basically going to happen is sometimes the gradient looks really nice over here. There are no issues in your design, and everything looks perfect. Okay? Now, when you are actually exporting the file, when you are previewing it here, the file is going to look perfect. There are no issues, but when you test it on the website, you're going to face some really weird issue. For example, this red rectangle is going to be orange, or this is going to be really black. And you are just puzzle, you are just going to come back here, check the colors, and see if you have added any maybe gradient over here. But there is nothing. There are no effects, nothing. Everything's perfect. In those scenarios, what you actually have to do is just delete the layer, okay? Just delete it. Do not remove the field, add another fill. No, that is not going to work. It is just kind of a glitch in the code because it's just dot Json file is basically dot JavaScript file, right? And there is some kind of a code glitch that actually happens. So what you have to do is basically just create pick your rectangle tool. Okay. Go ahead and create the shape. And then what you can do is if you have trouble copying it from here, then just go into your figma, click on it. You can copy the value from here. Alt click here. There's the value here. Hit Okay. Let's just fix our gradient real quickly like this. Or sometimes this also happens that the positioning of the gradient is also messed up. So in those case scenarios, you should use this method instead of just rearranging the gradient because sometimes that is not going to work as well. You're going to just copy this color as well, click over here. Then just just the value like this. Pretty simple, not too complicated. And if there are really, really complicated gradients and you cannot really recreate the gradient or if there are multiple colors added on it, and that is not basically possible to add here, maybe there is a blur coming from this direction, there's a blur coming from this direction, stuff like that. Then just go ahead, click on the layer, export it as a PNG and add that PNG. Okay and try to communicate these things with the client before proceeding because you can just tell them that it's a code error not your problem, and you are not the one that is not expert, actually, but you actually know how to fix the error. Okay, so this explains it. And now regarding the Cryptia animation, there is something that I should show you. Which is this header animation. I think this has the animation that I want to show you. Let me just make sure that is this actually the one? Yeah, this is the one. So Geko is really intelligent regarding this and the way that he did the designing because we actually discussed this before that I will have to animate the numbers as well. So basically, he just created everything in 11, one, two, two, two, three, three, three, four, 44. Now, there are two ways that you can recreate the number animation is basically you can go ahead and simply just copy all of these and put them in a frame and then just take it into your After Effects. Then just convert these into shape layers and then just offset them like this. One solution. Another solution is also pretty simple, not really too complicated. So let me just go ahead and show you that as well. First of all, let's have a look at this, and then I will show you the solution. The number is here. After that, we have the 10561, 794 you can see everything is going above to match the numbers which are necessary. Pretty simple. Okay. Nothing too complicated. And there is another a bit of a shortcut way to do this, which is, let's just close this. And let me show you how to create the number climb animation as well. Okay. Let's just go ahead, click on the text layer at 5,785. Okay. Now what we are going to do is basically go into the let's just go ahead and use our Effects panel. Okay. And then we're going to just make it bigger. Let's just go ahead and search for slider. Okay? Now I'm going to add this slider control over here. Now you might be thinking, how are we going to make this work? Pretty simple, do not worry, we'll get it. And what I'm going to do is basically parent this to my slider. Pretty simple. And then what you have to do is basically add dot math round. That's it. Okay. And if there is an error, what you can basically do is screenshot this part because I do not work with too many expressions, so I may get this wrong. You can go ahead on the web and just copy and paste this and just ask fix this expression. Okay? Okay, so you need to add a dot value. Now, it says, It rider control dot value, let's just copy it. Let's just see if this works. This works. Pretty easy fix. Okay. Let's just drag it. Wow. This works. This works really well. Now, let's just say that our number was I don't exactly remember, so let's just look at here 5785. Okay. Let's make it zero. Click on the key frame, press U, and let's just consider that my animation needs to be 1 second long, five, seven, 85. Right simple. Okay. Pretty simple. Let's just hit on our keyboard. Now I'm going to have to go ahead. Now, let's just right click over here, create shapes from text. Go ahead, one keyframe, do the same thing. Go one keyframe ahead, do the same thing and do this until we are done with all the keyframes. Okay, so these are created. Now I'm going to just turn off my layer like this because you should keep this layer in the composition until the project is not complete because the client may request that the number should be changed, so you can just go ahead and do that. And now I'm going to just crop the layers. And now we're just going to hit effect by pressing E. We have to delete these slide controls. Okay. And I think that there is a faster way to do this as well. So let me try that. Let's see if it works. I'm not really sure how it should be done. So forgive me. No, it works. So yeah, it works, and then what you can do is basically just offset the key frames just like we working on our previous tab. Let's go back to default and then just sequence the layers like this. Okay? So let's just have a preview of our animation. S, it looks really nice. And now because we only have nine or ten layers of shape layers, this will not lag. This will not increase the file size. It works really fine. I've done this multiple times. So this is something that I had to teach as well. And that's basically it. And other than that, there are just some simple animations that I can show you as well. There's not really much going on. Just some masks added to the same image, and then the flags are basically just floating. Simple stuff. Let's just go ahead and look at our next section. Okay, so the same number animation. I used the same card actually from the other previous animation her animation, and then just added that here. You can see that the animation of that is added here, and I just pulled only one part of that here. Then there is just this dream path line, some basic scaling or trim path animation on the lines, then that's basically it. Nothing too complicated going on. Pretty simple. After that, we have this other animation. Which is this one. Okay, we'll fix the issue here, so you guys know that as well now. After that, we had this issue on the text layer. You can see that I increase the size box because it was like this a little bit like this. So I just increased it a lot to fix the issue. Okay. Simple stuff, nothing too complicated. The animation is pretty simple as well. This has been done via character by character because there was not too much other elements. So I just made the text Shaplayer and then just offset everything one key frame at a time. That's it. Simple stuff. Nothing too complicated. And then just simple scale animation on this button. Okay. After that, we have this section six, which is this wallet animation. Pretty simply done, just a stroke on top of it. You can see it is basically masked out, right? Basically, the wallet was actually one single shape. So I just deleted the top part, recreated that with a stroke. So you might have to sometimes just do some little iterations into the design as well. When you are executing animation. Then there is just simple animation, right? Nothing too complicated again. And then I just add rotation animation and scaling animation over here. Pretty simple stuff, nothing too complicated. And then we have this really nice effect with the H effect, basically. So when this comes over, what is actually happening is this frame actually animates. Okay, let's just go ahead and have a look. You can see the opacity is basically increasing. So nothing too complicated over here as well. Simple stuff. Very easy to do. The cursor is basically just animating by itself alone, so independently, regardless of the other elements, right? Pretty simple stuff, and that's basically it. And in case that you are curious that how the final website looks, let me just show you that as well now. And you will see how optimized the lotteries are just in a minute. See? Now I'm opening this on incognior mode, so you can see how quickly everything loaded up. The animations are working really nicely, really smoothly, right? Pretty simple stuff really nicely done. See how beautiful this all looks, right? Simple stuff. And again, huge shout out to Jakafz for creating this amazing project. And it was a really great collaboration. And the percentage animation on these actually section is also done the same way. Same thing. And yeah, that's basically it. So that's it for this class. See you in the next one. 6. Outro: Congratulations on completing this final class. I hope that you learned everything that I teached here. Please do practice and let me know if you need any help. You can always reach out to me on Instagram. You can also check out my LinkedIn as well if you need any questions, if you have any confusions, if you need some help with the project, please reach out. I would love to help you guys. Please make sure to submit some work. And also tag me when you create something really nice. I would love to review your work as well. If there is something new out there to teach in Lottie then I would love to create another class. If there is something that I missed in the classes, please let me know, and maybe I'll create another one. But I believe that this covers everything, and now you're ready to become the top one person creator. Good luck to all of you and best of luck. Hopefully I will be teaching new other stuff as well, so stay tuned for that. But Lottie is now complete, and I wish you all the best. See you in the next one. Take care. Bye bye.