How to Create Lottie Animations pt.3 - After Effects Tutorial

hello and welcome to part three of this tutorial series where we will be creating this lottie animation so that you can use it in your websites i'll show you an example and this is what it'll look like once it's uh you know once it's uh here a little shout out to the aqua stazer for this video to make this video possible uh this is a client of mine and they are selling um a new way to clean your pool so instead of using chlorine or um salt and i don't know if you know this but when you use salt you actually are using chlorine through electrolysis so the salt is converted into chlorine sodium dichloride is like salt right so they break up the salt elements and create chlorine out of the salt through the process of electrolysis so salt pools are chlorine based chlorine pools are obviously chlorine based this is literally one of the only ways to get clean water we do pair it with they do pair we do a pair they pair it with an ionizer so that it really helps they complement each other and um as like as an agent that'll help combat things that it's being circulated but yeah this is really cool stuff really cool technology um you know and you should totally get you if you have a pool you should totally get yourself uh this awesome piece of equipment because it is one of the coolest things since sliced bread with that i'll let you with your video all right okay and so now that we've got those we're actually going to delete this middle so we go to our hamburger our real hamburger okay because if we if we leave this layer on then these two on the top and bottom stay and we actually don't need that so we were using it as a guide up until now now that we've got everything set we're going to go ahead and quickly save this save our progress command or control s to save or file save and uh there we go so that's that we're going to delete that and the way you delete those individual ones are um you go to this and we'll deselect everything else for now as far as viewable viewability and something happens and i don't know what this is but each group should represent one of these lines however we have twice as many groups as we should so when i deselect this and then i deselect that it's two separate groups and i'm not exactly sure why that is so if i do that and i see how the visibility of these makes no difference i just get rid of it it's completely delete it okay delete it i don't know why that happens that's not usually a thing if anybody knows let me know in the comments below i'd be happy to understand more about after effects it's a very complicated beast and um but yes so uh because we don't need these two layers either because we don't need the top and bottoms we'll delete those two we really just need this one line that's it so now that we've got our bottom whoosh and i'm renaming this one to top whoosh okay and i'll capitalize whoosh all right so now we've got that now we've got our first bit of animation done so there it is and at this frame at one second we no longer need the center well here we go so this is the we'll name this to middle line okay and here are our x's okay so our x's actually don't have to start animation until here so i'm going to almost click and drag and move that to this frame so that before then they don't appear now obviously they can't just appear um but this is where they need to end up so we're going to go to second two two seconds in and uh i'm going to go into the contents and see how two lines two groups makes sense got you know two groups would make sense okay so we're gonna do this one first okay and uh what we need to do is transform group two so you got two transforms in here so if you open up this layer you've got layer transforms and then you've got um i'm sorry about my dog my girlfriend's dog it's so annoying and um you've got uh i'm actually gonna bring him in here well i won't i won't i'm just uh i'm tired of the dog all right so what we're gonna do is group two so group transform specifically group two and then rotate okay so we need a um rotate rotations here we're gonna click on it put a keyframe here put a keyframe at two seconds okay that is two seconds there we go and then so what needs to happen is uh is that so right now it just kind of appears and instead this one we're going to select this one and we're going to adjust it to and that's 45 degrees exactly so we're just going to do 45 boom and so now it'll rotate at 45 degrees clearly that's very not fun that's not very fun at all actually so um but that's okay we'll we'll make we'll do some playing around with that animation but we need to do the same thing with the second layer okay so rotation we're going to go to fro this frame okay rotation rotation click a new frame and this is the opposite direction so instead of 45 we're gonna do negative for okay tell them you're sorry okay so 45 so now we have and you know what i want to do actually now that i'm looking at this it's just not a lot of movement it's 45 degrees of movement what i'd really like to see is it to extend the 45 and do not 90 90 would be perpendicular but what's 45 plus 90 calculator 45 plus 90 equals 135 so let's do 135 of movement so that way it literally overextends okay so we're going to select this 135 that's right oh okay so i changed this one to 90. uh-huh look at that so now it's going to like do like a whole flip so we're doing something different for this tutorial not the exact same thing that i said because i think it'd be cool if this did a flip okay because we're going to do a flip now and um and i'm gonna make this one do a flip as well so we're gonna go back to we're doing groups we're gonna close this one like this one and transform group and so just like this one where it's negative 45 i'm going to add 90 on this one rotation of 90. and maybe it was negative 90 it was negative 90. okay so with both of them visible what should happen is they should go everyone thanks so much for watching and uh learning this far into it uh you're truly dedicated you're awesome uh you know i grew up watching youtube videos just like this there's just not a lot of information out there about lottie information a lot of tutorials out there so i mean i kind of had to learn it the hard way um but i did grow up watching a lot of youtube videos and it helped me out a lot and when i wasn't physically able to donate to people's patreons or buy their lut packs or whatever i made sure to like and subscribe comment and just be overall engaging and you know maybe even share their videos if you really like one it really helped them out it really helps me out if you do that and it's much appreciated i read every comment so be sure to get engaged and don't be don't be selling if you stop by definitely say hi thanks so much appreciate it guys

Channel: Visual Finesse

Views: 259

Keywords: webflow tutorial, Webflow, Lottie, JSON, BodyMovin, after effects animation tutorial, After Effects, Illustrator Tutorial, Illustrator Animation Tutorial, Adobe, Lottie Animation Tutorial Webflow, Visual Finesse, Michael Foster, html5 animation software, After Effects Lottie Animation Tutorial, Vector Animation, SVG Animation, website animation, webflow interactions, webflow interactions tutorial, webflow interactions 2.0, lottie animation, lottie tutorial

Id: cjdXKq9fnKo

Length: 11min 1sec (661 seconds)

Published: Mon Sep 28 2020