SVG Clip Path Tutorial - Create Awesome UI Animations with Clip Path

Key Takeaways

today I'm going to be showing you how to do this bro before we begin to want to mention this video sponsor Skillshare comm which is an online learning community for creators with over 25,000 classes in design business and more so whether you want to feel your curiosity your creativity or even your career Skillshare is the perfect place to do just that for instance you're about to watch my tutorial that relies on SVG but you could watch this full SVG course and others at skill share go share is also super affordable with an annual subscription of being less than 10 bucks a month but if you're one of the first 500 people to click on the link here in the description in YouTube then you get the first two months 100% free so join up everyone what's up Gary Simon of course central com yes I'm not behind my regular environment that's because I'm revamping my whole studio setup I may be able to be ready soon I'm sorry I know you wanted to see my room so bad but anyhow today we're gonna be talking about CSS clip path and using SVG specifically to create this tutorial or this little project from scratch so if i refresh just to show you one more time we'll see we have some sort of interesting animation taking place that's filling up this whole nav container and what's happening here is there's multiple clip paths that we're animating with the help of G's app which is the green sock animation platform I have a bunch of tutorials and a crash course on it if you've never heard of it before but it's a JavaScript animation library but yeah the core focus of this tutorial is to show you how to use and also animate clip paths to really add an extra I don't know sort of style to your animation and your user interfaces as well alright so let's go ahead and get started but first make sure to subscribe alright so we're gonna go ahead and get started here in Visual Studio code I have a blank folder open I called Clippy and we're going to create a new file index.html my god put your fingers in the right place index dot HTML hit exclamation point for Emmet HTML template in there and then we're going to put in a link to a CSS file that doesn't yet exist in main CSS let's create CSS folder and main dot sass will use we're gonna need need as always we're going to need to use the sass reloader or to watch it and you probably don't see this if you don't have it installed so come over here to your extensions and type in sass and I have I which one do I have live sass compiler this is the one I have installed install that also use live type in live reload live server rather and this is something we're also going to use so it's I install both of those and then just restart your Visual Studio code alright so then we can click watch sass real quick nothing to really watch just yet and we will come over here to index.html just get the the actual HTML ready burst control B to get rid of that sidebar and what we'll do is let's see here actually we'll leave the sidebar because I don't want my head in my new location getting in the way of the code so let's put first just the HTML that we're going to need not the SVG so we'll put in button and we're just gonna have I don't know an ID of open and we'll just say open nav ordinarily you would probably want like the some other icon for that but I'm lazy we're gonna put in a div here of class wrapper alright and the reason I'm going to need to encase the nav element in a wrapper is I just specifically for making this position:relative and then we'll make the the element inside of it or this this element rather the wrapper overflow none so that when we do the animation on the sidebar and it comes in from the right side of the browser it's not gonna create vertical or horizontal scroll bars alright so now if you will Li a and then we will type in I nothing for that and I'm just going to type in just some stupid random words well it's not really random it's it's sort of a sentence all right there we go and then down here we'll put in it just a paragraph of lorem ipsum there we go all right and that's all no it's not all outside of the wrapper we're gonna have an h1 element with bro whoa so stupid okay so now at this point let's go to where I mean desu ass and let's get the CSS going for this real quickly so I'm not gonna hand type all this because I want this to go quicker because really this stuff isn't pertinent to the purpose of this tutorial I will hand type it when we get to the the actual reason you're here which is a clip pass stuff so I body HTML height 200% nothing fancy happening here and then we're gonna have let's see we're gonna have our wrapper all right and inside of this remember I mentioned we're gonna have position:relative overflow:hidden that will get rid of the impending for horizontal horizontal scroll bar inside nested inside of here with our SAS nesting here we have our nav element as you can see we have a width of 20 percent so it's going to take up 1/5 of the horizontal space we're floating it right background color height nothing important yet with exception to this element which I'm going to go ahead and hide that are uncommon it rather we'll get to that in a little bit our UL element we're just going to set the list-style-type to none that gets rid of the stupid bullet points that we never want for the most part also inside of here we're going to have our list items actually because list item is empty we can just do this there we go and then outside of that we're gonna have a paragraph element and I'm just setting this to like a as you can see we're using purple so this is like a light pink right here and then we close up this UL element right there and then that element and then that element I think okay that's it that's all we need there we go all right and then after that we have our h1 element again nothing crazy happening here and then also we have a ton of we have a big rule set for a button so position absolute top right margin font size background border color padding cursor bout and again nothing that's pertinent to the purpose of this tutorial I'm just styling the button and have a:hover rule set for it all right and that's it for now so let's save this and let's right-click and open with live server alright as you can see by default we see this nav element which isn't what we want what we want by default is this to basically be hidden all right and also we're gonna have this anime in right after the navigation shows up so let's get to that shall we alright so let's get our G SAP animation and working I think before we do that though I do want to show what clip path is so we're gonna create the SVG elements up here so we're just gonna have a single SVG element mm isn't using that obviously so we'll do it ourselves we're gonna have a Deaf's tag alright so when you're you you're setting up a clip path you have to include it into two different tags first the Deaf's tag and then also the clip path tag and we're gonna give it an ID of just clip path alright so any of your SVG elements now can go inside of this clip path alright you're not going to see the these elements though only they're only going to be placed they're gonna be basically the it's going to reveal whatever element that we have specified for the clip path right here so obviously we have it placed on our nav element I but we're just uncommon commenting it I'm gonna leave it uncommented for a second though so we can put in here you can go in to your favorite vector drawing application you can go I in wherever you want I could be XD AP illustrator and create your own SVG shapes that you can place inside at the clip path I'm just going to keep this simple and we're just gonna create a circle so I we don't have to step into another application we're just going to give this a class 1 CX I is going to be 200 this is I basically the the position of it x and y this is going to be 400 and then R for radius is the size it's going to be 1,300 alright and I'm also going to put in a transform well for now I'm gonna leave that blank rehear so we're just going to close that off and we'll save it and you'll see we're not going to see anything at this point in terms of a you know any type of like circle and so we're going to uncomment this save it and then also we're gonna go right over here and add another rule set alright so we're going to add SVG alright so we'll just do it right here we're gonna say position:absolute top:0 right is zero you could use left zero as well with 100% and height hundred-percent all right we can see that this whole area is completely filled out it looks like nothing really changed and that's because I this were here we have a really large circle and it's basically encompassing the entire area of that navigation so if we change this to something like 300 smaller and save we'll see now we can only see just this circle that we've defined now what's really cool about this is we can add animation to this either through regular CSS keyframe animations or we could also if we want to have something more elaborate in terms of animation sequences we can use G SAP or any of the other JavaScript based animation libraries out there so in our case we're to use G SAP which is green sake an early animation platform have a bunch of tutorials on it also a crash course just look through my channel I search and find that so let's go ahead and just use the CDN version I'm just gonna copy and paste it if you just go to google and type in g sap CDN the one we want is tween max-min not j s we're gonna put a script tag here just writer very simple java script down here so first we're going to create an instance of the timeline alright so we'll save our TL equals new timeline max paused is true alright so i guess initially we don't have to pause it we will add this in after though because we wanted to only work when somebody clicks on something not right when the page loads when we were more experimenting now you're gonna see it will actually I only work it'll work just right when the page loads so from we're gonna say ATL from so you can either use the two or the Fromme method you can look up the docs I also explain it a little bit better in my other videos we're gonna first target target not the SVG because we will target the SVG circle element here to animate that clip path but we're first gonna have our nav come in from the side so it's good like I said it's gonna be a simultaneous animations occurring so just our nav element you could also put an ID or a class there next parameter is one for other delay just one second and then we're going to open this up in an object so we're gonna say from the exposition I which is the horizontal location we'll say it's going to come from a hundred pixels I to the right of its I starting position essentially so then we're gonna say display:none because remember we're going from this value so this is gonna hide it because with this birds going front it's gonna be a starting point of it and then we're gonna say ease you can add in easing if you wish power to ease out if you want to see all the available easing options that G SAP has to offer just go to google and type G SAP easing and then you get the first result and you'll see there's a nice demonstration of them working as well in action delay we're just gonna set that to zero we're leaving it there just because I'm gonna copy and paste this and change this and for the other steps here first so let's save this and refresh alright so we can see it's just kind of sliding in over like that so if you wanted to come even more you could put like 300 for instance like that very very simple stuff okay so now let's continue on we're going to say this time we're gonna use the two method so TL - all right so we're gonna say circle dot one because remember we're kind of going to have multiple circles here so we're going to say three seconds for this one and we're going to open this up and we're gonna say scale will be one and by the way we're going to add a transform I property here which we can add on SVG here scale zero so we're gonna go from zero to one down here all right and then next after that I we're gonna put in X is going to be 0 y is gonna be negative 1,300 we're gonna say YZ will be the same ease here ease out and then we'll also have another parameter down here after the object and that is going to be the offset so we put it quote we want it to be a negative offset so we put negative equals and this is all G SAP stuff and we're gonna say 1 because if we don't add that add this parameter this will this right here this call will wait until this is completely finished we want these to go simultaneously so we're saying start at negative one second and this happens to be one second as well so you can experiment with these values alright so now let's see what happens I'm not sure what the result yet will look like and we can see that we can't see it and that is because I we changed our default value of 1300 to 300 so let's save this to make it larger and now we're gonna see this happen all right so we can see it just shows this top portion and really you could position this around and change work with these three values along with the x and y values and you can just use perhaps just one circle I I wanted to show how you can use multiple clip paths and so you can see how that one kind of takes in just the top portion so let's add another circle real quickly and we'll just give this a class of two and we need to position the x and y in different areas and again you may be wondering how did I know to make this 200 and 400 30 it was just experimentation so I'm not gonna say here experimenting live while you guys wait for me to get it right but that's what I did essentially to get this working so what I found was negative 2200 in 1904 the X&Y and then eight hundred for this radius worked well and then we're gonna copy this and for to the values I found that worked well is this is going to be a four second duration a 1.8 scale we're gonna take 2,900 here on the x and negative 500 here on the Y and this would be will start this at negative 3 woohoo okay I messed something up there oh and of course I forgot to change this to 2 let's give this a shot and it's still up oh yes that's because I forgot initially if we come back to our sass file paste in or specify rather circle transform origin 50% 50% so it basically means the center of the item itself I there we go now we have it working as we want now to make this clickable let's go ahead and go ahead and let's see we're specify a click event listener on our button so document we're going to say get element by ID that's going to be open we're gonna add an event listener click and inside of here we're gonna say this dot T l dot play and that's a method that we can use there's also stop pause I believe there's reverse so that if you wanted to add your own X icon to let people close it you could do that as well just kind of toggle it paused is true alright so now let's give this a shot so now this yet we'll have this working in a second if we click it there we go so now let's go ahead and one final thing just for the fun of it I I'm not even gonna bother typing it out I'll just paste it from a different document we're gonna put in TL I to now from rather for h1 element so we're going to go from and a passive zero down from a hundred pixels we're gonna make it bounce for the easing and then all that other good stuff so now we're at the final result normally you'd have your user interface of sorts and there we go and how about you guys as your own little exercise create an X icon so that people can click off of this and of course you would specify that right here inside of the nav perhaps as another link styled differently like a close button right here and then you could set this up in the JavaScript so that you add another click event listener for the close button and then you can reverse the this right here and you don't have to specify this code at all you don't have to like reverse it you can just call this do that I reverse I believe and there we go so awesome stuff all right so hopefully you found that enjoyable make sure to subscribe already as it suggests here on to the interface I didn't change that just happen spontaneously I think it's a sign but yeah hopefully now you can start using clip path as well as animation to really add an interesting sort of aesthetic to your animations and your user interfaces as well of course this isn't just limited to navigation drawers that kind of pull out like this there's a lot of other use cases just be just experiment with it essentially and also experiment with those x and y values try you know it's it could be a little bit tricky to get the animation correct based on what you want you just keep at it all right I will see you guys very soon goodbye [Music] [Music]