Animation with GSAP - the basics [ A beginners guide to SVG part 5 ]

in this video we're gonna be looking at how to use G SAP to make an SVG animation like this hello my name is Kevin and here at my channel we learn how to make the web and how to make it look good while we're at it this is the final video of my SVG series and in this video we're gonna be looking at how to create some cool animations with G SAP or the green sock animation platform which is a J's library which makes it a lot easier to animate things if you missed the previous videos in this series I'd strongly recommend you check them out as they look at why we use SVG's how to code them up and if you've got more complicated SVG's what you get when you export the code from your software and how to clean it up and optimize it to start things off in this video I'm just gonna stick with CSS animation using keyframes but then we're gonna recreate it using G SAP so we can really understand how it works and then we're going to do some more complicated things with G SAP to finally reach what we saw at the start of this video so to start things off I've made this SVG in Illustrator so let's just hit save so we can see that over here if you're wondering how my browser Auto refreshes I do have a video linked it down below in the description so you can check that out so here's just a really basic SVG I have cleaned it up a little bit from illustrator the only things I've done is added class names to what I have here so I have my SVG as the class of hamburger on it I've made it really nice and easy for my view box so it's just 100 by 100 which makes it a lot easier to use and then we can come over here and look and I just have a line 1 line 2 line 3 and they just pretty much stretch across no fill on them a black stroke and that's about it and a width of 4 on those so nice and simple let's just bring a style tag in here to make my life a little bit easier if I give my hamburger a background of red you'll see that it's a lot bigger than the hamburger itself so I'm starting these at 25 units across so there's 25 25 and then these take up 50 total and there's obviously a lot of empty room on the top and bottom I'm overdoing it a little bit with the extra space but because I know in this animation by the time I'm done I need be used to move around a lot so if this stretches out one way or another if they're moving up and down or spinning around I need to have room around it so it doesn't get clipped off so that's why my view box is a lot bigger than what I'm looking at with my SVG if you're not too sure what I'm talking about when I talk about my view box go check out the video on the viewport and the view box that I did where I look at explaining the whole concept there and how those work so obviously we don't need that anymore let's get rid of the red but I'm gonna stay as I mentioned we're gonna do a simple little animation here so on here I'm gonna do I want to do a little hover animation so when I hover on top it's gonna animate so for that we new hamburger hover so when I hover on top of my hamburger I want the line one that's inside of that to do something but I don't only want line one I actually want to do it to all of my lines here so I'm just gonna copy and paste line 2 and line 3 here so I'm selecting all three of my lines and then we're gonna do something so just to show you let's just say we did a transform scale at 1.5 or something like that just so we can see that save when I hover on top we can see now that all of them are getting bigger now it's not what I want to be doing it's really awkward what's happening but just to show you what's happening now so a better way to do it so what I'm going to do is just create some keyframes here and so I'm going to do at key frames and we're just going to do three key frames I'm going to 0% keyframe and I'm gonna do a transform just like we had before but I'm just going to do a scale X so it's only in a scale on the x-axis it's not gonna scale on the y-axis like we had before and it's probably a bit too big so we'll go with oh we'll see what happens with 1.5 so that's good then at 50% we're going to do it transform whoop 0% it should be 1 this is where I want scale X to be 1.5 and then I actually want this to go back to what it was at so we're gonna do 100% and I can just copy this one here copy paste so the one thing I forgot to do was give this a name so we're gonna call this line grow so what I want to do is animation line grow let's do an ease out over 500 milliseconds and see what this looks like so you can see they sort of shoot out from the side like that um so it's working but it looks a little weird so let's just come on here for now and do a transform transform origin so where is it transforming from and what's it say 50% 50% so it's going to transform right from the middle and we can see now that it's just growing like that so we get a bit more everything going on now the only problem is they're all doing it at the same time and what I want is this one and then this one then this one so to do that I can come down here and I can do a hamburger hover line one and for that one I can do or not line one we already have line one's gonna go it right at the beginning then I can do on my line too I can do an animation delay let's do like 75 milliseconds and then I'll copy all of that for line three but line three will get double so 150 milliseconds so now when I do it you can see it's going from the top down to the bottom so this one's going there's a delay of 75 milliseconds then the second one is going and then there's a delay of 150 milliseconds and the one on the bottom is firing after that so I think that looks nice and cool and fun so that's how you can do it with a CSS and it's not that complicated for simple animations you can a hundred percent use keyframes it keeps you away from having to use a JavaScript dependency which is always a good thing and there's a lot of cool and fun stuff you can do with it you can push this a lot further than what I did with just this you can do a lot of really cool things you can probably get to what I'm going to do with the and if you really wanted to but for now let's just take all of this and comment it out because we don't want to be using it so I'm going to save that and now we've lost our little animation and what we're going to do is we're gonna come over here to the green sock website so let's check this out a little bit um green sock engaging the Internet and pretty much they have G SAP the new standard for html5 animation it really is an amazing JavaScript library here and it comes with some really cool plugins also to do drawing along a line let's just see ya the draw one here is really really cool and they have a morph 1 the morph SVG plug-in which is incredible I don't want to be worrying about that I just want to be using their regular old G set which is amazing in its own right so on their site here I'm just gonna go one thing these guys need to do is work on the website because it's not very responsive I was looking for this download link right there so we're gonna click on download and I'm just gonna copy their CDN link this is probably the best bet for you now one thing that's really important with gzip is there's a few different versions of it I'm going with the regular robust one here there's a lightweight version as well or you can even customize it so there's something called tween light and tween Macs and timeline light and timeline Macs and these are what we're going to be using I'm gonna be using the Mac's or versions of them because it just I don't have to worry too much about it now the file sizes are a lot bigger you can see 36 KB versus 9 KB and well for the timeline it's not too big of a difference because I'm just worried about learning and not so much on anything else I'm just going with the robust which is between Macs which just comes with everything included but depending on your project you might want to optimize it a little bit and go with something a bit more lightweight once you know exactly what you want to do but if you're just learning I would suggest sticking with the robust one so I'm just gonna copy that and close it and let's add that over here I'm gonna go down and save that so it's in there and let's go and add in a JavaScript file of our own so after that I'm going to make a script tag and this one SRC will be J s slash let's just call it hamburger dot J s for now and hit save all right so with that done I actually need to create this file because this doesn't exist yet so I'm just gonna come over here on the side make a new folder called J s and my file and in there let's make a new file called hamburger j s super so the very basic way between Macs works are the syntax of it is something like this you're always going to start with between Max or if you're using the green light or the timeline depending which one you're using but you'll put the name of it there the method is a predefined method that G SAP is giving us so we're going to explore a few of those shortly the element so what is it that you're actually going to be transforming or animating how long it lasts and this is always going to be in seconds and then the VAR so these are the properties that you're going to be changing the the scale the size the color different things like that these all falls into here now for the element you could do a big long nice selector there but usually the easiest thing to do is define it first so I'm gonna just create a constant here of hamburger and have it equal to doc you document query selector and it will select my dot and Burger great and now what we can do is we can do our between max so again we start with tween Max and then we want to do our method so the two most basic methods are to and from I'm going to start with two and we'll look at from in a second so I wanted to transform or animate two so now I have to say the first one was my element so my element will be my ham Berger we want to take two seconds now it's always in seconds you don't need to put an S or anything like that like you might with when you're playing around with CSS and then what do we want to do so here we need the VARs or the different properties that we're going to be playing with so you always put these inside of curly braces and then you just list out everything you want to do so just to start with let's just see if this is working so I'm gonna do an X and I'm going to put 100 on this and what that means is trends translate on the x axis by 100 pixels so let's it save on that and there you go as soon as I hit save you can see that that did that so I'm gonna hit refresh as soon as the page loads you can see it starts moving over by 100 the other option we have is from so if I do from and I hit save it's gonna start here and then go back to where the CSS was dictating it to so hit save on that you can see now it's moving back that way now there's the problem is sometimes you get a flash or it jumps but now we can see I'm going to refresh so it's starting from there and going back so to or from cool yeah um so let's apply this in a more interesting way for our hamburger here so what I'm gonna do first is I'm gonna just gonna define all of the different parts of my hamburger to make it a bit easier to select so I need my line one instead of doing a query selector on my whole document the line one is inside my hamburger so it makes it a little bit faster to do the query selector this way and if you're really after performance query selectors aren't the fastest but they will get the job done in this case so I nee want my line one two and three now I don't want to be doing this so let's get rid of that and the other thing is right now I don't want I want to make like a hover event right like we had before so to do a hover if I'm using jsv or what I'm going to do is ham burger and we're gonna add an event listener to hear and so what the event is gonna be is a mouse enter and one thing to be careful here is not to do a mouse-over because then it's gonna keep running as long as my mouse is on top of this we don't want that to be happening so with a mouse enter it's only when the mouse enters that area not that it so the animation won't keep firing at the event the event listener won't keep firing while my mouse is on top of it so when that happens we want something to happen so to do that we need to do a function I'm going to use an arrow function so to do the arrow function know how we do it like this this is pretty much the same as coming here in writing function and then that and then opening in this just like that because this is empty I can just do it like that and then put in my arrow function or if you want to be lazy if it's empty like that you can leave it like this or you can put an underscore like that to save a keystroke and then I can still do that so when I mouse enter what do we want to do so let's go back to what we just had tween max capital m so between Max - so we're starting in the right place we want to go somewhere so I want line 1 over one second - let's do our scale X of 1.5 now the one thing to learn when you're using gee sap is the properties here you saw before I used X it's not transform X but for scale X I write scale X like this and it takes a little bit of hunting and getting new Stute using the different things here so before I hit save we're doing a tween max we're tweening from this state and we're animating it we're selecting line 1 so it's only this top one which will animate and the duration is one second and what we're doing is we're doing the scale of 1.5 so lets it save on that and now i should be able to go on and we can see it growing out like that the problem here is it's only one way typically GCF also comes to something called timeline max this lets us link different tweens together it makes it a little bit easier than getting stuck with something like this so the easiest way to use the timeline is to create a variable for it so i'm going to call it t LM timeline max so on my timeline max here I'm gonna do is new timeline Max and for the new timeline max we want to include the curly braces in here now you can define extra stuff in here that sort of set the starting a few starting parameters right we're gonna leave it just like this for now to keep it as simple as possible we're pretty much just saying that our timeline is refresh we don't have anything going on the t LM here just makes it a lot easier to use so instead of doing a tween max here we're going to be doing is a new timeline we're gonna be using our new timeline so our t LM so if I hit save on that and I go in here it's gonna look exactly the same now what I can do though is I can keep adding to my timeline so I can do TM l2 we can do our line one again one second again but now what we want is the scale X to go back to one so when it's finished it's going to go back to one so let's hit save on that and now when I hover on top it's going to grow and then shrink back down so if we look at what we originally did with our CSS that's pretty much what we had to do here here we're defining where we're starting where we're going and then what we're coming back to at the 100% point in this case we're not defining the starting point sometimes you can do that it depends on the animation that you're doing but we have our starting point is what it initially is in this case and then we're saying go to this and then go to this this makes it a lot like adding our animation frames like we saw but one nice thing about it is you don't have to worry about percentages so here I had to figure out ok 0 50% hundred percent what if I wanted to add a new point in here well then I'd have to go and rearrange all of these I want to add a new point into here I can just add something else onto it afterwards or in between so if I wanted to sort of shrink it down tml to line one one second let's just say scale X 0.75 hit paint my save on there and it's gonna grow it's going to shrink and then it's going to go back I don't have to worry about the percentages it's figuring out all that stuff for me which is really nice and handy I'm not going to keep this one for now another thing you can do just to make it a little bit you know less keystrokes I don't actually need this here or what you'll commonly see is something like this here where they're sort of strung together so if I hit save on that it's still working so what that pretty much is doing if we were to write it out differently is stringing it together like this it just you know this could keep going on and on and on and on and stretch across your screen so to make it a little bit easier you can hit return and then we usually just tab it over so we can see where we are so I'm doing this and then we're so this is just there these are all stringing together if you don't want to keep repeating writing TL and at the start of every line or whatever variable name you've defined I'm now obviously the speed of this is really slow and we want to speed that up so remember this is in seconds let's just fix this and put it up to two point two five seconds I should say and hit save and when I hover over now you can see it's nice and fast so it's shooting out and coming back in but we have a bit of an issue right now we only have the top one animating I don't want it I don't want to have to create something like this for every single one of them that would be annoying and I'd rather do it just with my regular animations then luckily G set makes this really easy with something called stagger so we can use stagger to which less it the stager - lets us target many things and animate them all in the same way but with a stagger or delay between each animation we can put an array directly in here so just to give you an idea and the way the the stagger works is you'd have like mighty L M stagger - and then here you would have an array so you'd have the array of all the different things you want to be animating having the array in here though is a little bit messy so just like before I'm going to come into here and make a new array here let's just call it lines and it's just going to be line 1 line 2 line 3 so I'm getting these three lines here and putting them all in an array and now what I can do so instead of having all of this here I'm gonna delete all of that and I'm gonna do a dot stagger - so my stagger - the first thing I wanna do is what are the what's the array so my array is lines in this case I'm selecting my lines constant here and that happens to be an array so I can just leave it just like that so I have my lines after that it works just like before how long is it going to take one second and what's the scale or what's the variable so I want to do my scale X of 1.5 and then the we can add in another variable here which is what is the delay so how long between each one of them so let's just say I do 0.3 seconds and hit save on that so what that's going to do is it's going to do this animation to line 1 it's going to wait for 3 seconds and then it's going to do it to line 2 and then it's going to wait point 3 seconds and it's going to do it to line 3 and there you go you can see that it worked so let's just speed this up a little bit because it's a little bit slow so let's say was 0.25 again and I'm gonna change my stagger on that there we go so that looks better but we have the same problem before it's only going in one direction so there's a cool thing we can do in here called yo-yo but before we get to yo-yoing we're gonna look at the repeat so I'm going to do kama in here and I'm gonna do repeat and let's repeat this one time so you can see I'm doing this all inside of the curly braces here so the scale is in here and my repeat is also on here it's another one of the VARs that I can come in here so I'm gonna hit save and we're gonna see when I hover over its gonna do it twice now it's kind of weird when it happens but let's just do it like five of them or four of them so you're gonna see now it repeats a whole bunch of times it looks really weird because it's running and then shrinking but as soon as it's finished shrinking it's running it again but basically we can tell it how many times do we want to repeat it so we repeat zero would be do it once which is the default but it's repeat one means it's gonna do it two times but what I can also add is something called yo-yo and if I bet yo you want to true when it repeats it's gonna do the second one in Reverse just like a yo-yo so a yo-yo goes down and then it comes back up so if yo-yo is set to true that means that my animation will run forwards and if it's repeating will run backwards on the repeat so let's hit save on that hover over and now we can see that we're getting that cool thing and if I bring this up to three just to show you it's gonna go back and sort of become really bouncy and if I did to an even number here would be really awkward because it's gonna run and then stop at the large size which isn't what we want so I'll leave that on one for now now to make things more interesting we can also make this turn into an X when we click on it but for now I'm going to turn off the hover here and just because it's especially going to cause us some problems early on and we'll come back later and fix this so we can have both the hover and our our X little animation and so for this I'm gonna do Const and I'm gonna call it toggle menu but my toggle menu here is going to be another timeline so new time line max the only difference this time is I'm actually going to put a few things in here and the first one I'm going to put in here is paused is true the reason I'm putting the paused is true in here is if you remember before if I had let's just grab this I hit save on this as soon as my page loads you can see that it rent so I hit refresh we see that it's running there so if I come into here and I write it paused it's true now when i refresh you can see it's not actually doing anything it's just there so this is going to be a little bit handy because it's going to make things a little bit easier to use I'm just gonna undo to get that back inside of there and the second thing we're gonna add in here is reversed and I'm also going to set this to true so the reverse here initiates the reverse state which makes it accessible to use later on and that's gonna be really useful we'll see that when we get there and I'll explain it a little bit more we're gonna write this one a little bit differently too which is why I have the whole pause thing on here so instead of putting this inside the event listener I'm just going to write the whole thing out here so let's just do toggle menu and I'll come on to a new line because we're gonna have a whole bunch of stuff to put on here so - so I'm gonna start with line two let's do line to 0.125 we want to go pretty fast and let's just do a scale X of 0 so what that's going to do is a shrink this one away cuz if we're crossing these in an X I don't want to see it I want this to disappear then we can come down and let's think of the next thing we want to do so basically that's going to slide out of the way then I want my line one to rotate and then downwards and I want this one to rotate upwards so let's check that out let's do a line two let's do it the same speed one point one two five and let's do a rotation so this is where it's not rotate its rotation of 45 degrees and I don't have to put the degrees in there I can just write it just like that which can seem kind of annoying or counterintuitive if it's not something that you're used to you just have to sort of learn how their thing works and then lie whoops to line three point one to five and we'll do the same thing oops rotation 45 now you might be thinking I could do all of this with CSS and so why would I want to do it like this well you're about to see let's get the click event working and then we'll see how this can be but I'm this is easier than doing it with the CSS so hamburger add eventlistener this time I want to be listening for a click so when we click on it once again we'll do a nice little arrow function here and toggle menu so I'm getting my toggle menu and we're gonna do something a little weird here we're gonna say reversed and if you've never seen this I'll explain it in a second question mark toggle menu play : toggle menu reverse aha super what do we have here it's a ternary shorthand which I have a script and it's basically saying it's sort of like an if statement so it's saying is toggle menu reversed is this true so here we can see that it is true I've turned it on and initiated it over here so if this is true then we do this we play this so we take this and we play it if it's not true we're going to reverse what we have here so one of them is going to play it and one of them is going to reverse it and that just means that if it's been played through we're gonna play forwards one time and then the next time we click on it because it's been played it's going to go into this one and it's going to reverse so let's see how that's gonna work well actually it should work right now so let's hit save on that I can come on here and I should be able to click and what I forgot just here we want to have play like that so now I should be able to come over to here click and not exactly what I was expecting but at least we know it's working so we can see our line is sliding out so that's this one working fine except I did line 2 and line 2 not too smart of me it should be line 1 and let's try that again good except this one should be negative 45 so let's hit save try that again there we go so we can see that they're crossing and then on crossing when I click again so again if is it true yes let's play this forwards oh it's not true anymore because it just went through okay now I'm going to do this one instead so every time I click it changes from one to the other now obviously this X is not looking very good so there's a few things we're probably enough to do that fix this up the first problem is this one's rotating from here so when it rotates down it's too far and this one's rotating from here so on these where I have my rotation I'm also going to do my transform origin and this one is the same as in CSS how it works so let's just put it right in the middle and put the same thing right on here so now so now it's still not a perfect X obviously but if I look at if I look at this one when I click you can see that it is rotating my mouse is pretty much in the middle and you can see it's rotating around that and if I come here and I click on it you can see it's pretty much rotating on that access our axis and what that why that's useful is now I can as that's happening I can bring it down and as this is happening I can bring it up and then I can have them both pretty much bang in the middle so when I click they should be lined up nicely so to do that I think what we're gonna have to do is gonna be on the y-axis and I'm going to move them by eight and the reason I'm going to move them by eight is if we come and look here my Y the right dead middle is 50 this one is moved up by eight and this one has move been moved down by eight so it this one's eight pixels off the middle downwards and eight pixels off the middle upwards so I think if I come on here and I add a Y of eight and then on this one I had a y of negative eight there we go we get a nice perfect X so that is nice and cool so we're getting there we're getting there now when I do this though obviously you've probably noticed that it's doing one animation after the other because these are all steps in the timeline that we created so first it's line two here doing its little animation then it's going to be line one doing this one and then it's line three so we get boom boom boom all three of them going individually but what if I wanted them all to be at the same time well this is where things start to get interesting so one way we can do that is if I come all the way to here or right after my VARs here and I do comma 0 and I can add that to all of them just alright let's just turn off the word wrap for a second so if I come to here and here comma 0 and I hit save what this is doing is they're all firing at the same time now so you can see my line is shrinking away and my X is crossing at the same time so that's getting more interesting right away so what the 0 here is doing is it's a delay how long is the delay so from the start of my animation there's a delay of 0 on all of them so they're all firing at the same time but what if I wanted this middle line to move out of the way first and then I to turn into an X well one way to do it is I can change my delay so I know this is taking point one two five seconds so I could change this delay to be 0.125 and then point one two five so remember even though this one is after this one this delay is always from the beginning of the animation if I click you can see now that's sliding as soon as this is done my X kicks in one of the problems with this though is if I came and it changed this to point five for some reason obviously those numbers aren't relevant anymore so my line is still sliding while the other animation is going on which you might not want one way you can do it instead is let's actually just do this in slow motion to make it a little bit easier so I'm going to do that as one second so if I hit save now we're gonna see that it's still going it's still going it's still going so there is a delay but it's really really short right now instead of writing it like this though if I turn this into a string and I write plus whoops plus equals and I'm gonna leave this one like this and I'm gonna leave this one like this just so we can see the difference between the two and I'm gonna hit save on that and you see the difference there so this plus equals which is on my top line so if I click it starts sliding and then once that finishes this one's going so if I write it this way it means there's a delay of 0.125 after the previous step now the problem is I can't then add that on to this one because well how is that going to work it's going to be delaying an extra 0.125 from here because it's always looking at the previous step now one thing is I could just take the delay off of here completely and we will get something like that what I find a lot more intuitive anyway than using these types of things are using labels a label lets me give that part of an animation a name more or less so here what we can do is and in few different names so what I'm gonna do is do this one I'm gonna call it cross and I'm gonna take the delay off of this because I don't really need it anymore and on this one I'm gonna write in cross and hit save so what this is doing is it's giving I've created a label for a part of my animation so if I come in and click here it's gonna do that first but then both of those are gonna happen in exactly the same time and they're happening as soon as that previous step was finished the reason they're both firing at the same time is this is finishing it's getting to my cross so it's gonna look for it I could have a hundred different pieces of things being animated it's gonna look for all the ones called cross and it's gonna animate all of those at the same time so it does that it gets to my cross everything that's been labeled with the cross then fires another thing you can do is you can build delays into these too so not really the most realistic example but I can do of plus equals one on here so now it's going to do this cross is going to run and then one second after cross runs this next one is going to run so if you want delays based on something you can do that as well which it can be really handy don't really want that for the moment though so let's take that off but now we we had so we sort of have this working let's just speed this up because it's way too slow and let's fix this so I stopped getting some errors there okay and so this is working but now I don't have my hover animation on here anymore and that's sort of a bummer to me now to show you why I don't have my hover animation on here anymore let's turn it back on and now so it's going to work here and that's fine I can hover and hover but if I click and I have my X and now I hover well we get this craziness going on and I definitely don't want that maybe you like it but I don't like it so I don't want that to be able to happen so there is something we can do though to stop that from happening so I'm actually to stop this from happening I'm going to come back down to my click listener here and on here what I'm going to do is I'm going to say on my hamburger class list I want to toggle a class so Jas and I'm gonna call it X maybe not the best people might think I'm thinking of JSX but I'm the Jas part here is just to say that this class is for JavaScript purposes only so if somebody sees it in the code don't try and find it in the CSS because it's only here for JavaScript purposes and the X is because well this is turning into an X so what this is doing is it's finding my hamburger so it's finding my hamburger class when we click it's going to go to the class list and it's going to toggle JSX what toggle means is if this class is already there take it away and if it's not they're added so let's go and look at that in action so I have my hamburger right here so you can see the class's hamburger and now if I click on it oh I gotta save over here to make things actually work so I'm a hamburger now if I actually click on it we have hamburger JSX and if I come and click on it again that's been removed and now I'm back to my hamburger so we can see it going on and off every time I click which is perfect and I know what's working now I could we work this a little bit but let's just come up to here and we can leave this alone for now I won't I won't change this and update it so it's a little bit more like that one we'll just leave this like this for now but what I'm going to do is I'm going to come on here and say if hamburger class list contains JSX so if my hamburger class has the JSX class that means that this is opened and if that's opened I don't want my hover to work anymore so if it's open we're going to return so what return means is just get out of here we're finished it doesn't matter if there's anything else going on in this function or anywhere else or wherever we are you hit return you escape you're done that function quits so we're not doing anything so now if I save this that means now my hover still works if I click now my hover no longer works it's saying that oh it has this I'm returning I'm getting out of here and it's returning before it gets to this line so this is never running so it's not doing anything now I can click and go back and now my hover is working again so we can get best of both worlds everything is working really well but nothing looks quite right and eases are a great way to make things look more natural and less robotic another awesome thing with gzip is not only do they make ease is really easy to do they also provide us with a really nice sight to visualize how they're going to look and a wider selection of defaults than you get with CSS so if you're just google G SAP ease you'll get their ease visualizer and ease visualizer is a really nice tool because you can click on things and it's going to visualize how the animation happens so you have these crazy ones but it's showing you the timeline and it's showing you sort of how the thing would animate along that which is really handy and it's nice to have a nice visual like that and it's also you can choose ease in ease in out you know the different ones because that's going to change how a lot of these work one thing you'll notice here and the bottom there giving you the example so here they're just using between light but the this is so here they're doing their graph 2.5 seconds ease so they're doing ease back so you can see the back he's in out so back easing out you could leave it just there you don't have to add this config to it so this is optional but you can come in to the config and play around with these numbers so let's just make that a 4 and you can see it's a lot more extreme or I can do it as a 1 and it's going back down to the basic value so the config is an optional one you can see for example on this bounce one they don't have they config in there so you'll see it in some of them and some of them the configs will be quite complicated and you can also do custom ones where you can kind of go crazy and then the custom one you can actually click and drag and make your own thing so let's just say we're on power three and I click on custom and now I can change this and then I can copy what is here and use it on in my file so it can be really easy to get some cool little eases in there I think for now I'm just going to go with like a power to on and he's out I think yeah we're gonna using ease out so it slows down near the end that they're gonna be a lot faster than that so let's go and do that on here actually let's just fix this because it's not the right size anymore okay so I should be able to come right to here put a comma and then I can do my ease and my ease is gonna be a power - I think I said and we'll do an ease I can hit save on that and hmm you know what the problem with this I'm gonna do an ease in out the main reason is the animations running forwards but then it's also reversing so yeah it just sort of smooths everything out a little bit like that and then what we had before so it looks a little bit nicer so now we can do the same thing for our X just to smooth things out a little bit so to do that the easiest thing to do we need to do it on all of these I don't really need it on my line moving out but I just want to put it on my crosses here so just right here after both of those I'm just control clicking on that if you're on a Mac you can come and click and we're gonna do an ease power to ease and out I think we'll do the same that we did there so power to dot ease in out hit save on that and then we can come over here and click and what if I just did I've been doing ease in on one of them just so I can see if there's a bit of a difference or if I don't even see anything I'm gonna slow those down just a tad just to see and I think we'll stick with our in and out on that know that we've slowed that down a little bit Sweden to see it running a little more awesome okay so I'm happy with that now one really nice thing about building animations with G SAP is how easy they are to modify and add steps to so with CSS animations adding new steps can be a fight with keyframes and then when you want to do more complicated things it can be really kind of a pain in the butt sometimes let's take this and just completely change it up and do something completely different what I want to do instead of when I click instead of them crossing like that I want them to slide together into the middle so they're sort of smashing down and then cross now to do that I don't actually need that one to get out of the way but we could still have it get out of the way and one thing they can make it really easy to do something like this actually because I have this on here but I want to make sure that they're they're landing right in the middle and so what I'm going to do is I'm going to take the rotation here off of these two just to start with I'm gonna hit save and I just want to see what that does cool so they just come and stick together it's exactly what I was hoping they would do so that moves out of the way they come and stick together like that that's cool so then once this happens I want them to cross so I'm actually going to come here and let's turn on word wrap this is more of a slide then a cross now so I'm going to change the label I have on here to slide and let's go and add some more stuff to here so now we can do a two on line we can get our line one again say point two whoops 0.25 seconds and now what we can do is my rotation so now we can go rotation 45 and we'll do the ease on this one as well so ease will be our power to ease in out and on this one I'm going to call this one cross because now they're crossing so let's it save just to make sure that that's working oops I'm missing my closing bracket there try that again save and click perfect look at that and then that one turn so now I can do the exact same thing here but for a line three so the rotation here will this be a negative 45 hit save Oh too many semicolons hit save come to here it doesn't like something I did open line three needs to be capitalized there we go and look at that so they smooshed together and then it turns into the X and that is nice and dandy now this is one of the places where I'm adding to it so I'm not worried about keyframes I can just keep adding and adding and adding and I'm just making it longer but I can also come back into the middle now so let's say here they've smooshed together I've done my slide now what I could do is add another thing in here too but instead I'm going to do my whole hamburger I think this one's gonna have to be a bit longer it's gonna look crazy so I'm going to do point five seconds on it now let's do a rotation of 360 degrees and let's do an ease on this one too let's go with like a power for ya power four just to make it a little bit more extreme and we'll do once again and ease in out I forgot my coal in there and save and let's see what happens so cool and backwards yeah very nice and I think the last thing I'm going to do here just right now when I do my I think one last thing I'm gonna do is right now I don't really like my my hover thing being that they're growing out the side like that I want them to grow from the middle instead um and to make sure they're growing really from the middle I can do and transform our region I could probably do the same thing on this to be honest but what I'm gonna do is something that's a little bit different and what it's called is just to show you that it exists SVG or gin and I can do the same thing except I'm not going to put percentages I'm just knew 50/50 and what this is doing is it's looking at SVG coordinates and this is really really handy because you're setting the origin of the animations and everything according to SVG coordinates and this can be really really handy so in this case I'm just finding the middle of my SVG so let's it save on that and see what happens so there you go now it's growing from the middle of my SVG instead of growing from the side that it was growing on before so that's it nice a little like touch we can add to it and you can see by setting the SVA origin to the center it's also this is affecting everything so now this scalex has actually been affected by that because when I do it it's shrinking down in the middle which is fine and dandy and I'm really happy with how that looks as you see here it's so easy to change modify and play with and it's really a lot of fun and this is just scratching the surface of the things you can do with gee SAP I found it took some time to get used to it and playing around with it and on their documentation a little bit but man it's fun to use and really that's just the basics of it there's it's really incredible the things people are doing with this but for this video that is it the basics of G SAP in the comments some people have been asking for more advanced things like SVG the type with SVG and more advanced animations than what I've done here maybe one day I'll make an intermediate or more advanced series but for now this one is a wrap but for this series we've seen why we want to use SVG is how to write them how to create them how to organize them how to optimize them and now we've seen how to animate them as well many thanks to all of you for watching liking and commenting away on my videos you're all amazing and of course a huge thank you to my patrons are supporting me through patreon thanks again for watching and until next time don't forget to make your corner of the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 45,587

Keywords: Kevin Powell, tutorial, html, css, GSAP, SVG, SVG GSAP, SVG animation, GSAP animation, svg animation with gsap, gsap basics, gsap tutorial

Id: 4XJ8yS0zpa4

Length: 50min 59sec (3059 seconds)

Published: Wed Aug 01 2018