GSAP Animation Tutorial | Create Awesome Animations With Javascript

hello there my beautiful friends and the Internet how you guys doing today we're gonna cover something really cool and exciting we're gonna do more animations because hey animations are pretty awesome we're gonna do this a nice clothing store animation here I guess that's what this is and as you can see we can sequence multiple animations with something called G's have that we're gonna use so hey get ready open up your vs code and let's get going also if you like these types of videos make sure to drop a sub and you know what hit the bell and be VIP okay be number one be the cool guy that comes in and comments first all right let's get started and stop talking and let's start coding okay so what we have here is an empty HTML well not really empty but I'm gonna explain what you need is I just linked a stylesheet here as we usually do and a BS which is empty I added a font of railway and I also had three different things that I'm gonna show you just in a bit for the images I have pre stock images I got off pixels don't worry I got you covered I linked all of them in the description and you can get them right there so I made everything easy for you so you can follow along good so what libraries do we need well you can go on TV MJS comm we're gonna use something called G SAP because gzip is really awesome it's super simple it's really performant and honestly it's just my favorite library when it comes to animations so in here we're gonna need something called tween light so make sure to copy that one include it in here so script source tween light and that's gonna help us basically animate things in JavaScript so I'm gonna let this animate things in CSS like colors and move things around so for that we need the plug-in called CSS plugin and it's up here CSS plug-in min GS make sure to copy that as well pop it in here be happy and you can start doing some nice animations and we also gonna need something called timeline light say that three times timeline lights title I like oh okay this one this is gonna help us kind of sync and do multiple animations and kind of control them the way we wanted to and I'm gonna show you just in a bit how we're going to do that as well and hey that's that's all we need we can I'm gonna throw up the mark up really quickly here the HTML and the CSS because that's not kind of defocused on the video but yeah let's just code this out really quickly so we can get to the animation part because hey that's the exciting part so in here I'm gonna just create a header like so it's gonna have a nav and in here I'm gonna do a nav closed div let's do closed like so and basically the snap closed is gonna be the this one here because we kind of want this to be stuck here we kind of don't want this to move around what we have coming out here is something called nav open okay the thing that's animating here is this big nav so this one is animating out however we want this to be stuck and now we're gonna create something here called nav open and this is the one that's gonna fade in here so all the text down here is gonna be and de Neve open okay just to to make everything clear okay and this one we're gonna need the title which is portfolio perfect perfect a Patrona we're gonna do a ul which is gonna have a class of nav links perfect hit enter Li we're gonna add a whole shop duplicate these we're gonna do blog and contact in case you have trouble with your purchase okay the first one I'm gonna add a class of nav button because this is the one that we're gonna animate so this is the click listener that we're gonna stick the thing onto and that's all we need here we can get to Dean I have open in here we're gonna create two sections the one with the clothing and he links and the one with the two images down below which are these I believe so this is going to be one section and this is gonna be one section so let's create those two divs we're gonna do one called clothing and in here just super super simple we're gonna have a h2 we're gonna say clothes and let's just do a UL let's give this just an Li with Li a let's do an li e let's be ambitious here hats just duplicate these a few times as you and sweatsuit I have no idea man that's the underwear and miscellaneous you know what I'm deleting you I don't like you this one he can go away peace out perfect good so we have the clothing section now we can do one called full let's do one called nav images so we have the nav open here we have the DIF clothing and right below the clothing one we're gonna do nav images I'm just gonna stick these two images in here let's do image source we're gonna get the we're gonna get the hoodie and the Hat make sure you do the alt tags and a real website but I'm getting through this really fast image hats perfect and yeah to get the big image the cover image that we see here so the full screen image we're gonna do it right above the header tag so right above the header tag let's do an image we're gonna add a class of cover image or just cover let's do cover and in here the source is gonna be image long cover perfect let's also add that small date we're gonna do a h1 with class cover date and we're gonna do 0 3 0 3 2008 19 so close you almost got me hit save and that's that's all we need boys and girls and let's start animating this thing well we need a CSS so not yet alright and here we have just a basic removal of styles with margin padding as we always do let's compare at the HTML and the body here can add a height of 100 percent and a width of 100 percent is a font family of railway that's Devon I included and also sans-serif just in case the other one doesn't work and a background of black perfect who ran out of breath there but it's all good let's see what we have and we're gonna have these huge huge images going on here oh my goodness amazing alright let's make these smaller actually that's that's the first thing that we're gonna do we're gonna get these small images which are I believe it's Nev images image let's add a height 250 pixels all right just make these a bit smaller so they don't kind of intrude in the way perfect up here let's scroll back up let's do the header it's gonna be we're gonna have a height of 100 VH so it's gonna be full screen and let's get the cover image we're gonna cover I'm gonna add the height of 100% let's see how that looks okay it's not a huge anymore but I kind of want this to be stuck up here so like fullscreen here to do that I'm gonna add a position:absolute to this absolute I'm gonna add a width of 100% so it's all fully stretched like so now this looks awful for now don't worry and you know what I'm gonna add a top zero and write zero just so it's stuck perfectly and to be stuck to this header we need to add a position relative to this one nice alright now this is stretched it's ugly to fix that we can go to the cover and just add an object fit of cover and what that's gonna do is gonna zoom in the image so it doesn't look so stretched good now I kind of want to bring this down a bit and I want it to be so up so you can also move this round we can do object position and we can do top if we want to see the top part of the image as you can see oh look at that you fix everything how nice now for the header I'm gonna also add a display flex here perfect and let's fix up those navs actually let's do the cover date as well cover date get this going position:absolute and let's do left 10 percent right 10 percent and let's add a color of white let's see how that looks there it is I kind of want to move it down here so well left okay left 10 percent let's do bottom 10% yeah that's good I'm happy with that I don't want to make this so white though I'm gonna add in a pasty of 0.7 or so yeah I don't want that thing to pop necessarily I just kind of want it to be there kind of like in the background type of thing so yeah that's perfect let's get to the nav so deep nav this is the one that we're gonna animate we're gonna add a background of white like so okay we're going to add the z-index of two so we can see it we're gonna add a width I'm gonna make this 40% a height of 20% and a color of nine one six three five six so this is kinda the color that I'm gonna use and cross everything so as you can see right now these overflow because I made the height very small but that's totally fine don't worry we're gonna add a overflow:hidden to this overflow:hidden perfect now this tool does not look good but it's okay don't worry because we're gonna animate this actually I'm gonna remove this out for now and we're gonna add it back later good so let's do the nav closed so this is the nav closed is the only thing I want to be visible I don't want the other things to be visible so nav closed I'm gonna add a display flex to justify content spaced round and a line-item Center and I'm gonna do the same height and width as this one so as our her nav so I'm gonna do height 20% and wit 40% and position:absolute there we go as you can see it's stuck right there and now we need to take the other one and position it right below this so how do we do that very simple we can use the nav open then I'm open here we can have position:absolute again we can add a width 40% so the same kind of thing but the height is going to be 80% so this is 20% hi this is 80% height now it's not looking good for now but that's fine to make it look good we can just add the top of 20% and if I add the background color of light blue we can see what's going on here so we just move this one down here all right perfect very nice let's position these things in here so they look decent we can add a display flex to this we can do flex direction column so these two so these two sections in here the clothes and the two images we can do justify content space evenly to make give them some space and a line item Center let's see what we have all right looking better we need to move these two around so these two sections and then we're gonna be good we're gonna add a pass at t0 to this and a bit and let's remove this light blue we don't need it anymore get rid of this thing by eye piece and let's go let's do the clothing clothing is this section and here so this one actually let's leave D let's leave the background for now so we can see easier okay perfect let's grab the clothing and you a display flex a justify content space round and line items Center let's see how that looks where am I okay I'm gonna make the and I'm gonna make the width of this 100% so it stretches all the way to the container there we go looks good let's also remove some stylings on this and make this a bit bigger clothing h2 scroll down a bit font size we're gonna add 60 pixels is it too big might be too big that's okay you know what 50 how about that perfect let's grab the clothing you ll eyes let's add a padding bottom of 10 pixels so they're not that stuck together there we go a bit more spaced out and you know what this is gonna be ugly but stay with me UL li UL li a and we're gonna just do text-decoration:none I'm gonna copy the color from above that we used which is gonna be 9 1 6 3 5 6 let's see there we go I can get text decoration is not gone why are you not gone well we need to add it to the UL so let me copy that oops copy this clothing UL paste it in here okay nevermind the text decoration is gonna be on the a tag that was correct I wanted to remove the list-style:none in here and that should work yeah there we go so everything works now perfectly nice the last thing really quickly I'm gonna space these two images out a bit so to do that I'm gonna do clothing who not clothing we need the nav images we're gonna add display flex justify content space round and with a hundred percent there we go a bit of space everything was decent not horrible let's also fix this up here which is the nav closed ul I believe nav closed ul display flex we are flexing all day oh my goodness yep there we go have a width of 50% let's see how that looks and just justify content space around okay let's get rid of the list style we're gonna say none should be looking decent alright there we go we can finally finally get rid of the background color on the nav open so we're gonna go here remove this we're gonna add opacity zero to this so it's not visible however we can still hover and click over things so we're gonna add pointer events none so we cannot click on anything there we go now it's like it's officially not there anymore perfect that's all we need let's start animating the reason why we are here in the first place so let's go into our fjs in here i'm gonna select two things with variables so we're gonna call one nav button and we're gonna do document that query selector and we're gonna do nav button so it's this one that we're going to click on and we're gonna start the animations and i'm gonna grab one nav open which is gonna be document dot query selector we're gonna do nav open here so this is the one that we remove the pointer events off and the opacity because we want to add the pointer events back when the animation finishes basically that's what we that's why we want to select this one here and i also want to show you something really cool in gee set that we can do okay let's start animating this so the way we can do to animate things I'm gonna show you a simple way and then we're going to use the timeline sequence everything nicely so we can create something called a tween and we can set this equal to timeline tween light dot too and what we can do here is we can define the object that we want to move around we can solve the tang the object then the time and then the different properties that we want to animate so this is how the tween light works you define what you want to move the time that you want the animation to last and the different properties like the color the position and things like that so let's give this a try huh we can just do the cover image cover we can do one second and here it's an object so make sure to open up an object and then here we can just say something like with 40% and quotes here hit save and as you can see it animates that kind of jumps around it's not that nice but that's how basically tween light works now we want to make a sequence of multiple animations so for that we're not gonna use like tween and then create another tween we're gonna create something called a timeline so we're gonna say Const key L is gonna be equal to you timeline light like so okay this is a function and we're gonna close it up here and now we're gonna have a problem because as you can see it's automatically gonna animate and we kind of don't want it to automatically animate so to stop it this also if blue accepts an object that we can add extra properties and one that we're gonna do is called paused paused and we're gonna do : and true and then it's not gonna animate right when it refreshes we can control it any way we want so how do we add multiple animations to this timeline well we can do time line like so dot two so we're gonna use two again and we're gonna grab the cover comma we're gonna add the duration comma we're gonna do the object I'm gonna press ENTER so it's more visible and we're gonna add width of 60% thanks so now another cool thing that you can do in G's app is you have multiple easing that are really nice so we're gonna do ease and one that's really cool is power two dot is out you know I really like the way they named these there's power one dot is out power to power three power 4 and bounce and things like that so super simple you can find that you can remember it in three seconds I hate it when they do like quadruple blah blah like look I'm a simple man I need power one power two power tree I don't understand anything else I'm pretty stupid okay so that's one animation now to add another one we can just hit enter here and just add a dot and two and right there perfect we can just sequence another one so the second one we're gonna grab the nav that's the second property we're gonna animate it's gonna last one second again and in here we're gonna create another object I want the height to move to 100% and I'm gonna show you just in one bit how this looks we're gonna add the ease power to dot ease out so the same one that we used now let me just add this to an event listener really quickly so here we can do nav button dot add event listener on click we can run a function I'm gonna do an arrow function and in here we can just do timeline dot play so we can start the end right now it's paused and we can play it let's see how these two look together click shop there we go as you can see this one the first one is gonna wait for the second one to finish so after this finishes the second one is gonna start okay but what if I wanted to delay this what if I want this to kind of start faster well after this object here on the second one as you can see right after we close this object you can add a comma and then you can do strings and you can do - equals 2 or plus equals 2 in this case we're going to do minus equals to 0.5 seconds so we're gonna start the animation halfway through the first one so half a second earlier then the first animation finishes okay so this one so it keeps in mind when this one finishes but we're gonna do is 0.5 seconds faster now if we take a look this is gonna start halfway when this starts if I want these to start at the same time I can just do one here and then all of them you can you can just play around with these as you can see now kind of starts at the same time but I 10.5 seconds perfect another thing we can add is daemon I have open so the one that's gonna animate in again which is sequencing another one on top so delay this and just do two again now what I want to do is I actually kind of want to animate from zero opacity to 1 and maybe I want to define extra things maybe I want to move the text around a bit and for that you can do from - from - it allows you to define certain properties that you want to animate from to something because this one is just gonna take the default ones into consideration but here I can add some special properties that I want to animate from so from 2 like so it's gonna be almost the same we can do nav Oh we can define the time again it's going to be 0.5 seconds and this object is going to actually be the first the from so where do we want to emanate from well from opacity zero and I also want to do X 50 because I kind of want to slide them a bit and I'm gonna do YZ as well of power - that is out so as you can see I can define the property where to move from and I want to move it back to zero so its original position and X is kind of like translate X okay that's why the XS is kind of a shorthand and after this first object I can add comma and define a second one and this is where we want to animate - well where do I want to animate - well opacity one and X zero let's take a look click about this one click and as you can see we can just animate it back to our original position from a value of 15 how cool I love this so awesome now what if I want to add back the pointer events how do I do that another cool thing you can do is after you define your properties you can also add a function you can do something called on complete and this is just a normal function like stone and here what I can do is say nav open so the element that we grabbed up here dot style dot pointer events pointer events like so it's gonna be equal to auto and I'm also gonna add a console log in here so you see what's happening done so this is only gonna run when the animation finishes let's take a look if we hit f12 in our console headshop look at that right after this animation finishes we get deep done so I think this is so awesome that we have promises in this and everything is click clickable everything is selectable and everything just works perfectly now how do we animate back how do we do that well there's a cool thing we can do is we can define just a function down here we can say function toggle tween or timeline and we can add a parameter call tween and in here we can do tween dot reversed and what this is gonna do is it's gonna check if the timeline is reversed or not and if this is true we can just do a simple ternary function if this is true then we can tween the play so it's like here PL the play however if it's false oh this is the other way around I apologize so like so and if it's false it's gonna go to this one so you can imagine this as being like if this then it's gonna run this else this is gonna be the else statement then we can just do something called tween dot reverse reverse and even here we can just do reverse like so okay so now we can replace this one and just say toggle tween and which tween do we want to toggle we need to add this parameter it's the parameter called TL the one we created so now the TL is gonna go in this function it's gonna check if it's reversed if it's reversed then it's gonna play this if it's not reverse its gonna play this and this is a function I apologize I'm messing things up today there we go so all of them are functions it's safe let's see let's see hit and hit back and it reverses now there's a problem with this when we first click it's not gonna work only when if we click the second time so to fix that we can go up here and on the paused we can add a comma and we can just say reversed true so we can start this on default and now when we click it's gonna work perfectly there we go now one another thing you can do is maybe you don't want to be able to click this so many times so you can kind of mess around the animation because it's kind of funny you can also remove you can add in here we can just check if the animation is going and we can just not run this code we can do if timeline is active so there's a built in function that we can check so if the thing is active and here the parameter we can add the event and we can just call a dot prevent default like so and a dot stop immediate propagation stop immediate propagation like so and we can just return false what this is gonna do is when the animation is running this is gonna return false it's gonna prevent default and you cannot stop the animation it's safe let's see now when I click multiple that multiple times it doesn't matter if the animation is gonna finish nicely you're gonna break it when we click again yeah everything just works quite ok there we go good job you finished this cool animation hope you're liking jisub I think it's really fun I loved working with it and the built-in functionality they have is just absolutely superb there's so many things I'm discovering every day and yet and the plugins it's I kind of want to cover more of them in the future but anyway hope you enjoyed this one please please drop a subscribe button I have a design video coming up in like 2 or 3 days it's gonna be super super fun it's gonna cover figma highly in depth and we're gonna we're gonna just create a full website from scratch alright everybody thank you again see you next time [Music]

Channel: Dev Ed

Views: 96,435

Keywords: gsap animation tutorial, javascript animation, javascript animation tutorial, gsap tutorial, tweenmax tutorial, html5 animation tutorial, timelinelite, tutorial, web animation, javascript animation library, javascript tutorial, animation tutorial, awesome animations with javascript, dev ed, learn javascript, learn javascript animation, tweenlite, tweenlite tutorial

Id: 5RyrIPCs47A

Length: 30min 40sec (1840 seconds)

Published: Sun Mar 03 2019