Create Lottie Animations in After Effects - The Ultimate Guide!

hey there my fellow designers and creatives hope we're all doing well this in here from design palette and I'm back again today with a very exciting tutorial and honestly I am super pumped for this tutorial in fact you guys should also be super pumped for this tutorial so anyway in this tutorial I'm gonna talk about Lottie I'm gonna talk about what Lottie is what do you use it for how do you make Lottie animations and everything that you need to know this this is gonna be like an ultimate guide to using Lottie and every single aspect of Laurie I'm gonna be covering so that any further ado let's get started so as you can see here I'm on Lottie files.com and it says the future of animations and interactive design now the first thing you need to know is that it's gonna be a design oriented tutorial this is not going to be a development tutorial I will share some resources and show you some resources where when you want to implement this animation in code you have to go check out the documentation on github everything will be mentioned in the video I will let you guys know but this is going to be kind of a design oriented tutorial now the most important thing is that Lottie is compatible with web Android iOS flutter react native xamarin xamarin is by Microsoft react native is by Facebook flutter is by Google you've got windows view angular you name it you have it and you know and you know frameworks as well so if you click on each of these links it's gonna take you to the github profile where you can get the documentation about it for example we want a documentation on flutter you can go through all this documentation and you know get the code ready and you know make it work so if you are a designer and you're the person creating the animation this information is not relevant for you alright send that to the developer he's going to take care of that alright so to explain what Laurie is there are actually two parties one is Airbnb this is Airbnb is website Airbnb is the company that came up with the framework called lachchi it's basically a bunch of code put together to create a certain animation alright and nada files on the other hand is a separate group of people who created dotty files and to show you an example of what lada files actually is and it can be used for you can see that these missions over here are basically Lahti animations so these are exported from after-effects and they are imported into the code and it's super easy super awesome and I'm going to show you a real example of creating a lot of animation from scratch inside After Effects alright and you can see you know if you can follow them on Twitter they're quite active and you know they are quite responsive as well to comments and tweets and everything there's also a Lhari app for Android and iOS which I will show you in a bit once the animation we do is completed so we can test it all right now another use case for Lottie is Lottie and web flow you can integrate Lottie inside web flow so for those of you who don't overflow it's an a website building tool which is quite more advanced than Wix or square square square space it is the best website designing tool on in in the world and you can integrate Lottie with that as well and put it in your website in any format in any way that you want it's a pretty awesome okay so I'm going to be creating an animation which is from one of these kits by Chris Gannon and that this is a paid kit but I'm just gonna be recreating one of his animations which is this animation alright now I highly know I cannot share the project file for you or with you for this because this is a paid product and it wouldn't be right if I give it away for free so you can definitely go ahead and get any of these Lottie animations they are pretty cool and pretty smooth really like the detail that was put into it alright it looks pretty awesome okay now let's take a look at the documentation of Lottie because this is quite important and this is where things can go wrong if you don't you know kind of pay proper attention so as you can see here everything that you need to know for Android is over here so you can get all the documentation here as well for Android and iOS react native web windows and alright so the ones we want to take a look at is the supported offer effects features alright this is what is most important now After Effects has a ton of features and ton of properties and styles but not everything is supported by Lahti yet and this shows what is supported and what is not supported so if you are probably a familiar frequent user of After Effects you know what masks is so these type of mass light and dark and difference are not math Matt which is your masking also is not compatible to a certain extent alpha Matt and in a sign murder Matt is so you want to be careful about what you're using because if for example something works for a web it might not work for Android and iOS for example fill and Stroke and tint and all these are compatible on the web which means if you play it on the web site it's gonna work but when you import it with the code inside Android and iOS it might not work so this is like a complete documentation which is really awesome ok so if I click on after-effects you will have to install a plug-in called as body moment now this is body movin body movin is a extension for After Effects which is completely free but you can you know pay how much ever you want and it's like it's it's created by another guy called Hernan and he's a totally different guy he's not from modifiers he's not from Airbnb and he created this plugin which helps you to export the animation into a dot JSON file alright and this was not created by Airbnb so you can download and install this plug-in it's gonna take you a couple of minutes and all the instructions are over here there was that over here and it's quite straightforward and everything is there and it should be a pretty pretty cool now I will also show you guys a new plugin by Lottie files itself it's not yet released while I'm making this video but by the time I upload the video I think the plug-in should be out I leave a link to that in the description and I'll show you guys in the video of how it looks and how it works also so but as of now and I'm making this video this is not available to the public yet I have the exclusive you know access to check out the plug-in for the purpose of this tutorial ok so here I am in After Effects and this is the quick animation that I've made in After Effects and I'll show you how to make this it's quite simple you don't even have to freak out or get scared if you're using After Effects for the first time it is super duper simple ok now the whole concept of modifiers is based on vector animations which means they are not images which which means they are not PNG or JPEG they are vector shapes and vector elements all right and even a text element in After Effects sometimes does not work properly as we want it to lotty break sometimes even if you a text element so I'm going to show you how to work with text element also but the first thing I want to do is I want to go to illustrator and I'm going to go ahead and I create an animation file all right I mean create an illustration which I'm going to animate so this is the illustration that I created right now I leave the project files to this down below in the description of the video so you can check it out and follow along with the tutorial now what you want to do is when you build out an illustration is you want to split them into particular layers so for example if I go ahead and if I select all the layers and press ctrl G on my keyboard you can see that they all are split into a single layer I put a delete these four so basically everything is you know in a single layer and what I'm gonna do is I'm gonna open up and choose the parent most element and I'm gonna come over here and choose release two layers sequence what that's gonna do is that's gonna individually take each part and put it on a separate layer then you can take these elements and you can put them out and you can delete the ones that you don't want right and so this is pretty much what you have now once you have this you can go and choose file save you can save it as an illustrator file as you can see over here alright save it as an illustrator file okay once you have that you want to get into After Effects and you can create a new composition let's go ahead and create a new composition let's call this Lahti tutorial new alright now the width and the height can literally be anything to be honest all right it actually can be anything because since Lodi is based on vector which means mathematical calculations the size at which it is made does not matter but you can kind of keep it as a smaller size of 512 by 512 pixels or thousand pixels so let's go ahead and import the illustrator file that we created it's going to import that over here and we're gonna choose import as composition and footage dimensions as layer size and click on OK so basically what's going to happen is we have lodi tutorial 2 and recall this Lahti assets alright okay so if i open this up you can see we have all the illustrator files and you know they are in illustrator format alright now what we want to do is we want to go ahead and actually going to select the lottery tutorial new I'm gonna go ahead and delete all that because we don't need that okay and I'm gonna open up the lottery assets composition now with all these selected I'm going to right click and go and choose create shapes from vector layer all right let me click on that and let's go ahead and create another layer on top of everything and these are all the vector layers and basically to identify what a vector layer is if there is a star icon on the right on the left side that means it's a vector layer and each and every layer must have a star icon on the left side okay I'm going to select these and you know just keep them as it is I'm gonna select all these layers I'm gonna press ctrl X and we'll come here and I'm gonna paste it over here okay cool now it the order seems quite off so let's go ahead and then just order them out in the way we want okay so I'm gonna go ahead and rename each and every element I'm gonna call this line left alright this is gonna be lying right this is going to be shadow this is gonna be foldable front I'm just gonna call it front flap okay the next one is what is this I don't know what this is alright this is gonna be the base okay this is gonna be the card and this is going to be the back okay so we have renamed all our layers so let's go ahead and actually start animating this all right I'm gonna set this trim comp to work area so it fits the composition size and I'm actually gonna go ahead and refer to my original composition to see what the things that we animated were alright so it starts off with the top flap opening alright so you can see the top flap opens okay and what I'm animating is in this case is the mask pot alright so this is basically the vector shape and that is the shape that I am going to be editing all right so this is comes up for around 20 frames okay so I'm gonna close up bloddy assets also alright I'm gonna come over here okay so I'm going on back and I'm gonna click this drop down go to contents go to group and we have this off that says pot this is what we want to animate alright this is the kind of the most important part so I'm gonna go to 20 frames alright and I'm gonna click here on the pots to create a keyframe and I'll come back to the beginning and we're gonna zoom in and make a couple of changes so I'm gonna select these pots and I'm gonna hold down shift alright and I'm gonna bring them down I'm gonna hold down shift and bring them down bring them down over here alright something looks like this and I'm also gonna select each of these part and you know make them align like so alright and that is perfect looking pretty good so now if I go ahead and let's hide the card for now and if I play this you see we have this animation that is super simple right I'm gonna select these two and I'm gonna go right click keyframe assistant and choose easy ease so now the animation becomes a bit smoother right and the next thing I'm gonna do is going to select these two keyframes like you know select and drag over them and come here to the graph editor and in the graph editor I'm going to select this one again okay and when hold down shift and increase this so we get a very nice smoothing animation alright check it out alright so what was the next thing we did um so alright so the card comes up alright so we can animate the card alright so where is the card we have the card over here and the card are it's a 25 frames alright perfect so let's come to the 25 second mark and let's start on the card and I'm gonna press P on my keyboard to animate the position properties so let's go back to Lottie and if we go to the supported after-effects features we can see that in in the transform area there which is this one all these options such as exposit position scale rotation Anchor Point opacity parenting and skew parenting they perfectly work with each and every single situation all right now orient skew does not in some of these and also is a consumer here it says separated X&Y which means 3d is not yet supported in Lahti alright you cannot animate the Z position you might have to fake it by changing the scale properties but 3d is not supported in after-effects yet so only X and Y axis okay so I'm going to do is I'm gonna press a position to make a keyframe by clicking on the stopwatch and I'm gonna come down and what I'll do is I'm gonna select this and I'm going to move this completely to the bottom alright this one wanted to and I can select these two press f9 on my keyboard or I can keyframe assistant choose easy ease let's actually choose easy ease and I'm gonna select this and hold down shift and drag it to the left so now we can see we have like a nice smooth animation it kind of ends smoothly perfect but the problem is you know you can see that this is coming outside and we want to perform some masking operations now to create masks if you have used After Effects before you would know that Matt is one good way of creating animations now but the problem is if you choose alpha matte it is not supported on this version of the web if you choose alpha and loaded matte it might not be supported on windows so masking might be a problem if you want to use this but there is a good solution which I personally use so with this card element selected what you want to do is you want to click on the rectangle tool and once you click on the rectangle tool you have two options over here one is to create a shape and one is to create a mask we obviously want to create a mask so I'm going to click on this and then whatever I'm going to draw is the portion that is going to be visible so I want the portion after the card to be visible so I'm going to go ahead and drag in something like this ok so if you see over here I created what you see as a mask alright so now if I play nothing still happens why because as I'm moving the mask also is moving along with it so that's the problem but we want the mask to stay in its original situation you know or in its original position so what I'm gonna do is I'm going to go ahead and drop this down this mask and if you want to get the mask and press M on you keyboard m is the shortcut to get the mask and I'm gonna click on the mask path right I'm also gonna press shift + u so that I can see all the keyframes and I'm gonna come over here and I'm going to double click and drag this down like so okay so what I can do is now I can select these two press f9 or right-click keyframe assistant and choose easy ease and then I can come over here select this and then drag this out alright now let's check it out and see if it works there you go it works perfectly alright we can actually click on the layer and see if the mask sticks yes it is fantastic alright it is as we decided cool so what was the next thing that we did so let's take a look so the flap alright so the flap opens and we have this triangle you know this front triangle the flap that kind of folds so let's see how to do that ok so that kind of starts somewhere and end our 10 frames alright that should be okay so I'm gonna close this up and let's focus on this front flap all right I'm gonna come to 10 frames ok and what I'll do is I'm gonna zoom a little bit over here and I'm gonna change the anchor point so what's basically happening is for example if I press s on my keyboard I can get the scale and if I increase the scale you can see that it is scaling from the center but I want it to scale from a different position so how you want to do that is you want to click over here and choose the band behind - and then you can turn on snapping so that it snaps to the anchor points you can take this and move this over here ok that's it so now if I scale it you can see that it kind of scales from the bottom which is quite nice ok so I wanna do is I'm gonna come to the ten frame and I'm gonna animate two properties one is the scale and one is the opacity let's come here and check so we have mask pots that can be animated sorry not mask pot the position that can be animated the mask path that can be animated the opacity also sorry the opacity of the film also can be and also the opacity of the object itself can be animated that's perfect so I'm gonna press T on my keyboard to get the opacity and I'm gonna press hold down shift and press s to animate the scale okay so the first thing to do is gonna animate the opacity right and I'm gonna come over here beginning and I'm gonna add in another keyframe on this I'm gonna set it to 100 but on this I'm gonna set this to zero so what's happening is as it animates it kind of a slowly fades away select these two keyframe must go to the graph editor first thing you want to do is make them easy easy so go to keyframe assistant and choose easy ease and then we can select this hold down shift on your keyboard and you know drag it so now we have you know a bit smooth easing now now you can also see that over here that kind of shrinks from here to here the size actually reduces so how do you do that now obviously that's with the scale so I'm going to come over here and I'm gonna set the scale over here okay and I'm gonna come to the beginning and I'm gonna set the scale here as well all right now I'm actually going to delete the up I'm gonna set the kief the opacity value of the last one 200 just so that we can see and then we can set that back to zero again so now if you see what's happening is I'm going to come over here and I'm gonna set this to be zero okay so now what's happening is that it kind of scales like this but we don't want it to scale like that we just want it to scale one side so how do you fix that pretty simple if you see over here I have actually unlinked them all right I've actually unlinked it and then I've changed only one of the axis of the scale so I'm gonna do the same thing over here I'm going to unlink and we'll set this one to 100 okay so as you can see now it becomes a wider and now if you take a look it scares that way we want okay I'm going to select these two press f9 or right-click keyframe assistant and choose easy ease and we're gonna animate this as well okay and this gonna set this back to 0 so now let's take a look alright and that looks pretty good let's take a look over here yeah that looks pretty good so now the other thing I want to do is we just want to bring it down you know to make it quite faster so what I can do is I can come here to the end and I can set keyframes so I'm gonna select the first set of keyframes copy that and paste that over here okay and let's choose the back we had to animate the back right so copy the first keyframe selected ctrl-c and ctrl-v that gets pasted be card press u to show the keyframes select this copy and paste it over here at the end now let's move ten frames or let's say 20 frames forward so what you can do is you can use the page up and the page down key so you can hold down shift and press page up to go ten frames forward alright and let's go another five frames so you can press page up five times one two three four five okay or let's actually no just keep it ten frames one two three four five okay now you want to copy the end keyframes copy that paste over here so basically I'm just reversing the order copy and paste and copy and paste okay now we can select all these alright let's just check if they are in the right order so we can actually zoom in and we can select this and you know scale these up okay now we can select this one and scale that up as well cool cool okay so let's say a look at how this finally looks alright so that looks pretty cool and I was pretty brilliant in my opinion now let's take a look at effects all right now what if I want to add a drop shadow what if I want to add fills what if I add to want to uh you know animate the stroke whatever you would have to pick the elements from here so the properties from here so if I go and choose drops you're gonna get drop shadow if you want to choose gradient you would choose ramp now all these are not compatible for all the platforms so basically let's go and try pin gradient all right let's search for gradient so we have linear gradient and radial gradient now linear gradient radial gradient is available for fill what I mean to say is if I actually come and select any element let's take a look at you know this base itself all right in the contents I've got Group one and here I have a fill all right this fill I can click here and change this to a linear gradient all right now that is that is compatible but this effect called gradient ramp I don't know if it is over here let's search for ramp ok it's not here that is not compatible and I think I remember seeing it's somewhere in the documentation all right it's an after effect somewhere I think if I come down to the bottom lotty does not support FX or layer styles so if a layer has them it will probably be broken in Lahti so basically you cannot pick any LM any effects and presets over here and add them onto your file everything has to be done over here and even drop shadows are not supported I think I read something about drop shadows let's search for drop shadow or app so Lodi does not support effects like drop shadow color overlay and stroke and also if I come over here and search for expressions right lotty does not support expressions or effects from the effect menu at all so it does this so they're saying just pretend that these don't exist so you cannot add in any extra effect okay so now that this is done we are ready to go ahead and export our Lahti animation so how do we do it so once you have your animation ready you can go to window and you can go to extensions and you can choose body movement plugin now we also have lodi files I will show you this this is by lachchi body movement is by another person called as Hernan which I mentioned before and Airbnb does not have a plugin alright so Airbnb created the framework body movement was by the guy called Hernan and by a separate company so let's click on body moving alright so this is the body movement extension and this is where we kind of want to pay a close attention to because this is quite important so the first thing gonna do is gonna choose which composition you want to export so we want to choose the lotty tutorial new man click on this and it's gonna go ahead and select that for me and obviously you can go ahead and choose the destination folder which we will just ignore for now let's actually go ahead and actually you know put that in I'm gonna choose the desktop and I'm going to call this Lottie Lottie file all right cool and as you can see here it says it exported as a json dot to json that's the file we want to save as so see right so the next one to do is gonna go into settings now there are quite a few settings over here and all these perform different actions so the first one we have here is called split which splits a single composition into multiple JSON files but we want only one the next one is glyphs this is the one which is the most popular one this is use 99% of the times hidden is if you have any hidden layers in your composition it won't it will be exported but or else it won't be exported so if you select this it will export another JSON file with the hidden layers but we don't want the hidden layer so we can uncheck it same thing with guides and if the a so if there are expressions that are pointing to external compositions now I showed you that here that expressions are not supported but if I look at the After Effects features and if I press expressions you can see that the expressions are supported only on the web and not on the mobile alright so if your product is going to be only on the web you can use expressions now there is another thing that you can do with expressions let me quickly show you that so for example if I come here to Lodi and you can see that I have added some kind of wiggle expression so if I click over here alright you can actually see that I've added an expression now if I put this on web it might play and if I put this on an app it might not so the way to fix it is you can let's let's duplicate this alright so we have two copies I'm going to right-click go to create or actually let's actually go drop down to the property right click choose kefir master and choose convert expression to keyframes so now that what happen is that animating the position property all right I'm going to close this so the position property is animated by keyframes so now you can actually take this and you can export it as a JSON normally right so that's how with expressions alright and there's one more call Lodi to where I'm gonna show you a cool effect alright to create this pretty cool effect and I'm gonna show you that once we finish up with the exporting D JSON file over here alright so I'm gonna go to body movement and let's look at the settings right so the next one is assets which means you can export them as jpg and PNG but you remember I told you in the beginning that everything has to be in vector format the only exception is on websites you can use PNG and jpg image sequences but the use case for that is very less so I recommend that you don't do it all right so then we have local preview and everything else so once we have this we can go ahead and click on save alright and all you have to do is click on a render all right so that's gonna create quickly create the render and the render is finished click on done let's come back to preview and let's choose current renders and you can choose Lada tutorial new and you can actually see if it works alright and it works perfectly that's amazing so our lolly file is ready let's take a look at something else now now here we have this kind of a looping animation now another thing I want to do before I talk about this is for text so let's go ahead and create a new let's actually duplicate this Lahti to make a copy make it lottery for open this up and here I'm gonna go ahead and create a new text element alright and I want to call this Vlade okay so we have this text element over here go ahead and I'm going to Center this alright I'm going to good align and center it now this is not gonna be supported by Lahti of course so what you have to do is you're gonna right-click go to create and choose create shapes from text all right now that's going to go ahead and if I delete the original one this as you can see is a vector layer because it has a star and if I drop down go to content you can see that we have an animate we have and layer a vector layer for each of the letters so what I can do is I can actually open up each and one of these alright and I can actually animate the path of this or I can go to the transform and I can animate the position of it so I can go ahead and animate each of these positions and now this would work as a proper perfect lodi animation alright so that's about text the next one is this ring so it's quite simple so I have a layer called back which is this layer so this is basically a shape layer with a stroke so I've added a stroke of ten pixels and I've changed the color so if you want to change the color you can click over here and you can change the color pretty simple and what I did was I duplicated that and I call it front alright so I just make a duplicate of that so you can press ctrl you can go to edit and choose duplicate or press ctrl T now to this let's actually do this I'm gonna hide this all right I'm gonna duplicate this and I'm gonna call this front ok and then I'm gonna open this up and here I'm gonna change the color of this to white perfect and what you can do is you can go to the contents and in here you can click on something called as a trim path alright so trim path so once you have this trim path open you can go ahead and if I if you keep looking at the shape as I increase it you can see that it kind of changes like so alright so that's how basically I went ahead and animated it you can animate the end you can animate the beginning and also the offset so that's how I made that rotating animation now the other thing I did was I went into the stroke and here in the cap I said that from buttcap to round cap so you know the corners are around it so right and then I just went ahead and simply animated it so if I open this up you can see I simply created a simple animation and there you go it perfectly works so now that we have all these to put out together we have this little ready let's take a look at the new plugin by Lahti files so I'm gonna go to window and choose an extension this time we're gonna choose Lari files right so this is lada files extension now this is similar to body move in that we earlier but la defiles has a couple of more new features oh that's quite interesting so let's select the Lodi tutorial new and we can click on the gear icon to see the properties let's actually make this quite big all right so we have some metadata that we can put in which doesn't quite do much we have the different types split hidden layers chi layers extra comms assets and advanced so if you have expressions or you have some other thing that you want to take a look at advanced but 90% of the times you wouldn't want to click over here you can just close that up so you click on save and over here you can just click on this button and that's going to render it out for you all right now there are two options one is you can save it to PC you can save it to your desktop or you can upload it onto your Lahti account now I've already done that which is why it shows me over here so let's actually come down and see what other options we have so the person is this render graph if I play it it kind of puts down a graph I'm not quite sure what this actually means but it's there if if you don't go if you want to go technical the next one is with a background color now here we actually did not add any background over here it was transparent but if you want you can actually go and add an eighth background so you can add in any background and you can export this as a different JSON file alright so you can do quite a lot of things with it so let's go and choose upload again all right now let's come down so you can see you can also you can test it in the lotty files mobile app alright and you can also you know see the QR code alright so let me actually get my mobile phone right now and I'll show you a screen recording of that right so this is lada files the mobile app alright and I'm gonna do is I'm gonna click on the second orange is gonna preview so I can open up a file a JSON file from my phone or I can click on cat scan a QR code so I can click on that and there you go so as you can see it works perfectly it looks fantastic and amazing on my phone so basically if it works on this phone it probably means it's gonna work on any app that runs on your Android phone so you always want to check it before you import it into the code alright so it also shows me that is a warning it says the animation contains much path merge paths are only supported on KitKat plus so now all almost all phones have more than KitKat plus so this should be okay and if you want you can add in a border you can add in a background to see how that would look you could trim it if you want quite a lot of things you can scale it you can increase the speed you can watch it at 2x or slowly if you want to see how that works all right let's set it to normal 1x it shows the keyframe part I'm not sure what this is and you know basically a lot of things so like pretty cool and really awesome you could get this on Android and iOS as well and test your Lottie animation all right so let's come back over here and we can see that we can also click on this button which kind of allows you to discover new animations and you know you can download any of the animations you know that you find right so the last thing we want to do is go to check it on Lottie Web Player so that's to test it online so right now we looked at the possibility of it working on the app but let's check it out if it works on the web right so let's click on preview right and I can drag my JSON file alright and let it upload so there you go this works perfectly fine it's amazing and you can also scan the QR code on your Android phone this is the link to the file this is the private link animation whatever you need you can also download the file the JSON file and again if you want it on a separate device and also you can publish it to public so that others can also download from it right now the new thing about Lottie is called the Lottie editors write so this is a blog update that lata files with these about the lottery editor it's quite new I just released on November 12 2019 so it's quite new if you are watching this video you know in 2019 anyway so a couple of things you can do I'm going to show you everything so right off the bat we can actually see that you can change the color of any layer you can go ahead and hide layers you can edit text layers so if you have a text layer in your lottery file you can actually go ahead and change that all right and you also have telegram stickers so basically you can take a lot of file and then convert it into a telegram sticker and it works pretty cool it's pretty awesome so if I show you over here you can actually take a lotta file let's just go upload a file alright and it kind of says that it does not meet my requirements it says these layers have issues so you would have to make sure that so basically the biggest issue here is that the composition should not include merge pots that's a problem so when it comes to you know telegram stickers should be quite careful anyway so let's take a look at one of my projects where I where I created a lotta file animation for the company that I work for Khan Academy and this is the animation that we created so basically we have a list of questions that these students can actually answer and every time they answer correctly and they level up they gain experience this kind of animation happens and this happens on the mobile app so the same thing over here as I go you can see that you know there is a cool pretty animation so this was made in after-effects exported as Lahti and you can actually check it out if you go to the description of the post and let's take a look at this example so Lahti editor is visible when you go and choose edit layer colors and that's gonna open up a new browser window and all you have to do is come over here click on this Lahti animation URL copy that and you're gonna paste it right over here and choose a load animation so now our lodi animation is over here there's gonna pause this for now and here are a couple of things you can do so we have all the layers that are forming a part of the animation and the really cool part which is like so awesome you can actually see each individual layer being animated so for example if you want to turn this into a red color envelope I can click on this and I can change the color so let's go for a kind of like a dark red color and I'm gonna click on update alright and that's looking pretty good we can go and choose the base in that we have two colors which is pretty awesome it kind of recognizes the colors so the dark one is gonna be kind of over here update and the light one is gonna be a lighter red click on update alright and we also have this shadow thing I'm gonna make this also kind of like a kind of like a dark red alright that's looking pretty good so basically you can do a ton of things over here and that which is pretty awesome so you can also hide the layer of visibility if you want it or not you can turn that back on that's pretty good so if you click on this button it's gonna kind of make it into a wireframe kind of a thing and not quite sure why anybody would need it but it is there you can also check the history as to what happened and each eye so I think each change is a JSON file which is pretty good so you can multiplex port multiple JSON files which is really awesome so these are dimensions you can set that to whatever you want you can set the frame rates it gives you the duration and also the background color and the playback speed alright and also telegram sticker you can see that the dimension should be exactly 512 by 512 so if I set this to 512 by 512 all right it still does not work and go to click on update alright and let's let's check this again so it says that the layers have errors because of the merge path effect that I was talking about so that is gonna be a problem if we have to export as telegram stickers so make sure you don't have any errors in ER thanks for this export as JSON so you can click over here and you can export your file as JSON and it should be you should be pretty good to go so that's pretty much it for this video guys thank you so much watching because we enjoyed it if you did let me know in the comment sections down below make sure leave a like and subscribe for more amazing awesome content [Music]

Channel: Design Pilot

Views: 191,452

Keywords: lottie animations, lottie animation, lottie animation after effects, lottie animation webflow, lottie after effects, lottie tutorial, lottie export after effects, lottie export, lottie ios, lottie in react native, lottie tutorial android, lottie tutorial after effects, bodymovin lottie tutorial, bodymovin after effects, bodymovin tutorial

Id: 72qbebvwxnY

Length: 39min 34sec (2374 seconds)

Published: Sun Dec 22 2019