Animated Icon Design Crash Course - Illustrator & Lottie.js - FINAL

welcome to day two where we're going to be finishing up our icon design animations using Adobe After Effects and lot ejs before we begin this video is sponsored by friends over at rap pixel rap pixel is an admin dashboard and design marketplace that help designers and developers create clean intuitive and user friendly admin dashboards with ready to use templates that minimize development efforts and costs rap pixel is known for their minimalistic design aesthetic clean code in trendy visualizations that bring data to life they have over 50 ready to use free and premium admin templates to choose from and have been trusted and used by industry giants like Oracle Intel Samsung Intel rat pixel is currently running a massive Black Friday sale where you can avail up to 95 percent off their entire range of templates this week so click on the link in the description to take advantage of this offer everyone what's up Gary Simon here so in day 1 which is just a couple days ago we started designing these icons right here using Adobe Illustrator and setting up all of our layers and paths correctly so today we're gonna make these animate and we're gonna be using Adobe After Effects for that we're going to export it using a Lottie and the body move and plug-in as it's called and then we will step into Visual Studio code for HTML and CSS and JavaScript in order to make these function alright so if you haven't yet make sure to subscribe and let's get started alright so here in Adobe After Effects we want to create a new composition 500 pixels by 500 pixels framerate 60fps that'll create a really smooth animation and the duration is one second because I don't plan on going longer than that the longer the much larger your file size is going to be especially at 60fps I think right now our file size for our data Jason that gets export exported is like six KB that's just one second per icon so it's it okay and now we want to import I've one of the three icons I'm gonna do the clipboard first but before you import it and we want to choose import composition composition retain layer sizes and hit import now that here gives us it puts everything into a composition so our pre comp and so now I we double-click into it we don't see anything that that's because we want to create because right now our borders and all that stuff's our strokes are black and by default in the background here is black so right click down here new solid and sorry everything is loading on my other monitor background color white and we're gonna want to make sure that before we export this I always forget to hide this element or this layer now I'm just gonna lock it so we don't select it by accident but now we can see what we're working with and if you're zoomed up a bit like beyond a hundred percent it's gonna look like raster dat's not gonna be the end result in the browser don't worry about that okay so what we want to do here is I we're gonna take all three of those layers the Adobe Illustrator layers right click go to create and choose create shapes from vector layer now it's gonna basically replicate them but it creates them into actual shapes based on the adobe illustrator paths now we don't need these ones anymore that we just imported so we're gonna delete those and now we have these awesome paths that were created as if you created them here straight in Adobe After Effects so you can you can modify the stroke weight and all that stuff now so what we can do now is try to think about you know which layers that we have to animate first based on our needs for us we don't want the checkmark to show up right away that's going to be the thing that animates in so really we have the check right here we can just kind of push this off some point in the distance as you can see when you have just a only a one-second duration we can see frames like five frames ten frames you know obviously we have 60 frames for 60 seconds so what we want to do is I by default these icons aren't going to be animating so when we're in our JavaScript we can set it to not autoplay no that'll be false so this is what's going to be on frame one so now what we want to do is I want to kind of just take this right here the paper outlines layer and we want to hide the stroke gradually we'll make it kind of just erode away in a sense so to do that we're going to expand this go to contents we can add trim paths and then in trim paths we have our key frames of start and end so if we choose start and go all the way to a hundred percent it hides it and that's the way it'll animate so we start at zero we're gonna put a keyframe there so you click that icon and then we're going to come out maybe 25 frames or so and make that a hundred percent now we don't see it I we still see it because this right here is on it is visible and it's basically the same shape except the check mark but really this animates now like that so if I hit 0 on the number pad on my keyboard this is what we have so far it doesn't look very good because we haven't applied animation to this element so what I want to do is maybe start right here and we're gonna do the same thing we're gonna add our trim paths alright and we have to think about what we want this to look like after the animation is done so I think we'll take our trim path and let's just play around with where we want this to be maybe like right there so that happens to be 77% on the start and I think we'll put a keyframe right there that's where it's going to end up all right so maybe when this is coming in will have this start to animate in as well so let me think here alright so I think what we'll do is bring this out they're almost we have to modify this keyframe now okay okay so let's go ahead and hit zero on the number pad okay I think I like that so really at this point we're not even using our full 60 seconds so I think what we can do is take these two elements our keyframes rather and just push them out and then we can take our keyframes and you can apply velocity to them there we go all four selected keyframe assistant we can do easy ease and it's it's looping but it's not gonna loop when we're actually in our like when it's on actually doing being displayed on the page oh and by the way I am kind of wrong about this I forgot we also want to apply a there we go alright so I can actually kind of like this and it's it's looping over but of course it's gonna end right here so if I just scrub through this and there we go all right so I like that and now what we need to do is go ahead and actually export this so you want to make sure that you have the extension body movement right here and so the body move and plugin you can get from a scripts com forward slash body moving it says name your own price so you know it is free if you put 0 if you wish although if you use it you know support them that's always nice so add that to the cart get it installed they have their own little installer at a script so just figure that on your own and then just go to window and and you choose body extensions body move and this shows up so really the one that we want to export first we have to select it it's the clipboard and then we have to choose a destination alright so I let me go in my project over here there we go we're going to export this one it was just going to call this a new folder clipboard and this will be clipboard and it'll say this as a JSON file so we render there we go we're ready to rock so now eighty scripts also um let's see here well we'll cover that later but really what I want to do now start focusing on the other icons so let's get the other one to done alright so at this point let's go to file new and we're going to replicate this project again or replicate the process at least oh you want to make sure this is saved by the way so project will call this clipboard well we'll just call this AE AE project there we go alright and we'll go to file new new project and we're going to choose a new composition same thing hit OK we are going to import this time we'll do the hourglass nope I forget this every single time hourglass choose this one hit import and then we'll double click into it take these three right-click choose create and create shapes from vectors get rid of the original three delete those will create a new solid so we can see them position at the bottom and hide it oh that's a I knew I would forget on the previous one I didn't hide the white solid before I exported a lot of you so don't have to redo that but no big deal so now we want to start animating this right here alright so we need to figure out about how this will anime in we're here at the first frame it doesn't want we don't want it to look like this we wanted to be without this and this up here so I know for sure the sand we could push that off sometime in the distance and this part we can hide it by going to add and we'll choose trim paths and there's also an offset that we can have for the angle and all that stuff so for instance if I let's see here if I choose start and modify the end we can kind of make it come up if we animate it correctly but initially it needs to be animated in such a way where we don't even see the thing like that so now it's completely invisible we'll go ahead and put keyframes will do offset a while as well just in case we want to experiment with that keyframe but then we'll come up maybe to around 20 actually first we're going to figure out when we're going to be animating the other s stuff so we'll just show this layer rate at frame two and we're gonna use my keyboard up arrow key here we're gonna put it right to the top all right and then we will have it come down so we're gonna scrub forward maybe it's around now 20 and we are going to move it let's see here is it this element there we go let's expand this transforms and position on y-axis will be pretty much down here oops and we want to make sure that's keyframe there and the position will go back up right there alright so what we'll do now is take this and we can also get rid of the end part of that because we're not going to see them after that point so we can take this and duplicate ctrl D and just kind of move them forward duplicate one more time maybe make them come in a little bit together like that in fact I think it would be make it make more sense to make these a little bit longer I'm gonna take those two and delete them now we'll duplicate this and then we'll duplicate this okay like that now as the first piece of sand hits the ground or so or the bottom of it we'll have this layer the bottom start to animate up so we can just bring this up over here and we will get out our start and end an off set you could just hit you so now it's only going to show those properties and I'm gonna put a keyframe right here and then we will start to make this kind of come up maybe like right around here it will come up so we're going to adjust this so we can start to see things like right there and then we'll move forward make it raised a little bit more maybe on that side and then move forward here and then do the same thing like that and I guess we could kind of move things out just a tad bit more spread them out and again you can really spend a lot of time fine-tuning these things alright but I'm not gonna be too anal about it just because this is a tutorial okay so let's hit zero all right kind of boring animation in terms of the velocity and such so we can right click this easy ease a little bit more interesting now awesome so now what we can do is save this and this is called I will create a new one this is going to be the hourglass all right and then once again let's get all of our layers out here which hide that background then we can go to window extensions body moving and where is that at there we go why is that so big and then we can take our hourglass and export that here call hourglass and render done awesome now we have just one more to do so I'll save this and then we'll go to file will save as and this time it's going to be what is this one this is the download ok so this is going to be download all right so we can go ahead and get rid of that we're going to go ahead and double click this is download wow I have to do it every time download there we go composition retain layer sizes double click and yeah that's right we only have two layers this time we'll take them both right click create shapes from vector very Pripet ative obvious that's why I'm doing 3 so that you build up the muscle memory we're gonna create a new solid it's gonna be white background and we'll lock it all right so before we do anything we're going to go ahead and create the mask on this layer right here so why don't I do now unfortunately when I tried this before and I was setting out the project I tried to create the mask this way but it was doing that I so I didn't want that so we're gonna make sure nothing selected and we're just going to create we're gonna get right here to the center and then hold alt and ctrl and create a rectangle just like that so it's on its own shape layer but if we go ahead and we choose layer masks new masks I come out here in masks just copy this while holding a row selecting this just hit ctrl C and then we're going to come out to our I'm going to hide this layer we don't need it we're going to come out to our arrow and now I'm going to paste that in and so now we have a masks right here and we need to move this over unfortunately didn't remember its position and we want to invert this oh wait sorry let's go ahead and delete the mass section here that's not supposed to be there it's supposed to be on the cloud there we go so now we're gonna move this in and unfortunately it's not letting me select there we go so now we can just put this position it with your keyboards we want to invert this by the way so we go into masks and we choose inverted and now we have our our mask setup now one thing that you should realize is when you're when you plan on if you have if you plan on having a mask in your body or your body moving icon your animated icon SVG the SVG renderer in the the JavaScript properties when you go to create the instance of the icon it doesn't play well with masks so you may have to use canvas the canvas renderer instead if I'm speaking gibberish to you you'll see what I mean I when I show you when we get to that point but for now just realize that there is a limitation with that but this is what we want though so this is what it looks like by default without being hovered and so we kind of want it to the the arrow to move up slightly and then just shoot off okay like it's like a bow and arrow or something so we have our let's see our arrow or we can get rid of that shape one right there we have our arrow arrows outline and we're going to create a keyframe on position right there and then maybe around 20 it will move up on the y-axis may be right there just slightly as you see it's not much and then we will have it fire off and so on why it's gonna go completely off the screen so hit zero now I do also let's see here I do also want to have the bottom of the cloud to kind of I it'll Bend up with the arrow and then Bend way down when it leaves so what we need to do is add an anchor point on the bottom portion down here of this arrow so to do that we will let's see here we'll take the pen tool and you can see if we hover over the path it'll give us a plus sign now I I want to put in an anchor point like right here and also here and then one in the middle all right great so if we come out here we have our contents we have a group one and a group two I believe this path not sure exactly which oh that's arrows nevermind I'm sorry we're looking at the cloud right now there we go so we have our group line we have our paths all right so we can actually animate the path itself so we'll just put a any keyframe there and then a keyframe right when this reaches its highest point so now we can come down hold your spacebar if you need to pan around and we're gonna take so this was an anchor point already there no well don't be big deal and we want to take let's see here this Hank these two anchor points I guess wonder if I can just delete one of these that's fine and let's see if I can take this there we go we take the pen tool and we hold alt and then just drag out like that we could possibly also do the same thing here to kind of create more of a smooth there we go maybe the same thing here all right like that so now awesome okay so let's I see that alright that doesn't look good obviously so we need to make it go with it I think what I might do is take this key frame right here copy it and let it sit there so we'll pause it alright so we're on the cloud okay I meant to do that here it's it you take this copy it so it'll be a little bit of a pause when it hits it's up there so then our cloud graphic we can move this over we'll go ahead put another keyframe here at path and then maybe right around here we'll make it come down all right so and our here we only want to select this keyframe and it's gonna come down slightly like that and then maybe back up and then finally it'll sit here where it's flat and this wasn't ideal because I added those and I'm messed with those anchor points so I kind of regret doing that but that's okay we can just kind of move these back to try to make it look like the beginning state or it's just completely flat it's not going to be perfect I'm not too concerned about it just for a quick demo the final thing is when this leaves let's hit alright so probably a little bit too much movement on the bottom of the cloud but that's okay what I want to do now is take all of these right click will choose easy ease all right and then what we'll do is when the arrow is leaving we can animate the layer mask itself which happens to be let's see here on the cloud we have our mask right down here and so we can animate the mask path all right so we're gonna put a keyframe like right here mask a path and then we can alter the shape and we could probably just do this really I move it up so now let's go ahead and hit zero and I'll just scrub through this hides okay that mask path we need to move it up higher I thought something look a little funny there and you just need to go higher on that keyframe there we go there we go awesome so now we can go ahead and hide the background save this go to window our extensions body move in download select it I don't know why it's get so big there we go this time it is download will call this download and we will render it's done and there we go so now we're on to final the third finally the third part of this whole process and that is going into Visual Studio code to make this stuff actually work alright so now we're here in I have a blank folder open here in Visual Studio code I'm going to create an index dot HTML we're going to let's see here user M abbreviation exclamation point enter to create some initial HTML we're gonna hit link CSS main dot CSS those of you who follow me know this as I do this in every front-end development tutorial CSS folder main sass you'll need these live sass extension so just go over here to extensions type in live sass you'll find that and then you click watch sass alright and then there index dot HTML we're gonna get started just with how we want to deal with the markup I just decided to use gives you can use almost anything here this is just for a demo so we're gonna have an overall container and inside of that container that container is gonna allow us just used I display grid to Center everything so I'm gonna have a div class called BM for body movin and then also we're gonna use a custom data attribute called data - file and that will be clipboard and that's gonna let us know or differentiate our three icons from each other so clipboard wait I guess that'll be like the hourglass one and then also the cloud all right sweet that's all our HTML markup is going to be for this very easy quick demo what we want to do now is we're gonna go ahead and save this and you want to make sure we're gonna create an icons folder and this is where our actual data are adjacent data that was exported from the body move and plug-in from after-effects this is where they will go so let me right click on an off screen real quickly here and I'm gonna copy and paste those files that we exported so I'm gonna reveal an explorer over here paste those in so as you can see weight was a little bit longer and file sizes so just keep that in mind and these are just JSON files crazy stuff alright so now we need to import and this time we're for this demo we're just going to use a CDN so if I control B to get rid of that sidebar you'll see script source this is the URL of course this is all going to be available in code pen so check the YouTube description for the code and all that stuff I'm will write our JavaScript down here alright so the first thing that we're gonna do because we have multiple icons we're going to use by the way we're using pure JavaScript vanilla JavaScript I'm not gonna use anything else we're gonna use a get elements by class name method for this so VAR b m' for body movement we want to get all three of these so we use document query not query I'm sorry get elements by class name so that class name is BM that's going to give us these three right here now unfortunately the way this is set up it doesn't actually provide you with an array so we can't use for each on it instead we can use array.prototype for each call to iterate through them so prototype dot for each call and what is it that we want to pass in as our variable we created up there a property BM and then how can we reference those individually we'll just call them icon all right so now inside of here this is where we can create our instance of the body move and plug in or the icons so we'll save our Anam for animation equals body moving and this is right here imported from this we're accessible through it rather load animation and then we just put in properties inside of aaja an object here so the container is going to be icon icon is passed in here in other words this is going to be a container this is a container and this is a container as it iterates through each three of these right here all right so it needs to know where it's going which HTML element and also the path the path to the JSON file that we exported from after-effects so I'm going to put in back ticks we'll have it in forward slash and icons folder and then we're going to use here the icon dot data set so if you know anything about vanilla JavaScript and the Dom we have access to these properties right here these custom properties through dot data set dot file so we don't include the data - we just include the custom name I decided to call it file so this will give us this value right here all right and so then we put dot JSON all right so that's the file path for each one and then the renderer we're gonna choose SVG initially then I'll choose canvas as well to show you the difference loop on these are going to be false and autoplay will be false as well now you can try to experiment on your own by making these true or whatever so let's go ahead and save this control B will right click open with live server that's also a plug-in you can install over here open with live server and I'm gonna wait here for a second and here's what it is without any CSS they're all really large and just stupid looking as we can see there's an issue right here and you'll find out that's where we're going to choose canvas instead but now we actually have to use CSS to make these more presentable and then we'll add the hover effects as well alright so the CSS is actually very simple we only have literally three roll sets I'm going to copy and paste our body setting the margin to 0 height hundred a viewport height display grid place item center that will take that that container and just place it centered vertically and horizontally and then just background is a very slight gray after that our container I'm just choosing display flex and that will write a line or left line the icons next to each other so that they're not on their own line and then finally BM for body moving that's there are icons that we wrapped them in so all we're doing a width height of sixty pixels of course if you wanted this to be responsive you'd use I am units if you wish backgrounds white border radius ten cursor:pointer for the hover and then margin and padding is ten so now they should look a lot more presentable if I can find wherever my my toolbar wasn't working there we go so this is what they look like now of course there's no animation applied to these because we have autoplay set to false let's go ahead and just change that real quick to true and let's change loop the true as well it's gonna be crazy because all three of them are gonna go firing at once Oh actually I was wrong about that it actually has oh no I'm not we're at five 501 there we go that was my previous project so this actually you would never want this by default unless you're trying to present to your icons or something to your team so you can see right here this one's messed up why is that messed up well it's because of that issue I told you about when it comes to masks it just doesn't play well in the SVG renderer so instead we can change this to canvas and I don't know why my toolbar isn't working on that monitor but no big deal and now we can see it works exactly as we intended it so now let's actually make these things work on hover and only play and then we can also reverse the animation as well when the mouse leaves so right here what we can do is just add an event listener on the icon instance so if I con to add event listener and we're gonna do let's see here on mouse enter we're gonna say annum which is reference right here it's created right there dot set Direction one now that is what the direction is set by default but we have to set it here because when we create the second add event listener of Mouse leave we're going to be setting the direction to negative one so we can set it to the default right here and then we do an imply so if we save this now and change the East bows to fall ah false I can't talk and go back to our demo here there we go now the thing is is that they only do they only work once so we have to create the second event listener let's copy this mouse leave set Direction negative one and then we play and that's it so now it's going to work as we intended so refresh look at that so it just we're setting the direction to negative one and hit play when it leaves just to create a reverse effect and you don't have to do that just something that I chose to do awesome awesome awesome stuff all right so hopefully you really enjoyed that series it was kind of lengthy but I wanted to do three icons just so you develop some muscle memory that's how you learn these things if you haven't yet though make sure to subscribe because I'm always putting out new tutorials on UI UX design in front-end development all right I'll see you guys real soon good bye

Channel: DesignCourse

Views: 27,400

Keywords: lottie, lottie.js, lottiejs, lottie tutorial, lottiejs tutorial, icon animation, icon design, icon design tutorial, icon animation tutorial, adobe after effects, adobe after effects tutorial, icon design in adobe after effects, bodymovin, bodymovin plugin

Id: 0-LGAjW6BUk

Length: 38min 22sec (2302 seconds)

Published: Wed Nov 27 2019