We have it displayed over here in the background and if i click on this close icon the animation gets reversed and we have the default page displayed over here now in the previous video we.
Created the design using html and css so we don't have any hover animation or any reveal animation at the moment so we will do that in this video let's get started.
now the first thing we will do is we will add the hover animation so if i go back to our original design here we can see when we hold over these.
Menu items we have the same text displayed in the background and we also have a little bit of animation so for that we will use data attributes.
So let's type data and here after the hyphen you can name it anything you want so i'll just name it menu and we will set it equal to home so this is the first data attribute so.
We need to add data attributes for all these menu items so let's type data menu equals and here we need to type about and then for the third one let's tap.
Data menu equals courses and then for the last one let's tap data menu equals contact right now let's go to our css and we need to access these data attributes in.
Our css so here we can see this is the selector for the anchor tag now we're going to use after selector for displaying the data attributes so let's type menu container.
Menu items a column column after and using after selector you can add additional information to your content so we need to type content.
Posts Related:
And for example if i just type one two - Make Automate
Three and if i go back to our design here we can see after the menu items we have one two three displayed over here.Now instead of one two three we need to display the data attribute so let's go back and here we can add a keyword called attr for attribute and.
Here we can just add the name of the data attribute so we have the name as data hyphen menu so let's type data hyphen menu and now we can see that the data.
Attribute value is displayed over here in the after selector now the next thing we need to do is we need to display it behind this text and we need to increase the font size and.
We need to add some more styles so let's go back and let's set the position to fixed and we will set the left position to 50 and the top position to 50 percent.
And now we can see that these data attributes start from the center so we also need to type transform translate and we need to type minus 50 for the x and y axis.
And now it is exactly in the center right now let's set the font size to 200 pixels and we'll set the font weight to 900 and let's set the opacity to 0.1.
And we'll also set the text transform to uppercase and now let's remove the pointer events from the data attributes so if i hover over this we can click on this link so.
Let's go back and let's set the pointer events to none now the next thing we need to do is we need to display these data attributes only when you hold over these menu icons.
So
By default we will set the opacity to 0 and we'll also set the transform translate x value to negative 100 pixels so let's type calc.Minus 50 percent minus 100 pixels and let's add a hover effect so let's tap menu container menu items.
A column hover column column after and let's set the opacity to 0.1 and we'll set the transform translate to the default value so let's type negative 50.
And negative 50 and we'll also add a smooth animation so let's tap transition and we'll set all to 500 milliseconds ease.
Right now let's go back to our design and now if you hover over this we can see that the text is displayed at the background so it is working all right right now let's add the entrance.
Animation for all these elements so if i click on this menu icon we want to display all these animations so we will use a library called gsaf for that so let's get the cdn of gsap so you.
Can just search for gsapcdn and you'll find this website cdnjs.com and let's copy this link of gsapmin.js and let's go back to our html and i'll just paste it over here just.
Before the script tag right now the next thing we will do is we'll just set the default styles of this nav menu so by default we don't want to.
Display any of the elements over here so let's go back to our css now here the first thing we will do is we will add some transform translate x for this logo and this close icon.
So if i click on this menu icon we can see that the close icon comes in from the right side and the logo comes in from the left side so by default we need to set the.
Transform translate x to some value so let's target the logo and here is the selector for the logo so here i'll just type transform.
Translate x and let's set it to negative 30 pixels and here's the selector for the close icon so let's type transform translate x.
30 pixels now for all the anchor tags we need to add a transform translate y so if you go back to the original design here we can see that these menu items.
Come down from the top so let's target the anchor tags and here i'll just have transform translate y and let's set it to negative.
20 pixels and we also need to set the opacity to zero right now for the menu container we need to set the height to zero.
So here we can see at the beginning we have a height of 0 for the menu container so let's go back and.
Let's target the menu container and here for the menu container let's set the height to 0. and we'll also set the overflow to hidden.
Now for the logo and the close icon also we will add an opacity of zero so let's add opacity of zero over here as well right now let's start with the gsap.
Animation so let's go to our main.js file and first of all let's create a timeline so let's create a timeline with the name of tl and we need to type gsap.timeline.
Now let's add the animations over here so let's type tl dot 2 and here for the first argument we need to type the selector of the element so first of all let's select the menu.
Container so let's tap dot menu container and then we need to add an object for all the animations so let's type.
Height and let's set it to 100 viewport height right now let's save this and now if we refresh this page we have this animation right now let's add the animation for.
The logo so let's type dot 2 and here also we need to add the selector so if you go back to the html file here we can see for the logo.
We have a division of the class of logo inside menu container so let's tap dot menu container logo and here we need to set the opacity to.
1 and also the x value to 0 because here we can see we have set the transform translate x to negative 30 pixels.
So here we are resetting it right now if you go back and refresh this page here we can see that both the animations are running all right right now let's add the animation for.
The close icon so let's tap dot 2 and let's add the selector for the close icon so let's tap menu container close icon.
Svg and here also we need to set the opacity to 1 and x to 0. now if you go back to our design and if.
I refresh this page here we can see that the animation is working but we need to bring this close icon a little bit earlier than it is right now.
