Animating SVG Icons? UI Animations with ShapeShifter! (Tutorial)

whoa that was pretty cool how do people do that or how about this one or how about I don't know morphing Hannibal's into each other hey everyone Gary Simon of course zetro so today we're going to take a look at designing a custom SVG icon and then importing it into a 100% free web-based tool called shapeshifter dot design which is the actual URL which will allow us to animate it and export it as an SVG that we can then use in HTML and CSS to control the animation and determine when it starts and plays and all that cool stuff all right so make sure you subscribe here if you haven't yet on the YouTube channel and also check out corset row comm let's get started all right so to get started you want to visit shapeshifter dot design and I the very first thing you need just to actually import something so you do that under import and then a vector per table drawable or SVG we're gonna use SVG and that means we're gonna have to use a design app of some sort something that's capable of SVG vector graphics so I'm just going to use Adobe Illustrator though you could use anything else that gives you a pen tool and allows you to export SVG files and so just to get a you know I need an idea of what we want to do something that can be helpful is to check out material do four slash icons and you could do a search here for a specific icon if you want like I don't know chat or something like that or you could just browse these for you know a million different ideas and so I my idea was to take this something very similar to this chat bubble outline and kind of go from this to this and then to this alright so I showed you at the beginning of this video the one that we are doing and so just to demonstrate this again that's what we want to achieve so I'm not going to actually use these because these aren't actual Strokes these are kind of paths that have already been expanded and so you wouldn't want to use those if you if you're trying to achieve this particular effect so what we want to do is I'm going to open up illustrator and by the way before we get there just to show you real quickly get back here this is based on 24 by 24 pixel grid okay so we're gonna set our document up to match that so we have pixels selected here so there's going to be 24 by 24 right okay so let's I toggle our layers right here alright so the first thing I'll do is to create the just the rounded rectangle if we just left-click once we can just choose something like 20 by 20 quarter radius we can change that as needed obviously 12 is way too much so I'm going out to here to around 2 and we're gonna move this into place alright and then we're going to drag this up just a bit and then we're just going to modify this to have this little kind of triangle section down here so zoom up here and by the way this is only a one-point fill we're gonna make it - there we go and now we can see with the direct selection tool selected here we have our two anchor points we're gonna need to add another one and sometimes this is a matter of just playing around with things to get the desired look so pen tool I'm going to put one right here to add an anchor point and then I'm going to take the direct selection tool select both of these hold shift and go down alright maybe right around there and [Music] then I'm going to take this one and just delete it bring this down holding shift and then take the pen tool and then hover over this one right here and left click and then we'll combine those and we'll push this over with the direct selection tool so just take only this Anchor Point hold shift move it over and we'll select everything these bottom four anchor points use the keyboard up arrow key and make sure it sits in there nicely yeah right around there actually I want to go a little bit higher alright so we're at 20 by 18 I might want to get this in a little bit guy will make it 18 here by 16 that we have we have a lot of padding and room to work with here alright so that looks good to me and this is going to be the starting point for us and it's going to be the first SVG file that we import into shapeshifter so if you go to file save as you save it somewhere we'll call this one we'll just call this outline chat and then we'll save as SVG right here so we get save and this little blip will come up and make your settings match here and then just hit OK alright so now we'll go back to shape shifter we'll go to file and nope rather import SVG and we're gonna go to file outline - chat there it is perfectly set in and ready to rock alright so we can notice that we have a timeline down here we kind of have an area where we have our layers and you can group things up and you can create clipping masks and all that stuff we'll get to shortly and then properties are over here based on what you select in the timeline and that's pretty much it for the most part although there are some other sections that we'll take a look at so you can notice we can select this actual the outline here and it gives us all the data that's associated with it like the path data it gives you the fill color you can change all this stuff by the way and that's what's really cool it allows you to animate a lot of different of these properties and actually if you click on this animate this layer then these are everything these are all the properties that you can actually animate so like trim path end and start for instance if we put this to zero well it's no longer there it's invisible and that's how you can begin to animate some of these things so for instance I'll just show you I've click on our path and we animate the trim path end and we put from value 0 to value 1 and by the way this is your timeline you could drag this and you see how it effects it shows the end time so you can just put that you can specify here or just drag it over here but if you hit play look at that let me just deselect that now you can notice it's really fast it's probably showing up a little bit jagged because I'm not using a high FPS for this video but it says animation is 300 milliseconds if you click on that you can change that right here so we'll change it to one second but just note the longer the animation is also based on whether you're not you're going to use the 30 FPS version or the 60 which we'll get to later it will increase the file size quite a bit so let's see here we're back here and this is currently 279 milliseconds you know if you want to change that to half a second you'll see that it'll go a little bit slower but that looks slick already so you can create these kind of cool outlines and obviously very easily and and fast but we're not going to do that so just delete one we just select down here in the timeline just delete it go back to our path and change this back to one and we're right back where we started when we imported it okay so now what we want to do is we want to go from this to this and we can kind of you could do it a lot of ways really but we're going to basically create kind of like a wave effect that rises and this is based on one of their demos that they had if you go to file demo and then choose the heart break one I think it was called you'll see basically we're going to do the same thing so it's gonna kind of fill up I all the way so how would we do that well let's go back to illustrator and I'm going to take our pen tool and I'm going to just click right around here and left click and drag out a bezzie a and two right there and then I'm just going to come down it doesn't really matter exactly where I'm at yet but I'm just holding shift and I'm connecting everything up now this one will not have a stroke so we're just going to hit zero there and it's going to have a black fill all right so the starting point of this animation is actually going to be outside of the chaplet alright and it's going to be we'll just say it's down here actually we'll squash it further all right so it's gonna be real small like that now if we go back to our layers and you go to window layers by the way and we come over here what I want to do now is just delete this the original path and then I'm going to go to file save as and for now I'm just gonna make it anything because I'm not actually going to save this actually yes I am we're just gonna call this fill and I'm gonna hit save and by the way notice this SVG code if we click this it will pop up a text editor here where it shows you the code associated with this so the important part right here is this right here this path D equals these are all the coordinates that really make up the shape so we're gonna be referring to this in a second so just note that and save this so now we can go back and we're going to import an SVG and then our fill looks like crap doesn't it so that's expected though what we want to do now is import a path here the same path from before so our outline chat and we're going to by the way it's it's called by the way can I rename this well probably can I'm just being slow at the moment file yeah I what we can do is up here for this path too which is this one right here the copy we click on this more options there and then convert to clip path all right so now anything after it I will only show up in this area all right so now what we can do is we can animate this right here to grow essentially and we can change the path data property so what we'll do is take this I little icon right there and we'll choose path data so you're gonna go from a from value we can see the whole thing right there from here which is the initial to something else so how do we change that well we'll go back to our Adobe Illustrator back up here control Z and then I'm just going to drag this up oops up to here above just so that it will fully cover everything alright so now we can delete this file we'll save as will overwrite it it doesn't matter but we're not and I'm not actually going to save it just hit yes here and then we can get our SVG code copy the path D property get out of there and hit cancel we just back up a few times here and then go back and then paste this in here alright so it looks a little bit silly right now but if we find our path data where we're at here okay it's not showing up showing up all the way over here there you go if that happens just use I if you're using Chrome hit ctrl and your scroll will scroll wheel to change the zoom settings so you can see everything this needs to be at the beginning so we're gonna drag that so now we hit play now let's look at it without that selected all right and that's how you would do that okay so let's make that a little bit further all right cool so now let's do the actual lines and just to simulate with that I'm gonna go ahead and just die yeah we can hide that and then for the lines let's go ahead and fill this with a black so that we can actually see what's happening all right stroke we can just we need that now for the lines we'll go ahead and use the line tool just coming out from the very left holding shift and we'll make our first line you know something right around there make it a two point fill of white oops not a fill we don't want to fill all right so this needs to be white okay and you just want to get a setup you can use the direct selection tool to take the anchor points and position it where you want it to be and then once you have that done we can go ahead and duplicate that so ctrl c ctrl F move it down with your keyboard arrow keys and we'll take the direct selection tool move this in with our keyboard arrow keys maybe one two yeah just twice and then replicate that process one more time control C control F move it down now this is too much distance between these so I'm just going I'm only going to make it one so move this up one and then this up one take our there we go alright so now we're gonna go ahead to our layers here and I'm going to delete this one here and as well as this one and I'm also going to just temporarily delete the very bottom and middle and I'm going to save this all right so ctrl shift + s to save and we're gonna call this here line 1 and the reason I deleted those is because an SVG code it will include that stuff what you just don't need so we'll save that and then we'll back up and then just back up twice the other ones that I want to delete so the first one that I kept would be this one so we can delete that delete this and this will give us the middle one so I'll save that as line two and then we'll back up and then delete these two there may be a better way if there's a better way of doing this let me know in the comments all right so now we have everything we just backup to get everything that we start up start it up with I started out with other and then now we can import those three files so if we import SVG line one two three all right so right now they're hidden because it's showing up after I the what he call the clip that we have so if I select them you'll see that I accidentally exported the wrong one so I'm just gonna go back and fix that real quick um this is the one that we want so I'll go ahead and just delete all this this one that's hidden alright so this is actually line three yep and save sorry about that import line three all right so now we select these there we go all right so I'm going to take these here and I'm gonna move them up here each one needs move separately apparently all right so now they're going to show up over and if I screw out here just a bit what we want to do rather is take our path right here or a clip in this shape and let's hit ctrl G to group those so now I believe we can take all those three and then it won't be affected by that path I thought you had to move it up but if you just group them up there we go but we don't want these right here right so we don't want these to be show to show up at the very beginning instead what we can do is animate the trim path end portion right here so we'll take the we'll take each three of these so the first one here let's move this up so this is the first second and third so path three we're gonna take that and path end will be 0 this one as well would be 0 and then this one will be 0 as well okay and then the point at which we want them to show up which is right around perhaps right here we can I'll take this first one we're going to animate the trim path end from zero to one all right and pull this out a bit so there we go so if we hit play cool that's pretty good to me and we'll do the same thing so take this one for path for trim path end zero to one drag this over here and you could stagger the animation if you want all right and then finally same thing for the last one all right so we'll drag this over yeah might as well take each one of these and drag them out a little bit more all right so let's it play awesome so now what we can do is export it so you go to export by the way you can save these and they're they're custom files for a shape shifter so you can save them to your computer and edit them whenever you want later on and now we can just export these as either just SVG vector drawable animated vector drawable and you know these are some of these are specific to you know actual mobile apps formats but SVG sprite sheet will actually export an HTML and CSS file with animation along with a SVG file that will contain all of the frames essentially so if we do that it'll download a zip automatically and if we open that up let me it's off screen let me drag this over here for a second all right you'll see we have a 30fps version and a 60 so obviously the 60 would be smoother but larger and file size so you can see 89 Kb there may be a way to drastically reduce that by the way so I would look into that and then what we can do is just double click on the HTML and we can see it right here so now you can see by default it doesn't stay there but that's based on CSS properties that you can actually modify yourself so let's do that real quickly I'm going to take those three files that are inside of the zip file that just downloaded that them and then put them into a new folder all right it just paste them here and a new folder right here that I will open up in a code editor and here we are alright so I'm using Visual Studio code by the way we check out the HTML all this is is just a with a class of shapeshifter and play and a background image set to the SVG all right so the SVG file of course is massive so you definitely want to take into consideration when you're creating these and if there's something you know if you're working with a project where speed is important so do what really makes this tick though is this sprite the CSS file basically so it's very simple we have an animation up here called play 60 and it basically just changes the background position on this play right here so this play class simply adds the animation name which is what makes the animation play so if you wanted to make this something clickable or you wanted to be able to control when the animation begins based on you know JavaScript or some event then you could do that of course with JavaScript so just to show you how that would be done real quickly we can go to our HTML and hit control B to get rid of that sidebar and we'll come down here after the div and we'll put in script and we'll just use vanilla JavaScript for this just basic plain JavaScript get element by ID and we're going to give it an idea called button and then add event listener on click function all right inside of here will simply say this dot class list and we're going to add a class called play so that means by default we're going to remove this from the class and then also give an ID of button all right so we'll save that I'm not done yet I've to go to our CSS file and let's just I add a couple rule sets here padding-top 30 pixels let's see here I want to get this centered up for us margin Auto and also let's make it so that it doesn't reset the animation so animation film mode will be forwards and that makes it so that the animation once it gets to the last frame it won't reset itself alright and so it's me cursor:pointer or as well alright and I think that would be good so now if I just right-click and reveal an explorer and double click on it and also zoom up my browser so we can see this much more like 500% click on it and there we go awesome stuff I so really I've only just scratched the surface of this shapeshifter tool there are other possibilities that where you can actually modify the shapes and it'll more from two different shapes themselves and that's something that will took it take a look at in another lesson alright so hopefully you found that useful and if there are areas that are cuve improved let me know in the comments but otherwise give it a like and make sure you subscribe and I will see you guys soon all right bye

Channel: DesignCourse

Views: 172,937

Keywords: svg animation, svg icons, svg icon, svg tutorial, shapeshifter, shapeshifter tutorial, svg icon animation, svg microinteraction, svg microinteraction tutorial, microinteractions, microinteraction, shapeshifter animation, animating svg icons, animating svg, animate svg, ui animation, ui animation tutorial, ui animation examples

Id: P35hQOsW0xU

Length: 26min 11sec (1571 seconds)

Published: Wed May 02 2018