Creating Lottie Files Using Illustrator & After Effects for Webflow Projects

[Music] what's up youtube welcome back to the channel for webflow pros in today's video we're going to cover how to create lottie files using illustrator and after effects for your webflow projects this is going to be a basic introduction to building lotties and we'll be focusing mainly on vector lotties for these examples so the first one we're going to look at is sort of the swoosh we want it to look like the line is appearing or it's being written on whenever we animate it so if you have any sort of gradients or effects or opacities applied be sure to clear all that out so we're compatible with as many devices as possible we want just a clean vector file here you can add some of them back in in after effects if you'd like if we click on the artboard tool we'll see this is about 190 pixels since it's vector we can make it whatever size we want inside webflow but with it this small it's going to be sort of pixelated and hard to work with in after effects so let's just size our artwork up to where it's a bit larger and then if we click on the artboard tool again if you click on this custom drop down click on fit to artwork balance that's going to resize our artboard to match our artwork size i may scale this down a little bit so it's not directly touching the edges but the closer it is to the edges the easier it'll be to position inside webflow since we're not going to animate this by moving it up or down or scaling it up we can leave it pretty close to the sides here i'll rename this layer swoosh so it's easy to tell what we're working with inside after effects and i'll basically save this file once we have this ai file here we can just drag it directly into our after effects project and that will start importing it start opening it up so we can get to work on this file um there's really only one option we're going to need to check to get started once this pop-up opens it's footage or composition footage flattens everything and makes it raster-like so we'll use composition for this example so once we open that up you'll see it actually created this composition here we can double click on it to open it up and this is our composition you'll see this layer here is our ai layer we actually need to make this a vector inside of after effects so that way we can export it as a lottie so we'll right click on this layer hover over create and click create shapes from vector layer basically what that does is it makes a vector version inside here where we can affect the fill the stroke all that's in here for us to work with so click on our old illustrator layer and just hit the delete key to remove it now if this was just like a solid stroke like it was built with a line we could really easily make this line sort of right on or appear but because this is built with a filled in shape and it has some vic points and then points this is going to be harder to animate inside after effects one thing we can do to get around that is actually click on the pen tool and we can draw our own line on top of this line and use it sort of as a clipping mask to reveal the shape underneath so i'll just click and drag out and basically oops without selecting the we don't want to have this swoosh select it so i'll click on the pen tool and then just click somewhere and then now i can sort of drag this out and create sort of my own shape that pretty much covers it up if it's not exactly perfect where you want it we can always adjust these points later but just get it kind of close to where it's covering up the shape underneath i'm just sort of drawing drawing these in the middle of the line and i can hit command z to undo and draw the point again and once we have that shape created what i can do is open it up open up the contents open up the shape open up the fill and then under color where it says opacity just drag on that 100 all the way down to zero to turn the opacity of the fill all the way down and we can open up the stroke and change its color sort it to red or some color that will be easy to see and then drag on the stroke width to increase its width where it pretty much completely covers all the purple underneath if we ever need it to come back to any one of these points we could click on them and adjust where they fall even drag out the handlebars to change how much it's covering but that appears to be covering everything up there basically we want to be able to animate this line so if we click on add and click on trim paths that's going to add trim paths to these where if we open that up you'll see we can animate the start point or this end point to where the line's sort of appearing i'll use the start it really doesn't matter which one you use but basically if i click this stopwatch here it's going to create this blue dot this is a keyframe so this determines when the animation starts so if i drag it back here the animation will have a bit of dead space and then it won't start till it reaches this first keyframe here i'll drag that back to the beginning and then we'll drag all the way towards the end and if we drag on the zero percent all the way to 100 we're moving that start point to where the line is sort of being it looks like it's being written on so i'll drag this start point all the way to 100 percent um that way it completely ends and now if we drag back to the beginning and press space bar for play um it's sort of just writing our line one just like we would expect there and that looks pretty good we can change the direction if we hit reverse and now it will go from the opposite direction here but i'll just keep this running the way it was before and that appears to be working we can also add easing so if we right click on this point and do keyframe assist we can do easy ease out which is just a really simple ease we could also click on this graph editor here and with that point selected we can click on these handlebars and adjust sort of the easing from here just like we would inside webflow we can do that with the start point the end point however we want it to look i'm just adjusting this a bit tighter but now we should see some really dramatic easing going on and it gets really slow towards the end and fast towards this point right here um and that looks really good it looks really smooth and clean i'll click on this graph editor again to get out of it and now we still have our anchor points there um so we want to use this red line as a mask for the purple line so i'll collapse this for a second and drag the red line underneath the purple one and um basically you may not have this option shown at first but if you click on this toggle switches and modes and this mask could drop down here if we click on the first option the alpha matte that one is basically going to mask this red shape inside of the purple one so now if we play you'll see the organic looking purple shape is now being animated let's just go ahead and grab this hex code from this purple color here and then open up our red shape again and basically change the color of the stroke to the color we wanted it to be and now it's just being animated just fine there um we may even want to change the color from purple to a different color during this animation so we can click on this color stopwatch to add a point here somewhere in the middle and then advance a little bit further and maybe i'll go into here and grab maybe this pink color so i can get that hex code go back into after effects and then just change the color of the stroke to pink um so maybe we'll want this to happen a little faster so we'll drag those dots pretty close to each other and bring it back a little further so now that line sort of fades to pink while it's being animated or written on yeah just like that and that's looking pretty good um so once we have this pretty much set up and ready to go we're going to use body movement to export sort of a lottie file i believe lottie files also has its own extension i'm going to link in the description of this video webflows tutorial on how to install body movement but basically once you have it installed click on window go under extensions click on body movement and that pops up this body movement dialog box and then from here we can basically click on the settings the only one we need checked is this option here these are for if you had raster or different options inside then we can basically select the folder we want to save this in and we can click one lottie this folder here and just name the swoosh it's going to save this as our json file click save if you click render and it doesn't work just make sure you have this check mark selected this little toggle here to make sure to say this is the lot you want to export then we'll click on render and it saved it out pretty quickly just like that it's finished it's ready for us to upload and use in webflow with any sort of trigger that we want so you can use this method to create different sorts of lines squiggles swishes however you want them to write on the next one we're going to look at is sort of this file here and with this one basically what we want to do maybe we'll make this whole smiley face move up and down a little bit maybe we'll rotate some of these shapes but if we wanted to animate these separately what we're going to need to do is have these each on their own layer and that can get kind of difficult especially if you have multiple pieces like maybe i want to also make the smiley face wink or blink um then i'll need his eye to be separate from the rest so i'll just ungroup all this maybe group these pieces back together so now the eyes are separate basically we would have to create all these layers manually and drag these pieces onto their own layer but there's a shortcut to make this faster if we click on this hamburger icon up here there's two options for release to layers and you would want to select the sequence option basically that's going to take every grouped item and put it on its own layer so you'll see the eyes are on their own layers because they weren't grouped with the smile the smiley is on its own layer um basically i can select all these layers by holding shift just drag them outside of layer one layer one is empty now so i can go ahead and delete that and for easy naming um i just want to name all these to keep track of them inside of after effects so i'll call this top shape i'll call this one bottom shape um i may call this i i think this is the first eye so we'll call it i1 and then we'll call this one i2 um we could really animate all these stars separately too have them blink or flicker or something but for the purposes of this tutorial i'll just keep it simple and not animate those um everything else should be named i'll name this one smile and then we can pretty much save this let me have a little bit more space in case we decide to move this up or down pretty far and let's just go ahead and save that file so since after effects is already open this time we'll go up to file import and import file and then from here we can select sort of our smile file here again we have composition or footage we need to make sure composition is selected and click open and it created this composition so we can double click on it again these are all our illustrator layers but we need to actually select them all by holding shift and then under create hit create shapes from vector layers so these are all our shapes what i can do is just copy them with command c delete them for a second then i can select all of these delete our old illustrator ones and paste these back in it looks like it pasted them in the wrong order so i'm gonna just for the sake of time manually select each one of these by holding down command select all our ai files to delete them and then just hit the delete key so now we just have our vector versions here and they're all named so if i were to open up this circle for instance and open up transform these are all the properties we have we can move its position we can change maybe at scale sorry it's rotation at scale we could change the opacity so these are most of everything we have to choose from inside webflow as well a lot of the same properties you're seeing while i'm sort of like scaling this up and down the eyes aren't moving with it so basically we want to be able to animate the eyes separately but also have them linked to the circle so if we want to make the circle the parent of the eyes with the eye layer selected we grab this sort of squiggle icon and drag it directly onto the circle shape and that way it's linked up if you want it to you could also select this drop down and manually select the layer you want to link it to but i'll go ahead and select the smiles and the eyes now if i scale the shape up and down you'll see everything's linked together but these are still on their separate layers i can animate independently um so maybe i'll take this first eye and we'll open this up open up transform and then maybe we'll just sort of scale it so you're noticing as i'm scaling now it's scaling from that center point in the center of the whole screen or artboard um if i wanted to scale the eye from itself we would use this option here the pan behind tool which is also the keyboard shortcut of y on your keyboard and then i can drag these cross hairs and see how it's snapping to each corner of the eye if i wanted to put it in the center or manually position where i want it to i can uncheck snapping now i can move that cross hair exactly where i want it so towards the bottom middle but not the direct bottom and that's working pretty well there so now i can add sort of the scale uh now see the eye is scaling from itself if i wanted to only move the top and bottom to where i can squish it i would just click this chain to unlink it you see now i can actually stretch it a bit um so i'll add a by hitting the stopwatch here i'll add sort of a keyframe then i'll advance a couple frames and then just drag this all the way down maybe even just type in zero so it completely closes and then scale this back to a hundred maybe i move these a little closer basically just want it to look like it winks and that appears to be working just fine there so it winks and then maybe the whole smile can sort of jump up um so we can grab this whole circle we can add a couple frames in at a position point then advance a little bit further and have it jump a little higher and then advance further again and we can just copy this keyframe we already created for the start and paste it here so it lands back down where it started maybe we'll make it a little bit higher and then maybe make this not happen quite so quick so we'll bring this out a little further let's see how that looks so it winks and it jumps there's definitely some fine tuning we could do here but that appears to be working just fine so maybe we'll also take this shape here and maybe we want to rotate it so you can also open this all up or you can just hit r on your keyboard which is a quick way to get to the rotate option you'll see it's being rotated from the center so with this same option selected the pan behind we can drag this anchor point this time we actually do want it to snap directly to the center so i'll turn snapping back on and drag that right to the middle there and it appears to be centered up there so now with rotate selected we can add sort of a keyframe go in a couple frames and then rotate it maybe 45 degrees and then go out a couple frames and rotate it back to zero let's just see how this looks so kind of spins in and spins out with the smile um okay that should work good there and then let's say we want to rotate this other shape so i'll drag kind of this anchor point to the center and then click on r for rotate add a keyframe um maybe i line this up with that one and maybe it goes negative 45 so it goes the opposite direction of the rotate this time um and then we sort of bring it back over here and then rotate it back to zero which is where it started um let's see let me hide the grids real quick um and let's go ahead and preview that and see how it looks okay so there's definitely some fine tuning it looks kind of a little wonky there's definitely some fine tuning i need to do but um that's the basics of how you could set up your scene and have that set up um to export it for body movement so i'll just go ahead and render this out really quickly go to body moving and um same options we had selected this time for the settings this time let's uncheck the swoosh and check the smile select our destination folder rename this to smile and then just click render to render it out that one took a little longer but it's finished and we're all ready to import these directly into webflow and start animating them so that's all we need i hope this tutorial was helpful for you if it was definitely feel free to subscribe so you never miss another video and i'll catch you in the next video goodbye

Channel: Timothy Ricks

Views: 6,152

Keywords: webflow, how to, tutorial, lesson, lottie, lotties, lottie files, adobe illustrator, adobe after effects, creating, making, animate, animating, animated, svg, vector, overview, introduction, beginners, bodymovin

Id: JwIApfAZWCM

Length: 17min 1sec (1021 seconds)

Published: Thu Dec 31 2020