Animate an Icon in After Effects for Lottie

macro animations are a great way to add some delight to your product whether you're tackling an ios android web or react native project lodi remains the library of choice for implementing high quality lightweight animations and to be honest the whole workflow for creating animations with lottie is pretty nice so i'm going to be taking an icon from the hero icon library animating it in after effects and exporting it ready for use with lottie so without further ado let's get into it this is my design here and the icon i want to be animating today is this guy it's an icon from the hero icons library and you can grab it from just going with check circle and then we just copy the svg in here and then we paste i'm just going to drag it over here and you can see that there's just a couple of glitches so i'm just going to jump over i'm going to hit k for the scale tool and i'm going to hold alt and shift i'm just going to scale it till we hit 128 pixels as our size and you can see that there's that little bit of a glitch there so i'm command clicking into here i'm just going to zoom in and i'm going to delete just that additional line there you can see here how i wanted a bit more of a sharp look that rather than this rounded look that hero icons gives us so how we're going to change that is i'm just going to click this shape in here and i'm going to change this to none and then i'm going to click this little guy and then i'm going to change the joins to square it's got this as a complete shape so i'm just going to hit delete so i can access this bit in the middle see how it's looking a little bit truncated now that we've got rid of the round caps on this check so i'm just going to click in command click in i'm going to highlight that go command x and then i'm going to escape click on the frame and then paste and that'll paste in place to where we had it before and again i'm just going to hit k to use the scale tool and i'm going to scale that up to something like maybe 42 28 and we've got a pretty big size here so we want these two to match obviously so i'm just command shift clicking these two and i'm hitting 10 just to bring that out into line i might bump that up to 46 46 30. and that's looking pretty good um i'm gonna just hit enter just to highlight these two use the picker tool and the beautiful thing about the hero icon library is it's actually given us these stroked um shapes most icon libraries will have this outlined to stroke so it's just one shape and that's going to make it a little bit trickier to animate in after effects so just the fact that hero icon library has supplied these icons with a stroke rather than as a fill it's going to enable us to access some vector animations that are built into after effects and that will get us animating this icon really quickly so now that we've got our new check circle icon i'm just going to rename that there with command r command clicking to collapse that all up and i'm just going to export this as an svg so it's a plus up here now don't worry about the multiplier there we're just transforming it to svg and then i'm going to hit export just dropping it into my desktop here and i'm going to hit save unfortunately after effects can't manipulate svgs directly it needs to be converted into an adobe illustrator file before we drag those in and start playing around with it we've opened up that svg in adobe illustrator and now i'm just going to file save as and i'm saving it as a adobe illustrator document so check circle.ai that's what we're after we don't have to worry too much about the compatibility features here um we can just click ok that should play pretty nicely in after effects so now that we've got after effects opened here i'm just going to go file import file and just in the desktop here i'm going for our check circle dot ai you can see here the svg is disabled after effects won't even let us import that so we've got the ai there we're hitting open i'm going to actually import this as footage merged layers we've only got the two layers so that's all fine and we've got it there so we've got that check circle in a composition and we've got that check circle file i'll keep this composition and what i'm going to do is i'm just going to right click on this dot ai file and i'm going to go create and i'm going to create shapes from vector layer and now it's given us our outlines so i'm going to zoom in here just with the forward brackets on the keyboard and if i go here and i look into the contents we've got two groups we've got our check and we've got our circle group so i'm going to actually duplicate this file and i'm going to delete one of these groups just so we have these controlled in separate layers i find that a little bit easier so that's all split out into its own files um the second thing we want to check is just the composition length we're probably only after something that'll last five seconds now we've got this down as eight seconds here so i'm just going to change that to five and click ok there that's going to trim our composition and this check circle dot ai we can delete that we don't need that anymore now we're ready to start animating our icon so the feature that i'm looking to add in here is you go in this little down arrow here and then just in the contents panel we're hitting add and we're actually looking for this animation called trim paths uh trim paths it does what it pretty much says on the tin it'll trim this path to a start and end point so it means that we'll be able to create a really nice entrance animation just by animating this start value now i've got that started you'll see that we've were if i animate the start value it's probably going to go in the wrong direction we want a check to go in the other direction so i'll actually start from the end which is zero i'm just going to click this watch here and that's going to be our first keyframe i'm moving this over possibly at the we don't want this animation to go for too long so we might go at the 45 frame mark and then i'm just going to basically punch in 100 here and voila we've got our check animation now when you're creating animations you generally want to add some easing rather than this linear animation makes it feel a bit more natural but the thing is if you right click and click easy ease it eases it in you can see how that had a different amount of velocity it started eased in and then it eased back out this is pretty nice out of the box but what i like to do is really try to exaggerate this effect so if i click on this end keyframe here and click this guy up the top here we get a graph editor and what this does is it allows us to edit the velocity of our keyframes so we've kind of got this easy ease here so you can see how it speeds up right in the middle there and it starts to slow down so what i'm going to do is i'm going to again with that end keyframe highlighted i'm actually just going to like grab this control here and really just crank that up so the influence is like yeah you know maybe 90 or something you can see how that animation it has a bit more of an exaggerated acceleration and it kind of slows down and i think that looks pretty nice so i'm going to close that graph editor now and it's time to animate our circle opening it up and i'm adding that trim paths property um we'll have a quick look at the start and end that looks like it's working as it should so i'm just going to keyframe the start here again not too long of an animation we might extend this one out to one second and we'll just add another keyframe here and we'll take change that 100 value down to zero percent and we've got a bit of an animation so i'm just going to exaggerate the velocity here so again i'm just going to click these two keyframes right click easy ease and then i'm going to click this last keyframe going into our graph editor and i'm going to exaggerate the effect so uh let's crank it up to 90 again and we've got a circle that has a bit of bounce to it the other property i like to animate is actually the offset especially for circles and i think it gives a pretty interesting effect so as this circle goes around i'm actually going to offset it a little bit kind of makes it feel a bit like a loader as it kind of runs across so if i just crank that up to a hundred and then i might just have that run there again right click easies let's see how that looks it's a bit confusing so we'll have it start at the start and we'll actually have it rotate the other way i think so i might go minus 100 there too easy and again just on that last one highlighting graph editor that'll crank that influence up and what i like to do is just have these overlap so i'll just something like that i don't think this is rotating enough for us so i might just take this to negative one and then put that to zero so it's going to make a full loop cool that's going a little bit too fast for my taste again just playing around with these keyframes seeing what feels natural might be a little bit too far again let's try negative 220. and i might actually start the offset i think what's tripping me out is just where it starts so it's kind of like starting up here now and then we can kind of have that close up a little bit sooner and that might just again be going a little bit too far let's try and drop this down to 180 degrees and i might just spread that out just a little bit i might just crank the velocity there again so if i go to graph editor run that influence to 100 i think that's pretty nice now we want the check to kind of happen at the end of the frame so i'm just going to open this up a little bit more so we can see what's happening here got the circle starting at the zero frames coming in at about one second and just closing that ring so i'm gonna just drag and select these two keyframes drag them out and maybe just pop them around here so the circle kind of comes in again this might be a little bit too long for our animation so we might actually keep it around the one second mark so i'll just grab these i've just highlighted these keyframes there and just dragging them in a little bit more but that's check could probably come in around here so we might actually just bring that up through there i might just extend this so the animation runs up for a little bit longer so now that we've got our animation done um i'm just going to command a command click on this arrow claps everything up and if we hit this little transparent toggle transparency grid you can see here we don't actually have a background rendering in our composition that's exactly what we want and typically when you're in after effects you're quick to hit composition and then you want to hit the add to render queue button and then render this out as a video but because we're using lottie we're going to need to export this out with the extension called body moving so it's just available on ae scripts it's body moving for lottie and it's uh it's free um you can name your price kind of thing and just add to cart and then follow the prompts to install and then when you have that installed you'll have this body move and extension so i've just got it checked here and i've just kind of mounted it into the bottom panel here and you can see how it'll add automatically all the compositions that we've got in our project so uh check circle is the composition that we want to be rendering today so i'm just going to click that selected button there i'm going to jump into settings so all these are pretty fine we don't need guides um we don't have hidden layers that need to be exported or anything so i'm just actually interested in these export modes by default it will export with the standard json file which is what you want to be handing over to developers when you are ready to put this into production but i also like to just export out a little demo and this will export a little html file that we can view in our browser to make sure it's working all right so i'm going to hit save on that and you can see how that's all pretty much ready to go and you just want to make sure that it's saving in a directory you might have three dots over here so you either click the dots or click this and just make sure you're saving it in the spot that you want in the desktop is where we want our file so i'm just going to hit save there and i'm going to hit this render button it's pretty fast render finished already i'm going to hit done so now in the desktop i've got that data.json file that i mentioned earlier so this is the file that you would hand over to a developer so they can get it running in their development environment but just to check that this animation is working okay for us in the browser we've got this demo folder and we've got this data.html file so it's not going to play in quicker view for us we're going to have to open it up in chrome so just dragging and dropping that in and voila that is our animation playing um so that's how we make an animation in lottie as a bit of a stretch goal i figured we might just keep working with our prototype and chuck it into a little bit of a screen unfortunately figma doesn't support advanced animations like lottie or dropping in videos or dropping in png sequences so to i suppose prototype this for a client we would actually have to render out a video but the process is pretty simple so click on the confirmation screen i'm scrolling down here and then on the export i just want to export it out it's two times as a png nice and flat for after effects i've got that saved to the desktop now that we've got that confirmation screen i'm just going to go and drag and drop that into after effects i'm going to drag this file into the new composition icon and we have our mockup if i just go to composition settings we rendered this out as two times so i'm going to divide this width by two just to get it as 375. i'm clicking on the layer there and i'm hitting s i'm just going to change that scale to 50 now so it just renders out a little bit sharper uh so now that we've got this check circle composition we just got to drag and drop it into this composition i'm going to give it just a second so that we can see what that animation is i'm hitting p i'm just scaling that up getting that in the right spot there so that's pretty close uh we've got a bit of a double up happening there so what i'm going to do is i'm just going to grab the rectangle tool and i'm just going to mask it out so that'll do us there it's white it's on a white background obviously if we had a more complex background we would have omitted that so it was a clean slate to work with but it's nice to have a guide sometimes so i'm just dragging and dropping this layer in below our check circle composition this is rendering out as five second composition up to you if you think that that's long enough i think that might be a little bit too long so i'm just going to truncate that maybe around the three second mark so i'm gonna go end there we'll just have a slightly shorter video so now that we've got that ready to go as a bit of a prototype we can export it so if we go composition and then add to adobe media encoder that's going to boot up adobe media encoder for us right media encoder has boot up for us and this is pretty much the settings we want h264 now we want to make sure it's matched source high bit rate and we're just going to click on this and i'm just going to export it out to the desktop so i'm going to hit save here confirmation screen and then once we hit the play button here it'll start rendering out our prototype this will take a little while wonderful and now that's rendered so now on the desktop we've got that animated mock-up in an mp4 that we can easily share around on slack or um however you prefer to distribute your videos and that's all there is to it we've not only got an animated mock-up that we can present to a client for approval but we have that animation in a format that's ready to drop into any development environment so as always please let me know what you create in the comments below and thanks for watching [Music] you

Channel: Jordan Geizer

Views: 291

Keywords: Lottie, LottieJS, Figma, After Effects, Micro, Animations, Micro Animations

Id: HHzwGzocqw4

Length: 17min 36sec (1056 seconds)

Published: Thu Oct 07 2021