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

hey everybody welcome this is actually part two of uh this tutorial series where i show you how to make this lottie animation hamburger for your website now this is for mobile navigation uh and this is what it looks like once it's going to be completed in uh your website now if you don't need to do the part one which just covers how to make the illustrator if you're good with illustrator you know how to do all that then skip the first one come straight to the after effects tutorial part and enjoy this is a this is a program if you don't have body moving installed new window okay one of the one of the extensions that you'll need is one of the extensions you'll need is body moving body moving uh body move in download okay so you go to body moving and you download this uh looks like exchange adobe.com it's free you get it um and if it doesn't work you can download install it another way and you do that that's because it didn't work for me download and sell it another way and um you will i had to use this extension and you can just type this in anastasi's extension manager and then you can drag and drop it in there and it'll install it for you so you don't have to do it if it doesn't work so it's continue with known issues my computer is out of date it is too old the video card is too old to run this these are programs but i run them anyway so we're gonna file and save our project as uh hamburger here we go now we can import our file file and now this is important uh retain layer size and import okay as a composition so now we've got our each layer you can't see them because it's black on black um and this guy so we open this guy up there it is that's our that's our buddy right there there it is and that is kind of small so what i'm going to do it so here's the thing i wanted i wanted to work at 100 i need this to be a little bit bigger and i could have made this a little bit bigger in vector it's fine it's all vector still even though it's pixelized it's still vector there's vector retention in there so first thing we need to do is select all three of these layers actually the first thing i really do is i need to duplicate the composition so i'm gonna i'm gonna rename this and it's gonna be main okay and this is just a duplicate composition i'm gonna open this up i'm gonna close my hamburger background like a copy that i made or the original and then i'm going to right click on all these guys and then you'll see this create button right here create shapes from vector layer let's go so now we can delete all the adobe ones and what i'm going to do is i'm just gonna do this this animation first and so the animation is you have this lower line uh the lower line of the hamburger with the lower line and then this lower line swoops in to this middle line okay so to do that um all you have to do is go into your group well first of all again i'm working too small here so how do i fix this um what i can do is i can go to composition settings um instead of 171 i can do 500 that's a little bit better composition settings we'll try 700 and i think 700 is the key i think that's what we're going to use 700 looks good and so i'm going to click on all of these guys and um so grab one of these corners and use this hold this edge and i'm going to just grow it all okay so i'm just gonna click and drag and grow it all now this is not aligned anymore so we need to make sure that it is aligned with our yeah that looks that looks about right okay so yeah okay so we grew it we made it bigger we could have done that and adobe illustrator should have done it there sorry it's my fault i didn't do it right so okay now we're all good so it's just a little bit cleaner i don't have to zoom in to 200 it's not pixelized it would have worked either way just so you guys can see it so now the first step is uh we go to our the contents of this layer you'll see it's got a group we'll open that twirl that down we got path stroke okay and and in this right here in the stroke well actually in the contents actually we're gonna add this add button okay and we're gonna add a trim paths ha ha trim paths this is what we're adding i found it all right lots of different things in here it's very hard to remember which is which okay so now in our timeline this is how long is this timeline this timeline is mucho long very long it's like a whole two seconds so our timeline is like it's like uh two seconds and 21 frames okay let's do that let's do um trim path it's fine that's a fine time length we'll actually go in here composition settings and just change this to three seconds for now just to make things clean okay so we have our trim paths here and uh i'm going to time mark it you click this stopwatch deal and then you'll have a keyframe now and then i'm going to keyframe it again at a second okay and what we're doing is this first one obviously we don't want it to have this loop just yet so we're gonna go to the start i just found that out by trial and error and right before it starts to like go around around this uh edge here right before i see the before it's growing i'm gonna just leave it right there like that okay so now we've got our lower bar and then as it goes to this next one it's uh it's going to there so within one second it grows okay perfect now we want the end to also and so we want to select this so be careful because you actually have to select the keyframe that you want to adjust something that i found out so we're going to do the exact same thing but reverse right before it starts to make that bend we're going to set it there i think that's the frame that's where i want it to be okay and uh it actually makes sense so you could have just said this is 64. you can do the math in your head 64. the opposite of 64 would be 36 and that's exactly what we did on this end it's 36 so math helps a lot in after effects if you know math to get it perfect um but there you are so now it it like kind of does this thing or just says but that's not as that movement is just too it's just too stiff like it's just too linear and so what i want to do is select everything hit f9 for hit f9 that's the key or you can do keyframe assistant easy uh easy ease so that's the shortcut f9 is easy ease okay so now that you've got everything you selected all you hit this little button up here the graph editor and this is where kind of things get messy and i'm going to hold shift because like you know you can do this but if you hold shift it locks it into place and hold shift and just pull it back and see what that does that's a little that's much better and that's exactly what we're going to use that was it we're done looks clean beautiful love it okay so now uh we're going to duplicate this layer okay so this is um we're going to rename this bottom whoosh and we're going to duplicate this layer uh control d for me on the pc and then uh all we have to do is rotate this sucker so we're gonna transform rotation and i'm going to rotate it 90. no 180 sorry math 180 okay so now we get i love it okay but that's obviously not in the right spot um so we're gonna need to move it and i'm gonna put up this as a guide so we're gonna need to move this right right there just like that let's see that's that so it's just a little bit bigger than the other one so that's what i was okay and um turn that off and they should both whoosh there it is there it is hey guys and uh sorry to interrupt but once again we have gotten pretty long in the film so far the tutorial series so i'm going to cut it again and um just you know uh the deal i the next video is ready to go you just find it if you're watching it on the playlist or whatever um but um yeah i don't want these videos to get too long and it was getting long so uh with that please again just like and subscribe comment do all the things like the video you know it's just so helpful it's so helpful it's free there's no reason not to especially if you're getting a lot of value out of this and again i'm selling the lottie for like five bucks and um yeah suggest the next thing that you want to see me do because i'm doing those things i do read the comments so please be nice thank you 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 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 re 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 um if i do that and i see how the visibility of these makes no difference i just get rid of it it's completely deleted 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 but this is where they need to end up so we're going to go to second two two seconds in and i'm going to go into the contents and see how two lines two groups makes sense you 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 you've got uh i'm actually going to bring him in here well i won't i won't i'm just 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 going to 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 new frame and this is the opposite direction so instead of 45 we're gonna do negative for okay tell them you're sorry tell me sorry 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 not right 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 gonna 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 for doing groups we're going to close this one like this one and transform group two and so just like this one where it's negative 45 i'm going to add 90 on this one rotation of 90. [Music] and maybe it was negative 90. it was negative 90. okay so with both of them visible what should happen is they should go now obviously we don't need that centerpiece there any longer so on this frame if we go look at our layers specifically every other uh this is x so we're going to know this x okay so all of these layers need to disappear on this frame so we're going to have whoosh x boosh i like it i like it a lot so really what i want so the whoosh is fine [Music] we'll play around with the speed later but i think i do want that to go a little faster because i think a two second animation is too long but we're just getting our bearings right now so there's our x we're gonna have it rotate around and let's see what i can do is i can open up both groups or actually i can what i can do is i can take these two and hit u and now i have just the rotation parts so i'm gonna hit f9 for easy ease and then let's take a look at this so here's what we're working with all right and [Music] now i do want them to bounce so and i really need to just copy that movement on this side okay so push let's take a look at that from a bigger so yeah in order for this to be bouncy i think the squish is too squishy okay i think the reverb bounces to reverb reverb that's a lot better and really i wanted to really ease into that and i don't know why this didn't so i'm looking at this x by the way to kind of find my center mark it's not perfect but i can also look across here and be like well what's the what's the disparity between this point this little crosshair and this line and i can see okay it's like a little sliver a few pixels that i can all right now for the one that i did before i did purposefully have it off-centered and kind of a little thing but for this one i think i'm gonna have it more symmetrical okay now um that is it we are we are done that's all we actually need to do if you are interested in continuing the loop for another reason um well we'll i'll do that i'll just go ahead and do it that way so now that we have because it's kind of complicated and it's not the most intuitive process ever so nasa animation and now what we need to do is take this animation and reverse it so right at what was it two seconds there we are two seconds okay two seconds and now we need to reverse all of this all of it we need to reverse every little bit of it so um i'm going to create i'm going to duplicate this composition and i'm going to rename this loop okay and the reason why i'm going to rename this loop is because a couple of sec settings it needs to be four seconds exactly and do we like so right so we don't like how long this so i actually want this to be like you know 15 frames instead so we're gonna go into here before we duplicate this and we're gonna shorten this up a little bit so um topwoosh bottomlush u to get all of them and we're going to just we're really just going to take this and move all of our effects and move all of this down to 15 and then move this guy down just like that all right so now we've got our little animation pow am i a fan now i think if this was two-tone let's do that let's make this two tone let's go ahead and do that let's uh let's apply some some colors here because i think it would be better if people could see the difference because right right now it's all black and you kind of really can't tell what's going on so um we are going to bottom whoosh let's see i want this group stroke color let's go with um let's go with blue right so so i'm gonna go with like this faded pastel blue in here okay and then for this guy i'm gonna go with um a much darker blue path uh-uh no no no you don't rip up the carpet dude no no don't do that so now that we've applied colors to all these i'm actually going to keep this top whoosh above the middle line and then this guy so all right so to reverse all this it looks great [Music] what we're going to need to do is uh duplicate everything such as command copy just duplicate it all now um obviously this this goes right after this one because if everything's going in reverse this would go back here okay and then now our sequence is exactly three seconds long so we go to loop composition and change from four to three okay and this what we need to do is um hit u and we can get all of the key frames right click keyframe assistant time reverse keyframes go over here you my god time reverse keyframes time reverse keyframes and there it is you can obviously change the two tones to whatever color you'd like um i'm gonna put a white background on this bad boy new solid white solid but uh there you go there is your there's your lottie animation that is how that is done and so to export this all you gotta do is we're gonna save it one last time and animation nope window extensions so this is where your body moving extension comes into play i told you you can use this program in order to um get it downloaded oh i just realized that my huh i forgot to check make sure that you all could see that but anyways what you're looking for i'll close this out so you what you want to do is right click keyframe assistant time reverse keyframes okay that is what you're doing i forgot that my camera was blocking your vision so window extensions body moving and click on loop selected it go ahead and go in here and just make sure all your settings are correct what you're looking for is for settings there's no hidden layers that need to be exported uh there's no guides that need to be exported no extra comps no assets that need to be rasterized uh we don't need to split the lottie files in anything don't need to do a demo sometimes so anyways save now if if this is the first time that you're trying to render this out um oh so you can we're gonna it's where this is gonna be saved visual finesse youtube hamburger tut ham burger let's go so this is the first time you're rendering it it won't just render what you'll have to do is you'll have to go into your settings project settings no not project settings just your preferences general and it's actually not general but i just did that's a scripting expressions here at the bottom and then allow scripts to write files and access networks so if you don't do this then it won't render and you'll get a pop-up telling you to do this but if you don't know where that is it's right there so now that it's rendered now you can uh we'll we'll clap that up it's been rendered you're good to go what i like to do is i like to render this composition this loop composition uh and and actually now that i think about it i'm going to um duplicate this one more time loop and i'm gonna have gif uh rename loop gif not jiff if it was uh if gif stands for graphical interface exchange format enter interchange inter inter change or interface something but it's anyways it's graphical that's what it stands for so when when graphics are pronounced jfix then i will say gif but graphics are not pronounced jfix they're pronounced graphics so it's gif all right now that rant is over let's do we will um settings and i will actually increase this to four seconds and so this one will have an extra some extra time uh maybe not four secs maybe maybe just this this little bit maybe 3 15 3 15. there we go and that just gives it a little bit of time so people can see the hamburger layout okay and um you know now that i'm looking at these colors i'm really thinking that this middle color middle line should be a different color and now i'm just getting picky but it should really be that color contents group a stroke now hold on now that i've got this selected i can go back here and select this color there we go so now it's the same okay so that's fine that's good enough for me uh yeah it's fine it's not even the color palette that i would necessarily choose but i mean i did choose it but i probably should have had a color palette scheme going on in illustrator and not after effects so i would prefer to have that done in illustrator because illustrator is much better for picking colors and things of that nature so that's going to be it for this oh uh yeah to export a gif what you do is um go to select your composition uh add to media encoder and um you will go here and uh it should have just propagated up there it goes so and then i've already got animated gif selected but it's probably set on something else so just select animated gif and then know where you're going to save it to tut it's great um now it adobe media encoder is like a for its own file that it generates automatically so if you're like i don't see the file look in the adobe media encoder file and then that's where it'll be because it makes its own folder so like i said speed test hamburger and you're like oh i don't see it anywhere um oh it's because it's not in there it's in youtube adobe illustrators ame boom here's our gif and there it is so next episode it won't be an hour long but you'll be able to apply this to webflow we'll show you how to get that integrated also subscribe it helps me out a lot if you subscribe uh if you want to purchase this and don't want to do the hour-long thing um you can purchase this for five dollars um each one is five dollars i mean it helps me out you know if your time is worth more than five dollars an hour i think it's a good deal uh because even if you know what you're doing if you this is exactly what you want just there you go but um oh yeah so but uh yeah share it you know uh follow whatever requests something if you want something done be like hey can you do this and i'll see if i get if i got time i'll do it so yeah peace out

Channel: Visual Finesse

Views: 1,760

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: B7XWW9HwAko

Length: 59min 38sec (3578 seconds)

Published: Mon Sep 28 2020