Learn GSAP In 23 Minutes

animations are really fun and we'll take your website to the next level but writing these animations in CSS can be really time-consuming and difficult so in today's video I'm going to show you how to use the G SAP JavaScript library to write complex animations incredibly easily welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now to get started I have the finished version of our product on the right and if I just refresh the page you're gonna see our really simple animation where a header drops in we have our sidebar slide in and our footer pops up and the reverse button spins in and when I click reverse the entire animation reverses itself at a quicker speed so doing this in CSS would be incredibly difficult with all the timings and it would be very fragile but using the GCF library I'm gonna show you how to make this and make it really simply so to get started we're first gonna need to create that index.html file that's going to contain all of this code so let's just refresh so we can see it we have this header our sidebars the footer and then the reverse button so to get started hit exclamation-point tab that will give you all this boilerplate and then now here inside of the body we need to have our header so we'll just create a div with the class of header we're going to need our middle section which is our content I'm gonna create a div for that and then we're gonna need our foot in just like that and inside of our header we're gonna have some links so we'll put them in this div called the links and we're gonna create three different links each one with a class of link will just say link one copy this down link 2 and Link 3 then inside of our content we need this green sidebar here on the left and the right so let's create a sidebar or the left we'll give it a class of sidebar and left same exact thing but sidebar end right for our right sidebar and then we'll just have a button in here with the class of button that says a reverse now if I open this up with live server so we can see it on the right and this is just a visual studio code extension you can see we have our links and a reverse button but obviously none of our content or header or anything has any styles to it which is why it's not showing up in this color so let's add some styles and since these styles are really basic I'm just gonna put them in the head here these styles are mostly just so you can see things while we're doing our animation so that way we have something visual to look at the first thing I want to do is style our body so we can have this nice split where the headers at the top and the footer is at the bottom so we can say our body here is gonna have a margin of 0 a height of 100 view height that's just going to make it fill the entire screen we're going to change this to be display flex and we want our flex direction to be column that way everything stacks vertically on top of each other then what we can do is select our content section and set the Flex grow to be equal to 1 and that's essentially going to make this middle section grow to fill all of our space and the header and footer are going to be pushed to the top and the bottom and speaking of the header what's coming here and style this to have a height which is going to be 15% of the height of the entire page so it's always gonna be 15% and we'll give it that background color of red now if we save and come over here you can see we have our header with that proper background color we can also style our links by selecting links here and what we want to do is change this to the display of flex and we want to justify our content with space around and then lastly align these items in the center and what that's going to do is force our links to be spaced out from each other evenly as you can see and then if we give these links a height of 100% and in combination with our line item center that's gonna put our links dead center inside of that header section and we can just change the color to white so it's easier to see them and that's our links completely done and also our header completely done next what's working on our footer since it's going to be almost identical to our header we're gonna give it the exact same height but instead of red we'll just make this blue now if we save you can see our footer has showed up down here at the very bottom and then lastly we have our sidebar sections so we can say sidebar and these side bars are going to be in a way that they're displayed left and right and to do that we can take our content and change the display here to flex and they justify content to space between and what that's going to do is it's going to push our left sidebar to left our right sidebar to the right and a reverse button in the middle now if you say if you see a reverse button is now in the middle but to make it so a reverse button isn't as tall as it is we can just select that button and give it an align self of center and that's just going to make it centered instead of stretching the full height and then with our sidebar we could just change here at the background color to be green and we want the width here to be 15% of the view width and if we say if you can see our sidebars have also appeared now with that done we have all of the basic code that we need for styling all of the elements on our page and the next thing to work on is going to be the JavaScript for our project so we can create a script J's file this is going to be where we put our JavaScript and we'd want to make sure that we import that script tag up here which is going to be script J s and we're gonna defer this so it loads after HTML next we're going to want to install the green sock library to do that we can just come to this green sock URL here I'll put it down in the description below but if you just type in green sock install you'll come right to here you want to make sure you select CDN and we don't need any of these extra plugins so we're just going to copy this one script tag right here so so we can just click copy code and we can come in here and make sure we paste it directly above our other script tag and again make sure we defer this so it loads after the elements inside of our body down here load so now we have GAF installed and we have our script tag which is going to have access to GCF since it's after our G subscript so now instead of our script here we can start animating things with GCF so the easiest way to get started with animating is just to use the G snap property here and we can say dot two for example for dot from and this is going to allow us to animate to a certain state or from a certain state and since right now all of our elements are already in their final to destination let's use an animation of from so we can say we want to animate from a particular state to a new state so we're animating from whatever state we pass in here to our finished state we see here and let's start by animating just our header first and with jisub it's really nice because we can just pass in a selector for example dot header and it's going to select every element that has the dot header class so this works very similar to query selector all if you're familiar with that it uses the exact same logic behind the scenes so now what we can do is we can just pass in some properties here for how we want the animation to occur we can pass in a duration which in our case we'll say we wanted to take one second for the entire animation to finish we can also pass in how we want the animation to work so for example let's say we want to change the Y position of this to start at the very top of our page and then scroll down we can say our Y is going to be equal to negative 100% that's just going to move our Y position upwards 100% of its whole height so essentially it's going to start right off our page and then animate in if we save this you can see that it now animates from the top all the way down with a duration of one second we can take this even a step further though and make it look a little bit cooler by using an easing function and luckily for us this gif library actually as a ton of easing is already built in if we just click on eases here you can see this nice easy and visualizer and you can see exactly what's going to happen and the easing curve so for example if we click on bounce we can see that we get this nice ease function here so what's actually modify here our header to have an ease of bounce now if we save you can see the header comes in and it kind of does that nice little bounce animation which I think looks quite good and gives it some a more fun feel to it which is really important when you're building out animations you want to give your site character so we're giving our header or some extra character by giving it a nice fun looking bounce animation now the next thing that we want to work on is going to be animating our links so that they actually fade into the page instead of appearing on the page to begin with so we can do another G set dot from this time we want to do it for our links so we're gonna say dot wink because that's our selector for each one of our links and we're going to again give it a duration here which is going to be one second and we're going to set the opacity to zero so we're coming from an opacity of zero over the course of one second and if we save you're going to notice something interesting as you can see the links actually fade in at the same time that the header is dropping down if we increase the duration here it's a little easier to see you can see that they're fading in already as the header is dropping down in order to prevent this we need to use a delay property and what this is going to do is allow us to start our animation after a set period of time so we can say delay one so this duration is one and then we use a delay of one second so this link animation will start one second actor which is the exact time that our header animation finishes so now if we save you can see the links don't start fading in until our header is completely finished but you'll also notice all of our links fade in at the exact same time if I rerun this you'll see all of them come in at the same time to prevent this we can use a property called stagger which will allow us to put a delay between each one of the elements that's selected by dot link so we can say we want to have a point five second delay now when we save you can see our first link comes in and then half a second later the next and then the next so that allows us to essentially stanker out our different animations so that each link comes in one after the other instead of all coming in at the exact same time the stagger property is really useful now the next thing to work on is going to be our sidebars I'm going to start with our right sidebar only so we can say dot right which is the class we gave to our right sidebar we're gonna give this one a duration of let's say two seconds we want it to be a little bit slower and in this what I want to do is make it fly in from the left side of our screen all the way to the right so we can come in here and set our X property equal to negative 100 V W and that's going to make it fly in from the left side of our screen and if we save you can see it flies in from the left side of the screen but it also starts at the very beginning right when our page loads so let's put in a little bit of a delay here I want this to animate right after our header finishes so we can put in a delay of 1 and also for this let's change our easing function we're going to use power dot in we're going to use power two for this one so if we save this you can see that we get our animation occurring and it slides in and kind of eats up at the end and that's what this power too is doing we use power to of in you can see that it starts out slow and it speeds up towards the end which is exactly what we wanted for this sidebar on the right side here and the next thing to work on is going to be our left sidebar and when we get this animating in it'll make our right sidebar look even better so we can say gee sap dot from we want to do for our left sidebar this time our left sidebar is again gonna have the same exact duration of one which pretty much everything else on our page has but I want to tell start animating before our right animation finishes so we can instead use a delay here of instead of one so it'll start right when our other animation begins I wanted to start about halfway through this other animation so I'm going to use a delay here of two what this is going to do is it's going to wait two seconds which means it'll be one second into our right animation before it actually starts that way they're both animating at the same time and for this we're just gonna set the X equal to negative one hundred percent so it's just off the edge of the screen now if we save you'll notice something's not quite right you can see it's not animating and that's because my selector here should be dot left I forgot the period and now if I save you can see our right sidebar animates in and our left sidebar animates in also at the exact same time let's watch that again real quick so you can see the right side comes in slowly and then the left side let's actually speed up this left side or the right side sorry it's a little bit too slow so we'll change that to a duration of one and this to a delay of 0.5 so again our sorry 1.5 that way it comes in half way through this right animation now if we save you can see it comes in and then this also comes in about a half a second later which looks really good now the next thing to work on animating is going to be our footer so we can just say juice AB dot from and for this footer instead of using from we're actually going to use to just so I can demonstrate the different ways you can work with GCF and what to does is it says I want you to go to a particular position and then it's going to start from wherever the base values are inside of our CSS here so what we want to do is for our footer which is dot footer we wanted to go to a particular location for the duration again of one second that's kind of the default we've been using for everything I wanted to go to a Y of 0 and for easing we're just going to use elastic since it'll look kind of fun and you're gonna notice if we save this the footer doesn't do anything and that's because it's already in the two position so we need to do instead of our HTML here with our CSS is change our position here to have a transform translate we're gonna translate in the y-direction negative one hundred percent actually this will be 100% I believe so it appears off the screen and now if we go back into our script here and set up a proper delay which in our case is going to be a delay of 2.5 so it occurs right after our left animation is done and we save you can see it's off of the screen and then it's going to animate into the screen with that really cool elastic animation but you'll notice if we save that again we have this annoying scroll bar on the right we obviously don't want this so inside of our body let's just change this to overflow:hidden that will remove this roll bar because it'll just height everything off the edge of the page so there we go that's all the animations for that and the last thing left is this reverse button so we can say gif dot and here I'm going to again demonstrate the from two version of writing out the code for gsm and this allows you to specify both the from value and the to value so you don't have to worry about any default styles in your CSS so here we want to select our dot button just like that and here for our Styles first we specify our from so we're going to have an opacity which is going to be zero we want it to fade in we're also going to have a scale which is going to be zero and then finally we're going to have a rotation and this rotation is going to be 720 so it's going to start out rotated and then we're going to unrotated back out so in the to where we want to end up at we're gonna put an opacity of one a scale of one and a rotation which is going to be here equal to zero whoops and we now make sure we set up our duration and delay inside of our two section so our duration is going to be one and delight we want this to occur after our footer is done so we'll say 3.5 now if we save everything should properly animate in and there we go we have a reverse button spinning in but something really interesting you'll notice is that we have a scale set to one here but there's no CSS scale property there's no CSS rotation property these are actually inside of a transform and gzip is smart enough to understand that scale needs to be wrapped inside of a transform and rotation wraps itself inside of the rotate transform so gzip does a lot of that interpolation for you same thing with X&Y this is actually wrapping this inside of a translate X and a translate Y GCF is doing a lot of that work behind the scenes for you which is really important also GCF works on other things than just HTML elements for example we can say GCF and we want to go to and we can pass in just a normal JavaScript object so let's say Const object it's going to be equal to X of 0 and we want to take this object and we want to go to an X of 100 then we can use this on update function which will just get called every single time we update and inside this function let's say that we want to just console that logout our object dot X we want to make sure we put this inside of this object here just like that now if I inspect the page drag over our console here we can see this and i refresh you're gonna notice we have been printed out all the values from 0 to 100 because it's animating over that property over the course of our duration which we could specify if we want for example let's do 2 seconds so it's kind of a slower animation so we can really see it being printed out here and you can see it goes all the way from 0 to 100 and animates that object's property so we can use this with CSS elements objects and other things it's like SVG's for example it's really powerful in that regard also something that's really important is you'll notice that we have a lot of really messy code we have this duration repeated everywhere we have all of these different delays which kind of compound on each other so if I wanted to for example change the animation of my header so now be let's say 3 seconds everything else is gonna break because you're gonna notice our links start fading into early everything else starts coming in too early it's just all coming in earlier than it should so in order to get around this issue we can actually use something called a timeline and that also makes this our reverse button is dead easy to implement so let's put that back to 1 so everything works and let's create our first timeline so we can just come in here timeline is going to be equal to GC F dot timeline and what a timeline allows us to do is essentially combined together a bunch of different animations that all occur one after another that way if you change the duration of the first animation all the other animations are going to stagger theirselves properly after that animation so we can just say for example timeline and as timeline has our from 2 and from 2 properties so we can say timeline from for our header and what we want to do is just let's just copied us exactly like this into here so now we have our normal header animation with our duration or Y and our easing and if we just comment out all of this up here we should see our animation for a header work just as before and if we save you see our header works just like it did before but you'll notice as I said our duration is duplicated everywhere we can actually set in here some defaults and let's say our default for duration is going to be 1 now we can remove this duration here and every value that we specify for our timeline is going to have that default duration of 1 we set here and if I just saved that you can see it still works just as before and another great thing about time line is we can actually chain all these methods together so we can just add another dot from on to the end here and it's all going to work instead of having to say time line dot from every time we can just continually chain them one after another now let's just copy the code for our link here paste that in so we have our link we can get rid of this duration but everything else is gonna be the same what's safe and you can see that our link worked just as before but something interesting to note is we don't need this delay anymore because this delay is adding additional delay that we don't actually want we remove this you can see the links will always start as soon as our header animation finishes even if we change this to a duration of three you can see that our links are gonna wait all the way until those three seconds are done and then they start animating in so that is something really nice about time line is that everything is one after another so let's bring in our right here let's just copy this code down paste it here for our right remove our duration remove our delay and if we save you can see our header animation are links animate in but then our right animates in and we don't want to wait for our link animation to finish this is something that if you remember from before we wanted our right side animation to start as soon as the header finished and not after the links so luckily this dot front property takes a second value and this value is going to be the delay that we want to have this can either be a relative delay or it can be an absolute delay so an absolute delay would be the delay from when the timeline starts and a relative delay would be a delay from when the last animation finished in our case we want to do a perhaps dilute delay which is just going to be a wonder a ssin since we want it to start right after our header now if we save you can see as soon as our header finishes our right side starts animating in and it doesn't actually wait for the links to finish now let's do a similar thing for our left side animation we'll copy this in we can remove our duration and our delay but we need to reinstate our delay to say that we want this to start half a second after this right side animation starts and to do that is actually really straightforward inside of GCF if we use the left caret here this is saying our previous animation this is referencing when the previous animation starts so right when our right animation starts so if we actually save this the left and right are going to both start the exact same time but if we add in a delay here of 0.5 this is the same start 0.5 seconds after this right animation starts so now if we save you can see that our right comes in and then our left comes in half a second later so that allows us to do that nice offset based on a previous animation which is really important next we're going to copy in our footer section and as you can see we can use to just fine with our timeline get rid of this duration here we don't need our delay either so we can get rid of our delay and if we save our footer should come in after our left and right animation finish just like that as you can see and then lastly we're going to have our button here so let's copy this down and our button no longer is going to need to have a delay or a duration so let's just remove that and we're left with just the opacity scale and the rotation and if we save we should see everything animate just as it did before but it's set up in this nice and easy-to-use timeline so that we don't have to worry about complex delays or offsets and that way we can change the duration of something in our animation and it won't affect anything else in the animation also as I mentioned with timelines it's dead simple to reverse a timeline let's just set up a selector for our button here we can say document dot query selector or dot button we can just say button dot add event listener on click and whenever we click this button we want to reverse our animation so we can just say timeline dot reverse it is that simple so now our animation is going to come in everything is going to run as it did before and now when we click reverse everything is going to run in the exact reverse direction and if we want to speed up this reverse we can just say timeline dot timescale set that to three for example this is going to be three times faster than our normal animation speed and if we click reverse you'll see everything reverses out at three times the speed that it came in and that's all it takes to create animations in JavaScript if you enjoyed this video make sure to check out my other videos linked over here and subscribe to the channel for more videos just like the thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 66,157

Keywords: webdevsimplified, gsap, js gsap, js animation, gsap js tutorial, gsap tutorial, gsap 3, gsap animation, green sock js, green sock javascript, gsap animation tutorial, gsap js animation, gsap javascript, gsap js, gsap javascript animation, gsap javascript project, gsap js project, gsap javascript library, gsap library, learn gsap in 15 minutes, learn gsap in 10 minutes, learn gsap in 23 minutes, learn gsap, gsap guide, gsap tutorial project, gsap page animation, gsap 3 js

Id: m6PDUIF24v4

Length: 23min 21sec (1401 seconds)

Published: Tue Jun 30 2020