Beginner's Guide to creating UI Animations.

1. Intro: Hello everyone, and welcome to our lottiefiles you Beginners class. Before we start the course, I would like to first introduce myself. I am bolt Bite and I have been gritting lottieanimations around two years now. I have created over 100 animations, as you can see here on my profile. And I am one of the top creators at ratifies platform. And I am a official lottiefiles tournament winner as well. My animation has been downloaded over 20,000 times all over the world. And in this course, I will be teaching you how to create your very own first Lottie animation and get into it. 2. Class 01: What is Lottiefiles? What are it’s uses?: Welcome to cover first-class. Okay, so in this class we will be first looking at what are actually lottieanimations and why are we even bothering to learn it at all? So here we are at lottiefiles.com. And as we can see in the first thing that we see on the page is states as light, lightweight, scalable animations for your dogs and pitches, websites and mobile apps, or apps and ads and social media and everything. So the most important part is the website and mobile apps. Okay, So let me tell you how and why. First of all, let's just have a look here that how many big companies are working with Lottie animations. As you can see here. What does actually Lottie do? So let's just have a look here. Here it says the new industry standard. Let's just see. As you can see, there is an animation which is GIF format, which is 598 KB kilobytes. And there's a Lottie yes Animation, which is 66 KB kilobytes, and there is Lottie eight KB. So basically at nine per cent small size in file. So let's just say that we were to create a AP and there were ten animations inside. So why would we try to bother and create lottieanimations? And the reason behind that is, let's just say that when animation is 600 kB is like this, and we multiply it by ten, it becomes 6,000 Kb is, which will divide into 1024, because that's what is equivalent to one MB. It becomes 5.8 and b's, right. So that's really huge file sizes which will be added into mobile apps. And developers don't want that to happen. The creators don't want that to happen, that the file size of applications are just bigger because of animations. It's not a really good approach. And there are multiple reasons for that. Not only the file size, Let's get into that as well. So let's just say that instead of that, there were 66 scabies animation, but they were ten. So this will be only 660 kb, which is less than an MB. So there are apps like Duolingo and there is an especial mentioned of Duolingo here as well. Because Duolingo uses a lot of lottieanimations. If they were supposed to use GIF or GIF animations, the app sizes will be double or triple. It is really important that we keep that in mind as well. So, and there are multiple advantages of using lottieanimations. All, although there are some advantages as well. And we will get into that as well really soon. Okay, so let's just fire up our adobe Illustrator real quickly. And let me just show you what do I exactly mean by advantages? As you can see here, it says lightweight scalable animations for your apps and websites. What does it mean by scalable light with animations. Okay, so a scalable Animation means basically, what it means is me just show you really quickly. Okay? So as you can see here, there are two types of images, as you might know. One of them is raster image. So basically what is a raster image? Get into that real quickly as well by just go to over downloaded folder and we will open this collection. There is a JPEG file. Drag that into our software. Okay, so here's our file and let's just aside, okay. So when we try to zoom into the file, as you can see, just gets really pixelated and blurry, right? So basically, JPEG and PNG, all of these formats are raster image based format. But there is another format known as vector format, in which we zoom in on the file. The file doesn't get blurry. Now you're gonna, You might think that why does it happen? Actually, the reason behind this is because the vector format works on the basis of a path line between 0.8, between point a to point B. Whereas because the pixels do not debtor mine. Vector-based format, pixels determined the raster imagery which are commonly captured by cameras. Okay, so please keep that in mind. So, yeah. So basically there are advantages. There might be sometimes when you will create animations for mobile apps, which will be displayed over maybe these screens or maybe huge screens, or maybe mobile tablets. So basically you will not have to think about giving a different file sizes to clients. You'll just have to give them a one size and they can easily scale it up just like this. It's like I'm scaling this one up. As you can see, it does not get the right. But if it was a GIF animation, it will blur and turn out into pixels and really muddy animation. As you can see here, this animation is getting blurry, right? So it is not really efficient way. And the surprising part is that the bigger size is for the GIF format, which should be less, right? But it's not that way. Why does it happen? Actually, the reason behind that is that the Lottie animation is basically according file. It is basically a JavaScript JSON file. So it basically converts the animation into coding. And that's how the lottieanimations work. So basically, the vector format is being moved through coding. And in the next class we will learn lottiefiles can be integrated and how we can use them for our advantages 3. Class 02: Utility of Lottiefiles. Lottie creation tools.: Okay, We're back again and let's just get into the integration tab. And let's just hit Explore all lot Integrations and plug-ins simply your motion design workflow. Okay, Sorry, simplify your motion design workflow. So let's just scroll down and see what the Lottie has to offer. Lottie Integrations and Begginer's for are your favorite tools. Okay, so let's have a look. Okay, so as you can see, there are so many tools which are used for creating lottieanimations. And this course we will be using Adobe After Effects for creating lottieanimations. Now you may ask me that why aren't we using any other software? And the reasons are really very clear and I will tell you what are those reasons now, let's is open every tool inside a different tab. And let's just compare them real quickly. Okay, so let's just leave Adobe After Effects for now. And this is to any nicks, powerful lottieanimations within Figma, we believe that UI animations Should we created where you design them not in an external software? First of all, I strongly disagree with this opinion because that designs after has a different purpose and the animation software has a different purpose. Designs software cannot do both tasks very intuitively. And I don't recommend it because the industry standards do not work like that. The big companies do not work like that. And professionals do not work like that. Because expert animators will use expert animation tools to create really good animations, they will not use Design Tools. So please keep in mind that I'm trying not to use Figma plugins for creating lottieanimations. It's just not helpful. And you can really also use Figma now to create lottieanimations as well. But I don't really recommend it as well because there is not much creative freedom when it comes to easing the keyframes. Because Figma does not offer I'm Speed Graph or value graphs and basically provides a baseline curve line. So basically, that's it that you can control. You don't have creative freedom over every keyframe and you cannot create complex motions with it. So please keep that in mind. Let's just leave that out of the auction. Powerful 2D animation software for Mac and Windows. Now it says, get started, it's free. Now let's go to pricing. Section dollars per month. Bill annually. Prices excludes wet and applicable taxes and download for free and free forever no credit guide required. So yes, just see learning. Okay, let's just forget it as is go to feature design, real-time lighting for us to view. Bertrand thing is you're going to stay focused on being creative. Easy versioning, okay, that's good. Creative program. That doesn't add any value, I believe. End-to-end workflow move seamlessly from artwork into animation. And we'll get to best create from the ground of native features. We control rubber hose connect shares color palettes, magic, aging, text Animation, duplicate, data input. Lottie expert is proved. So we will be paying money for Dynamics follow-ups, quad tree. Okay, So there, there are some really good features. We can add some rig controls and we can use rubber hose as well. But there is a downside to using the software. There will be times when you will have to provide source files to the clients. And as we all know that Cavalry is currently not the most famous software out there for creating UI animations. But Adobe After Effects has a really good franchise of creating multiple things. Also. Another thing to keep in mind is that please keep in mind that sometimes clients will ask you to give them source file of the project. And when you tell him that you have created in cavalry, and they might not be able to edit it really well. And they will be based off when they have to purchase an extra subscription. Because adobe has been bought by thousands or millions of people around the world. So it will not bother the client editing them. Or maybe they want to ask their friends to edit it or maybe hire someone else. And most likely other creators also have more chances of having a subscription of Adobe After Effects instead of having a subscription for cavalry. So these are the reasons please try to keep in mind that we will be offering services to clients. So please keep that in mind. And also a huge reason. Another reason is that you can also do multiple types of other work in After Effects as well. You're going to create explainer videos. You can do multiple sort of work. But in cavalry, You can't do those things. Okay? So it will be limiting your creativity in that way. Okay, so let's move forward to favor or motion design within reach. As you can see, it also doesn't provide you a value graph. Basically, you will have to select every individual keyframe and then animate, it's easy. So basically you can just select two keyframes and then ease them. You'll have to work on them separately, or you can just use the both option from here as you can see, to create the animation. But I don't think that it is really helpful because you're going to use multiple properties and replicate. There isn't really quickly as we can do in comparatively in Adobe After Effects. There are multiple plug-ins that the After Effects have to offer, but these tools do not offer them as well. Also, let's have a look at pricing. There is $12 sperm per month bill annually, just to 56. Dfp is export. And you will be able to export Lottie as well for free as well. And the animation can be up to thirty-seconds. Thirty-seconds are really great timeline. And you can really try using this tool. But again, the source file issue will also be there. If the client asks you for that, you might not be able to give them a happy response. So please keep that in mind. You can go ahead and use it. But as you can see that there's just have a look at the learning platform. As you can see that there are not Much sources available. You can look at thousands of tutorials on YouTube for After Effects as well. So there will be more, a more accessible and easy tool to work with. In my opinion, is I would highly recommend to use After Effects for sure. Because of its huge advantages. You Effects Animation For designers and according glucuronide, okay, So this one is called flow, but it has some great issues. The number one issue is motion design perfected, create complex animations and interactive elements using layers and properties, not keyframes. So basically we will not be adding keyframes. We will be using coding. But that's a developer's job, not a animators job, right? So let's just skip it already. And this tool is called Black Sinemet. Um, I don't really think that it's going to offer what we are looking for because the limitation is only to give animations. And that's really not a good way to choose a softer just because we can only create, give animations from it or lottieanimations from it. So yeah, I don't think that because there will be times when the clients will ask you for creating some really complex animations. There will be times when the client may ask you some different stuff to do that you might have tricky time in doing this office than doing it in Adobe After Effects. And learning Adobe After Effects is really helpful for you or other skills as well. Because you will be, you'll be able to do multiple types of projects if you have learned Adobe After Effects. So yeah, it's basically providing a bonus as doing Lottie animations inside After Effects as well. So, yeah, I would definitely recommend that, those I will definitely recommend After Effects. Let's just go ahead and have a look at animator by Cu. As you can see, how go motion design for your team's workflow. As you can see here, you have to basically add true or false commands. So I mean, it's not really that difficult, but it's still a bit tricky to use if you are a motion designer because you are not a coder, right? So, yeah, I don't really recommend this one as well. There is in Inkscape and it has some really huge problem because now as you can see here, is there a video tutorial on how to use this extension that's already, there isn't a value to Dorian. So there is no basically a huge community around it, which will teach you how to get things done. Okay, So the next one is jitter. Jitter basically offers a lot of templates which you can use to create animations. But when the client comes to you and asks you to create custom animations for them, you might get into trouble. So I think you should be able to think outside the box and create something amazing by yourself. So, yeah, I don't recommend this also. This is go ahead and check the T-shaped. And now the key here is really useless because purchase on the Mac App Store, the biggest issue is only the Mac App Store. Another issue is only available in certain countries. So there are chances that your client could be in one of those countries where it is not allowed. So not good at all. Okay, so let's just leave it out of the question. And adobe Animate is only mostly used for frame-by-frame animation. And we want to be doing that in this course. So maybe it's a topic for another day or maybe when you are creating something similar to animate, are trying to create some really complex animations with which you can't get done in Adobe After Effects. Only then you will need this to work. Okay? So, and also please keep in mind that there are so much Integrations, but only lottiefiles have created a dedicated page for After Effects. So there must be a reason for that, right? As you can see, create a stunning animation with the lottiefiles plug-in for Adobe After Effects. They have also created a dedicated plugin for After Effects. So basically they also prefer their users to use we After Effects for creating animations. So basically you can test your animations inside After Effects without even uploading them, which is really good. So there are reasons to, to do this inside After Effects, Okay? So basically now you have to just download a plugin file and then you can just install it really quickly. I have already installed this plugin, so I'm not going to just install it again. So I will get back to you again in the next class in which we will discuss the Supported features and learn how to get started 4. Class 03: Website for designs. Arranging artwork.: Okay, We're back again. And as you can see, there is a website open on my screen. And it is called free illustrations XYZ. And here's another website which I highly recommend. It's free take.com. I would like you to sign up on the website. It's I would recommend that you buy the subscription and if you can't afford that, you can just always click the free filter. And the third website is vector for free.com. You can use these three Website if you cannot create your own designs. Because grading your own really good designs is, requires many years of experience and it will take time to learn how to draw those. So please keep that in mind. First of all. And designing logos or icons or illustrations is another Art in its own self, which takes hours of hours of effort and years of work to get done. So we will be downloading our design files and then we will be animating them. So when you are downloading a file, please keep in mind that you can only use three formats. One of them is AI, the second is EPS, and the third one is SVG. Please do not use any other format because they might contain raster image elements, just like we have discussed them before. So please keep that in mind that we're going to only use EPS, AI or SHA-512. Now try to download Figma or GIF or these files because they can't really work properly with lottieanimations. And the purpose of scaling up the animations gets ruined because the GIF DJ peg are not able to be a scale-up. And there are some ways that we can import these into our lottieanimations. But then the file sizes will increase so much and there will be no purpose of creating Lottie animations. So please avoid that. Okay? So yes, just have a look around and see what we can aim it for such on here that we should any mid year. Like there are multiple results as we can see here. So let's just choose something from here. Okay, so I really liked this one. These are really flat icons and I would like to download this one. Let's just free download it. Open the file. There will be three formats inside the file. Most likely there is jetpack, that is EPS, and there is AI. So we have opened the AI file. We will be selecting this one and we will now copy it and open a separate, awkward. It's size is 500.500 pixels. Okay, So yes, we are zooming a bit and we will ungroup everything. Please keep in mind that we have to organize over artwork in Illustrator before we animate anything. Base given mind. So let's just now separate layers in the background is separate leftist locket by pressing control to the term is altogether. You can also separate it. If you want to separate this. If you want to any make it separately. And now After this way is click have a selection. Layer is selected here I'm unlocking the purple circle now. So you just pick this layer and hit these three burger lines. Then we will go down to this option Release to Layers sequence. What it does is basically it creates every element into a separate layer. So basically every element is in a separate layer. Now, we will just bring it out from the parent layer. So everything is on its own. Okay, we deleted that empty layer. Basically. Now we have our thumb all in different layers and we can now animate it. Also, please keep in mind that we cannot use really complex artworks. We can only use simple fill color, and shapes. You cannot use really complex Effects like 3D or any other freedom gradients. Because we will be basically converting these layers into shapes inside Adobe After Effects. However you get into that in a minute. But yet, this is how you have to organize your artwork. And now we're ready to animate this. Okay, so we will know, save our file. And it should be in the AAAI format. Please keep that in mind. Try not to use sag because SVG can't be imported as a comp. Let's just save it by naming it like button and save it. Okay, so the file has been saved. Now, we will move into After Effects and start the animation 5. Class 04: Supported features. Animation creation.: Okay, We're back again. Now we will be animating our design. So let's just get into it. But before we start any animation, I have installed the lottiefiles plug-in and also logged in my account. You can do that in just by clicking here. There will be a login button and then you just have to login to browser. So before we get into any meeting, the design, there are some things to keep in mind before we do that, and I will just walk you through them now. First of all, as I told you that these Animation are basically lottieanimations are basically yes and animations. So basically they are coding files, okay? So there are some restrictions and there are some things that we can not do. And what are those things? Well, there are some really amazing features of Adobe After Effects that we cannot use at all. And you might ask me that what are those features? Well, those features are less is create a comp and associate men. This is create a rectangle. Or maybe, Okay, so what we can't use is just get into effect and less. Let me show you that we cannot lose any of these effects at all. First of all, please keep in mind that we can not use any of these Effects. Now, this might disappoint you, but there are some restrictions because the JavaScript does not know that there are Effects inside After Effects. That because these effects are not inside the coding, it's basically a creation of Adobe After Effects. These are not a universal log of JavaScript language. Okay? So basically when the animation is being played, like here on this website, it doesn't know. The JavaScript does not know that it has been created in After Effects or where else. It doesn't care. There are certain rules of every language which we have to follow. The rules are that we cannot use an Effects of Adobe After Effects. So let's just have a look which features we can choose and which features we can use. And also please keep in mind if you are gonna be really working as a professional, please try not to use some features which only have one cross and there are five ticks. Please only use features which have only green marks all over the graph. Now why am I saying that? Because there has been sometimes and I have witnessed it myself, that I've seen many animations on lottieanimations platform, which look incredibly good at PC or on web when I watched them on my computer or laptops. But when I log into my mobile app and I try to preview those animations, just don't work because people use, sometimes, sometimes they use alpha mats which we can't use and some types of extra features like offset paths or other stuff which works on the Windows but does not work on iOS or Android. So please try not to do that because, because when you're creating animations for people or your clients, the user can be on any type of device. So you have to keep that in mind first. You are solving their problems. You're not want them to think that how this aid yet created this animation, that it works somewhere, but it doesn't work somewhere else. And the developers will also think that you are not professional because you don't know how to get the job done without any errors. So please keep that in mind. Only use features which are renting. Now there are exceptions, but please, please 99% of the time, only use allow teachers on every type of system. Okay. So Shape layers? Yes. Just have a look. Shapes are all allowed. Las at angled rectangles. Polyester, polyester is not allowed. So our debt, we can group the shapes, so that's good. We can't use repeater avoided trim paths individually. Actually, I don't I haven't really taste any issue on on using Trim Paths when I use them simultaneously. So try to avoid maybe using them in individually. Now, I'm not really sure how does it affect, because I have tried to use many dimes print that's on my animations, but they always work perfectly and I have tested them on Windows as well. So let's just check now fails. We can animate the face in color opacity, fill rule, radial gradient or linear gradient. So these are all perfect. But we can't use any freedom gradient because the oxygen is not available inside Adobe After Effects. So please keep in mind that you can't use Freedom gradients inside Adobe Illustrator. Okay, so let's just go into strokes. We can use everything on a stroke or multi-joint and Online joins and line caps with opacity and gradients and dashes everything. Transform. Auto orient is not allowed and you can't really skew the animation. So basically, skew is not really a useful tool as well. We don't even really do that. So let's just avoid that and we will not auto orient the file or our layers. We're going to animate the position separately. X and Y is also allowed. Scale, rotation, anchor point opacity, parenting, parenting is really, really useful when animating stuff. And it is really useful when you are creating character animation. So this will be really useful in future classes. After that, there is interpolations of what does intro, interpolation means. Actually, interpolation means there are multiple types of keyframe inside After Effects. Now what are those keyframes as experience those keyframes. So these are basically linear keyframes right now that we're seeing. When we hit F9, then these become bezier keyframes. And when we hit control, or these become hold keyframes. And when we hit only control-click, these become continuous velocity keyframes. So basically all types of keyframes are allowed inside lottieanimations. That is the reason why I love After Effects and I want to use it because we can now really adjust this however we like. And there will be no issues in lottieanimations. And we can also change the graph as well. We can also edit the value in value graph. Obviously this is a position, so we will have to separate the dimensions here before animating that. Okay? So yeah, we can definitely do this as, so. These are the quantities that the After Effects has to offer to us. So again, just go ahead and check the masks. Masks are allowed but only for features. Subtract, Add Mask Opacity and mask path. So what does that mean? When we create a shape? As you know, we can create a mask from here, but using this tool. So basically we can animate this mask that like this. We can animate this one to create basically alpha matte style animation. Instead of using Alpha Matte, try to use masks. Please, please do not try to use alpha mats because they create really messy issues. So we can animate the mask capacity and use the add and subtract option on Next. From here, we're going to use the rest only add and subtract. So please keep that in mind. Let's go ahead and check the mix. As you can see, we can't use any of them ads because there are some cross or there are some question marks. So let's just leave luma matte out of the option and Luma Inverted Matte also out of the option on the alphabet and alpha inverted matte are available, but only in mobile apps. So users will have issues when you will use them. You, when users will preview your animations on Windows or any other web canvases. So again, let's go ahead and check the Much, but it is allowed everywhere on Windows, but not on the iOS. So let's just not use that layer effects. So basically layer, layer effects are only available to web animations, but not on Windows or on iOS and Android. So we're not be using those as well because you might create animations for mobile apps in future. And it is not a good habit to get to use layer Effects. And after that, there is TXT for text. I would like to give you only one tip and that is that please convert your text into shape layers. That's it. Try not to do anything else with your text or it will create or cause issues. So create your text, finalize it and then in the end converted into bliss. Bliss work everywhere. I have seen them work on iOS and Windows as well. So maybe if they are converted by plugging than they cause issue, but if you convert them manually, then they will not cause any issues. Other than that there is, there are some others features which are expressions. The expressions are not allowed. Ellipse, pre-comp trick comes in will give you a really huge benefits. Then combining a complicated scene together. So that's really good news. I'm trying to stretch is really not needed because You Should we creating the animation the way it should be created, not just creating it in 1 s and then striking it long out, lay that out of the option. Time remapping isn't also not allowed. So let's escape their two markers. I haven't used any of them at anytime, but maybe there will be a diamond. I will be using them. So yeah Okay, so now one thing to keep in mind, which is really important is that every shape should be a vector shape. As we have discussed before, that these animations are scalable vector. So in order to create a Lottie animation without any false, it is really important that whatever layers you are going to use, they should have a star like this on them. Basically what this star means is that the layer is a complete vector, okay? So basically it's a shape layer. So please keep in mind that this star is available or your animation will have issues. Now, before I start the animation, there was a slight issue that I noticed in the file. The file was basically a linear gradient. But then we convert a gradient into shape layers inside After Effects. They don't really work well. They become gray color and it fails to change the color. So basically we will just have to use flat colors for now. In this class, we'll only use flat colors. There are ways to utilize gradient as well, but it requires some complex plugins and it is really complex to explain. And that will be too much for this beginner's class, but we will definitely cover that in the next advance classes. So I'll just change the color to fat. That's it. So now we will just import this button into Adobe After Effects. So when you are importing the workpiece, keep in mind that we will be using Composition, not footage time, but we will be using decomposition option. And we will choose the layer size and hit. Okay, and now we'll create a new column. We will name it. Animation. Button. Hit Enter, and it is only 500 into 500 pixels. Just like our DNA. Now we will go into our design comp and copy all the layers by pressing Control C, and we will paste it here, control V, where you close the design comp. Now we will select all these layers, and as we know, there needs to be a star right here. So let's just go through this option grid and go to Create Shapes from Vector Layer. Okay? So just by this clique, we have converted over layers into vector layers. So we will delete the Illustrator layers. And now before we animate something, just rename overlays. The bottom one is circle. The middle one is wrist, I will call it. And upper one is BOM. Okay? So there's just anybody ever circle and our hands separately. Our animation will look more natural and interesting. We will zoom in a bit and I'm just gonna go ahead and go to sixth keyframe. I'll create another keyframe and I will go to number ten, and I will create a keyframe again. Now, this will be able to find a position and our star shouldn't be from zero. Okay? So in the middle one should be an overshoot position. And I will just select all these three and I will ease them real quickly and how it looks. Good enough. And now I any medical risks and palm and I want to control them as if they were one layer. But I'm not able to do that right now. So how are we going to do that? If we want to do this, I just go ahead and create a null object. Which is a very simple thing inside After Effects if you have used already given no. I will rename this one and call it hand CTRL C. Ctrl basically means control. And when we're rigging characters, basically this is the universal. I'm codes used for controllers. And I will pair and both of these layers to this controller that I've created at the wrist. Okay, so now it's patented. So now just animate this controller. I will admit its rotation and scale. So let's just open these two properties and I will create and define your keyframes. I've created my first keyframe that as well I will create the middle Positions Overshoot. I will add more rotation by maybe ten. And a starting position could be from above, I think Will come into the circle by slamming in. Tightening the value -45 degrees. This will be scaling down to zero. It will push up to 110% the scale, and I will use these all. Here's how it looks. Perfect. Now I don't want all the elements to come at the same time. So I want to add some follow-through maybe. And I want to add some gap between the difference. Okay. So before we do that, I would like to first tell you that whenever you're creating animations for your portfolio, please keep in mind that you are creating those animation in perfect loops, just like this one that I've created. And on my, on my profile, there are maybe one or two animations which are not perfect loop. But I have created 100 for animations in total, which are not Profile. And hundred of them are. I'm absolutely sure that hundred of them are absolutely perfect loops. So when you're creating your animations for your portfolio, please keep in mind that it will be better to create perfect loops because people will be able to use it more easily than. So, let's just create our keyframes. We will close our loop here because there shouldn't be some gap after the animation is completed. And now it shouldn't go back. Okay, So maybe we'll take it even further so that the entire interval is 1 s, and the Animation closes at 2 s complete. So we will go ahead and four keyframes, 1234. We will copy these keyframes one-by-one copy and paste Control C and Control V. And I will go ahead. Then Q films from here. And I will paste all these one-by-one as well. Okay? So now our animation is Creative perfectly. Now let's just add some. Okay, So as you can see, adding some gap, really add so much effect. So basically makes things more aligned and clear. And I tracing really works well. That one element is coming after another. So it makes, really make sense. Okay, So there seems mess. When the circle comes on the screen and the like button pops in, it looks perfect. But then when does circle goes down? The big term looks weird. I think it will be better if the tongue goes first. So I have just bring it to reference back and they are at the same state. So I just bring these two keyframes, even two keyframes back. So there will be to give them the US from each side. So now you just have a loop. Okay? So now you can see that it looks much, much better, right? Okay, so let's just keep our header at 1 s and 23 keyframes and hit N. And now this is 2 s perfect loop. As you can see, or animation looks perfect. Now it's time to export our animation in Lottie format. Before we do that, Let's just to observe the features of lottiefiles plugin will just refresh this button. And it feels to all of our columns. Still not sure decomp, which is open here, it will show all the columns that are available inside of a project. So please keep that in mind. Now our Animation button comp is the one which has over animation. So let's just go ahead and click the Settings button. The first option is Lottie metadata. We don't care about there. So let's just leave that there is an expression option. As you know, we can't use expressions, but there is an option that we can use expression then convert them into keyframes. But it will increase over lottiefiles eyes. So which we don't want to do. After that there is assets. By using assets option, we can include images inside of a Lottie animation, but we don't want to use that because raster images are not really a good thing for lottieanimations. There are some exceptions, but only when the time comes, we will use it only when the time comes. So that will be not the case in 99% chances. So let's just leave that and select to export hidden layers. There are no hidden layers. The layers know there are no selective expressions are pointing to external comps No, they're not so antique and hit Save. Now we will go ahead and click the arrow. And as you can see, our animation looks perfect. And there is a download button, okay, below that, we can save over Animation workspace. You have to go ahead and create a workspace and then you can hit Upload and the animation will upload on it. Okay, so our animation is now uploaded. But when we go down and we have a look here, as you can see, over animation is only 5.8 kb. And the dark Lottie sizes 1.8 Kb is really amazing. Okay? So we can download over animation by clicking this button in the JSON format. And we can send this to client by downloading it from here. Maybe if this was a client project. After that one come down, there is a feature support Jaeger, as we can see, no issue found. It's really good news because we have only used the victors allowed by lottiefiles animations. So that's why there are no issues. Okay, we used to features. As you can see here, it will show you everything. But we used only the features which are lot loud. So that's really great. This is the reason why I told you to only use the features which are allowed by lottiefiles. And below is random graph, which I have never used. And I don't know what it means actually, because it isn't maybe more of a developer's job. And below that there is background color which we can change, but absolutely not, we will not change because our animation should be transparent bedrooms so people can use them anywhere they like without messing with the background. And the transfer Begginer's will allow them to use it really easily on the websites and mobile apps. So basically, even when that fear animations should be transparent backgrounds. Let's just go ahead on our website, our public animations. And this is going to other class. Just refresh our page. And as you can see over animation is right here. Okay, so here are some features that we can use. We can really recolor, are we can create bedroom colors as well. We can enable as hotlinks. So basically, as you said, this was exclusive animation that you created for your friend only. You're going to want to show this to the world. You just enable this as are clean. And then you will copy link from here and which will appear. This way. You can use this from here as well and copy this code. And you can just send this code to your developer friend. And they will be able to easily add this in their effect. So if we do, You don't want to do that. Maybe you want to upload this to public. You can do that by hitting the share button and come to publish to the community. And you can hit publish. And from here you can add a title maybe like Like button. And then you can upload your After first file, which you don't need to. And then after that there are tags. May be lucky. Maybe like maybe baton, maybe animation, maybe loop. So these will increase chances of your lottieanimations being downloaded. So you can add as many as you like, maybe Lottie plug-in for Adobe After Effects spatially that we will tag which tools we have used. We will use Adobe After Effects because we have used that as well. You can use Illustrator as well. If there is Illustrator, these options, now there is not. So let's asleep there. We will type in here a description of our animation, which is animation of a Like button. And we will hit the confirmed guidelines and we will be able to publish, have Animation. And that is how you can create your very own lottieanimations. And I wish you the best to create your very own first Lottie animation and post them and share them with a ball and start getting some attention and create some really good portfolio. Please feel free to tag me when you create your first animations, Gagne on socials and my profile will be bolt Bite. So I'm looking forward to critiquing the work. And please do not discourage yourself by thinking that my work is really amazing. Keep in mind that these are collector animations and these actually required a lot more time and effort to do. These animations require four to 5 h inside After Effects, there are multiple layers, so it was not a suitable class to teach so much work, but I'll be definitely bringing more advanced class in which I will be teaching this stuff. And you don't have to worry about that. They will be available really very soon. And you can maybe go ahead and practice in the meantime with the simpler, simpler icons, just like I did. So people do really love these animations as well. And these have been downloaded so much time as well. There are 15 likes on my animation and it has, all of these have been downloaded over 100 times or 50 times plus. Have some faith and start animating of stuff. And I will see you really Very soon. 6. Final Message: Hey everyone, thank you so much for watching my first ever course. I apologize for my English because I'm not in native speaker. And please share your feedback on the course. And my milestone is to achieve ten students only with this course. And whenever that is achieved, I will start working on the second curve and that will be released really very soon after they're, please make sure that you follow me on social media is for important tips and tricks. And I'm looking forward to seeing you were animations. And please take care of yourself. And bolt Bite will be back soon.