Create Lottie Animations For Web & Apps in After Effects

so what is a lottie animation well it's simply animated graphics that you can put together inside of after effects by using a free plugin and then export it over to your website or hand over to a web developer as code so you or they can implement it on the website just as code hey what's going on internet josh noel sun duck film this video is gonna be great maybe you're gonna offer a brand new service of motion graphics uh for web developers or maybe you you said yes i can design motion graphics for your website and then realize that it needs to be in the form of code well no problems twirl has you covered you can be able to implement graphics on your website just like this and before we jump in be sure to smash like on this video if you want more in-depth tutorials on lottie animations and let's get started so what exactly is a lot of animation in play we scroll down here to the bottom of our brand new subscription page and i added some animations in here just for fun to test this out so we have our duck animation and also a custom animation that we created right here inside of after effects you see that animated my duck and we came here and we animated just some dots in here just to show how this works so in order to do this sort of thing inside of after effects and bringing over the website you need this extension called lottie files you can download it for free i'll drop the link below so you can download it and install it if you want to do this type of animation if you're doing a website project and it'll tell you what parameters and animations are possible uh depending on the platform you're using so for example some of these parameters might work on a windows but it might not work on ios so like the repeater here doesn't work for ios or windows so you can use this as a sheet to know what's possible and what isn't for your animations for your clients website or for your own website whatever you want to do so once you have that installed i'll show you how to use this and quickly create your own custom animations for uh website design so the first thing you want to do when you start after effects is create your animation so we'll come here and you know set this to 1920x1080 you should already have the lottie files extension already installed so you go to window lottie files uh but you don't need that at the moment we need to create an animation first so you know we can take a look at what exactly is possible like i said so maybe i want to animate my logo i can see that we can use an image file uh for this so i can bring in my logo right here uh you know i can probably change the color of this real quick beautiful and i can animate this so i'll grab the pan behind tool and it brings the bottom i'm not gonna do any advanced animations in this tutorial i will in another one if you are interested so leave a comment down below if you want more advanced animations and see what's truly possible a lot of keyframe for rotation i'll kind of rotate this here go to like one second and then i'll rotate it back to the other way and i'm going to alter the stopwatch and type out the loop out expression and i think this is going to look great for a lot of lottie animations using the loop out ping pong expression just like how i have it typed out uh we'll go ahead and make both these keyframes easy ease come here the graph editor and we'll just you know bring those handles inward so now we should have an animation like this and that looks good now one thing we want to do before we export our animation is we want to try to scrunch down the composition size so we have all this you know black white space whatever you want to call it we'll go here to composition and go to composition settings and we're just going to you know bring down the width and height to just fit around our animation so we're not going to have all this empty space on our website and that should be okay so we'll go ahead and set our endpoint at two seconds so then we'll have a full cycle animation goes back and it goes forward just like that so now we can export this over to uh our website so come here to lottie files extension and you'll see that we have comp one here i can rename the duck if i wanted to and it updated right here what i can do is click on this arrow icon and it's going to go ahead and render this so we want to click save as and before you do anything you want to preview your animation to make sure exactly how it's supposed to be and if you don't see your animation exactly how you created it you need to go back and find a new method of animating it we'll click on save as and we'll want to say this as a dot j sun and we'll go ahead and save this anywhere we want i have a couple here so how you implement your animation into your website is going to be different for everyone you're going to need to look up how to implement a json file into your website but i'm using wordpress and i'm using the evada theme which is super easy to use i'll drop a link below if you're using wordpress and you want a really cool theme but how this works i can come here i can find the widget for a lot of animation and i'll come here to jason upload i can just hit the plus icon and now it's uploaded i'll insert the post and then here it is i have to be able to control the size of this so now i have my animation here my website by default this widget just makes it you know really big depending on my container size i'll come here design i can bring this down to like 200 pixels and you see smaller i can center this on my website and there it is at the bottom of our website so that's how that can be implemented i can click save you know preview it and there it is so that is really cool before we move on as you know creating motion graphics can be challenging and time consuming that's why we made over 5 000 templates to help you save time and produce amazing work under one subscription price for example you can preview templates say from our pulse pack and click apply then you can change the template parameters and then you are done so if you're looking to get an edge in your business or career check out every template we have with our links below so now that we know how this process works to create your lottie animation i want to show another example here for those of you that are interested uh in seeing my thoughts on this entire process so i really think using shape layers are the way to go because there's so much you can do with shape layers here so if we want to create like a dot animation you know super easy to do this we'll grab the ellipse tool and we'll just draw draw out a perfect circle by holding shift on keyboard we'll center this up with our line tab and we'll come in ellipse one go into the transform and we'll add a keyframe for position go to let's say 12 frames and we'll bring this animation down like this uh always f9 those keyframes i always think it's gonna look smooth go to graph editor and we can just snap our animations in place like this by bringing in the handles and then by all clicking stopwatch and doing the loop out expression uh you know it's going to keep these animations seamless and i think it's going to look really good so just copy my expression like so and now we'll have this animation beautiful so then when we do take our layer just duplicate it and appear on keyboard position just move it over to the side and we can do one more move over to the other side and then all i have to do here is you know maybe all sorts of layers just by a few frames this way they won't animate at the same exact time and we'll have this and that looks great so we can have the animation start at you know right here in time when they're all up at the same time and that looks good and we can just end the animation right there so then we'll just go ahead and export this again go back to our comp that we have here which is gonna be called dots and we'll export it and then back on our website i can quickly add another animation in here so i'll change my column size to a half that's how it works for this and i can just re-edit in another animation so now just really quick i'm able to add these into on my website do a lot of different animations for what makes sense for design and what i'm looking to do for our sites so now you can expand your motion graphics services by creating some really cool graphics for websites here in after effects so you can download our free after effects templates those links will be below because of our extension you can also hit us up on our instagram we have free content there as well that links below and always be creating

Channel: SonduckFilm

Views: 52,072

Keywords: Tutorial, After Effects Tutorial, After Effects, Motion Graphics, Motion Graphics Tutorial, Lottie Animation, Lottie Animation Tutorial, LottieFiles, Lottie Animation Website, Lottie Animation App, Animation Websites, Animation Apps, SonduckFilm Tutorial, SonduckFilm

Id: q78c_NPWbII

Length: 7min 34sec (454 seconds)

Published: Mon Mar 28 2022