Creating a Full Screen Navigation with GSAP 3

Key Takeaways

today we're going to use html css and gsap to make this a reality in the browser [Music] hey everybody what's up gary simon here so this is second part of the two-part video series on creating full screen navigations in the first video that i did two days ago i'll link in the description here and we discussed the ux concerns and we also created a prototype of our very own uh full screen animation in using adobe xd and we're going to go ahead and take this this prototype and try to create something similar but even better in html css in javascript alright so as always make sure to subscribe and let's get started one second before we begin the sponsor of this video is scrimba now in case you've been living under a rock scrimba.com is an interactive learning platform for coders they've recently launched their front of development career path which is a collection of courses that cover html css javascript react and much much more as you see it's over 75 hours of awesome content there are hundreds of interactive coding challenges and it's all geared towards helping you go from beginner to someone that's hireable as a front-end developer so check out the first link in the description below to get 50 off all right so first just to go over the prototype that we created um here's the desktop version and we'll click launch it and again something like this will occur except it's going to be cooler and then we click x and it goes back and here's the mobile version as well click it and ready to rock okay so basically i have visual studio code open and i have a blank index.html with a folder and a main.sas file inside of it so um we're going to use an abbreviation exclamation point enter that gives us our initial html we're going to type link enter css main.css file all right so let's bump this up a notch control plus to get that bigger and then let's go ahead and right click uh or not right click but choose watch sas you're going to need the safs live sas compiler and live server to follow along with this tutorial at least all right so let's close that and then right click open with live server and at this point i will go ahead and close those tabs out and we're going to push this this over here because we're going to start with mobile first css all right and so what that is is we first start designing the site based on a mobile viewport roughly kind of like this all right in that way then we'll use any necessary uh media queries which we hardly have any honestly in order to make this responsive and and make it work for tablets and desktop so what we're going to do now is we're going to step into our html and let's get our button you know if when you're dealing with you when you're a front-end developer in a ui ux person hands you a mockup you're going to be switching back and forth or if you had a second or a third monitor or whatever you can have this up here because you want to get everything nailed up right all right so we only have a single button on here so our html for that obviously is very simple and for this layout as a whole so we're going to use a button element and we're going to say launch it so we'll hit play and we'll see how ugly it is we'll get to the css after we do the rest of the html now we actually have to create the html write the html as well for all of this stuff right here all right so you can see there's going to be a big div that covers the whole screen here and then just some unordered list items so first of all we'll just call that big div overlay now i'm using abbreviations again so you put a period entering that gives you a div class of overlay and i'm not going to try to explain that much more i have a little crash course on emmett uh e-m-e e-m-m-e-t you can do a search on my youtube channel for that um we have to have a link for the close button that little exit icon so we're gonna do a um a for eight it's not going to go anywhere it's going to be class of exit and then we'll just put in an image source of images forward slash close that will be svg and we're going to have to export that of course exit navigation for the alt and then um yeah that's just the eye image there and that's looking good all right so we're going to save that of course we have a broken image up here because we don't have that i'm going to go ahead and just pause and get that going here in a second and there we go looking very good all right so now i coming out just underneath that element we also need to have i'm going to have actually kind of two divs to that way it'll let me situate things more it'll become more clear why i'm using these two parent div containers um when we get to the css part so i'm going to have one called menu here all right this is the overall container that will contain all of it'll be our css grid uh container this would be a big container that wraps around all of these individually and then we're going to have another one for each one of those elements so menu container and then we're going to have a paragraph with a class of category and we're going to say category like that and then we're going to use our unordered list li a href is going nowhere and then a link can go here shift alt down arrow key five times uh actually i'm going to use six because that's what i used in my reference code and then now we're just going to take this and we're going to copy that about oh yeah a bunch of times actually um all right so i did it about 10 times very ugly that's why i love css because that is just nasty looking all right so for that for now that is it for our html so now let's go ahead and switch to our css all right so what i'm going to do is now put in um just some basic stuff here so uh box sizing border box i kind of do this every time for every project um and then if you want really want to understand what's happening here i would just go to youtube to get a good explanation but basically when you're dealing with padding and margins and stuff like that and widths it can throw things off and create for squirrel bars and this prevents that we're going to do body margin 0 and we're going to do a height of 100 viewport height and also a background in the background is going to be our color code that we used during the prototyping phase in the previous video and also display and one thing i want to do really quickly is i want to take our overlay and just display none it just so we can get this looking like the mobile version in our prototype over here like that all right so now we have a few more properties we're going to do display grid we're going to do a place content center and then also font family neato ariel and there we go um so also um we need to take our button and we need to give that a slightly lighter background color and i already have these color codes so we're just gonna do background uh right here all right and then of course default buttons are ugly so we need to do border nine we have to do color white and we have to do padding of 0.5 m units on the top and bottom and one m units on the left and right we need to do a border radius of just two m units to create the pill container a font size of 1.3 m units and then the font family isn't applying itself from the body element so we're going to do nunito here in ariel and then cursor pointer maybe we'll do font weight bold as well there we go and there we go so that's our button looks pretty similar to the one that we have over here all right so now what we're going to do is focus on our overlay all right so now we could take this off and we're going to do a position of fixed all right and we're going to do a background of that very it's almost a white it's like a shade off from being white it's f f f e f f that's kind of hard to read all right and then we're gonna do a width of a hundred percent a height of a hundred percent all right and then also overflow why is scroll because when you do position fixed uh if you have like this goes down beneath it you're not going to be able to scroll so um you're also going to put overflow x as scroll as or hidden rather all right so now we can see this came back so we can actually use that um and then padding is going to be 2m units and pointer events will be none and after that we're going to take our exit button we're going to do position absolute right 2m units and top was 2m units all right so we're kind of getting close to the structure here already defined i this just this stuff needs to work here so let's take our menu and our menu is defined right here in our html so it's basically the parent container of all these different menu containers right here so here's menu so that's going to be a display grid and here's a really cool one line that will make this all responsive it's so fun i we're going to do grid template columns in fact i have a whole video dedicated on this repeat function we're going to put auto fit for the first parameter and then min max function for the second parameter of 15 rem units and one fractional unit now watch what ends up happening when we save this nothing changes here however it's automatically making this responsive for us so if i get rid of that and we try doing the same thing nothing happens the only way you other way you'll be able to do that is by using media queries a bunch of them so this is an awesome property you can experiment with this and watch my other video to learn more kind of about how it works all right so now let's get uh the unordered lists working here and styled so unorder list list style type none will get i rid of those bullet points we're also going to do padding 0. all right now we're going to take our list item a element let me scroll down a bit here and we're going to say text decoration none get rid of the default underline color black display block and padding is going to be point eight m units on the top two m units on the right point eight humans yeah eight oh my god i can't talk point eight m units on the bottom and one m unit on the left all right and then we're going to say font size 0.9 m units and then we're going to say and hover on those link elements background is going to be um rgb those three values that you see there and if you uh look at this oh that's not working just yet you know what i think i screwed this up possibly l i a oh it's because we have pointer events none never mind i'll fix that in a second all right we're gonna do border radius 0.2 m units so right now these aren't working because i forgot i put pointer uh event none right here and there's a reason i did that but for now we're just going to take that away so now we can see these and then we want to take our our category it's a p class of category font size 1.2 m units font weight bold color is the color the purple color that is our background and then margin left is point eight m units to be in line with the rest of this stuff all right so we're going to change one a couple more things and that is going to be our exit image which is the svg graphic right here and we're going to take the width of 23 pixels height 23 pixels here just to scale down slightly all right and that looks uh pretty good right there so looking at this this is what we have initially and it looks pretty decent now of course nothing functions at this point so what we want to do is we're going to take i and start focusing on our gsap so gsap is the green stock animation platform just go to google and you can learn more about that i'm going to copy the gsap cdn link which you can find right here so if we type in gsap 3 cdn go here we'll just copy this one we're going to copy the script tag right here we're going to put it right there put our own script tag down here and then first define about three different constants here in javascript to give us access to our button the main launcher button as well as a few others so document.query selector is going to be button just the html element of the button um shift alt down to replicate that a couple times we're going to do our overlay which is the big overlay that you know this big white thing and this is a class i believe yep and then exit which is our exit button all right so now we have to create an instance of the green up gsap timeline so far timeline equals gsap.timeline and we can create some defaults in here so a duration of one we can have a default easing type so if you type in gsap3 easings in google you will find all the different easings you can use one of the ones along with demonstrations one of the ones that you can use is back dot ease out dot config two all right and i think that's pretty solid right there then we're going to create here i well first before we get to that let's create our event listeners for the button so the button add event listener we want to click arrow function and inside of here we can just console.log yay just to make sure this initial stuff is working so um before we can do that we have to go back to our overlay and just uh display not it all right so now we get up our console let's let's widen this a little bit yay it works okay so now what we'll do is get rid of that again and we're going to create our timeline and our animation that's going to uh work so we're going to put first as a tl paused is true and you'll see why we do this in a second it's just going to make it so it doesn't automatically play and then we'll be able to call the play method when we need to so we're going to say tl2 so you can use to or from so you want to go to these properties we're about to define or we want to go from the properties that we define it's up to you we're going to go to them so we're going to say overlay so that that's the uh the first parameter is which element you want to target or and apply animations to so it's going to be our overlay and then we're inside of here we put in the css properties in camelcase format so clip not path because this is what it looks like usually in css it's going to be clip path all right we're going to say circle oops what am i doing here we're going to say circle 100 all right so we're we're saying go to that uh property essentially now what we first have to do is we have to come back to here and we have to put in clip path circle zero percent now it's going to hide all right now if we put it at 30 percent for instance we'll see it only shows some of it so we're going to be animating that property with gsap so now oh in pointer events now okay so we don't need to deport our events because there we don't see any of the anyhow so never mind that okay so now what we'll do is inside of there um we're going to go ahead and put the next one is gl our tl2 menu container we're going to say opacity 1 y which is vertical we're going to have it come in from 30 pixels in the menu container by the way is each one of these so we're going to create a stagger animation or otherwise known as a sequence animation and so to do that we put stagger point uh one and that's basically a duration between each one so they're going to come in real fast one right after the other and then we're also going to put in a comma and another the third parameter is any type of offsets um so we'll go ahead and put minus equals one second and that means this right here will start to occur one second before it normally would if you don't put this this parameter in you'll see how it will affect the uh the the animation this this right here won't start until this is fully completed so you can create offsets right here all right so now and the way this stagger works is when you put it there it's going to look for every instance of a menu container right here and by the way i'm annoying myself because i didn't put double quotes like i did the other one okay so it's going to look for every instance of menu container and it's just going to animate them in sequentially based on this value and based on what you're animating here all right so that's looking pretty good right there so that's all we need for our animations there so now with this we can remove that and we can say tl.play once somebody clicks on this button there we go look at that so we can't exit out of it yet and also we can come out here refresh i keep on trying to click click it's thinking it's going to work and that's not working right right that's not correct why because i forgot to put an opacity 0 on our menu container so where is our menu container at did i not put it let's check the reference code menu contain up i think i did use it hmm i'm silly yeah i completely screwed this up this is supposed to be like this and then i'm supposed to put another one menu container like this there we go sorry about that people we're going to put in margin top 2 i mean it's because i thought it did look a little bit different an opacity of 0 and then a transform a translate y of negative 30 pixels so let's try that again there we go that's how it's supposed to look all right so now let's make the the exit button work well here so now to make this work all we have to do is just copy this this is going to be um exit on click what we do is we could say reverse but we're going to change this up one second so if we click this and then we click this first it has to wait for all these and then that's not good for ux because it's too slow so we can put in a parameter of like 0.7 and that means it will start from 7.7 seconds into the animation otherwise so now we click this and then we click this and it goes by a lot faster and you can speed that up if you wish like by putting it up a little bit higher if you wish and that is it so let's check it out here we're going to look at first the mobile version all right close it out and then we'll check it out right here and you get the point this basically all works and looks pretty solid from here on out awesome awesome stuff all right so hopefully you enjoyed that if you did make sure to subscribe up check out designcourse.com and enter your email to be notified when that releases and i will see you guys soon goodbye [Music] you