Animation for all these elements of our design now in this video we will add the animation using using Gap so let's get .
Started now the first thing we need to do is we need to get the CDN of Gap so just search for cdnjs gsap and click on this first link over here so this is a link of the CDN of gsap so you can just.
Click on copy script tag for this Gap MJS so let's click on copy script tag and let's go back to our source code and here in the HTML I just scroll down and just before this script tag I just paste.
The CDN code so here we have the Gap Min JS library and then we have this script tag where we are linking the main.js file so now let's go ahead and add the animation using Gap so let's go to the.
Timeline now after this timeline is created you can just go ahead and type TL which is the name of the timeline then you have two options from or to so I just tap from now what this will do is.
It will go from the state that we provide over here to the current state that we have in our website so for example this logo is right here now if I just type from and if I add an opacity.
Of zero then it will go from zero to this opacity of one now if we add two instead of from then it will go from the current state to the state that we provide over here so for example if we.
Set the two to opacity of zero then it will go from this opacity of one to the opacity of zero so let's go ahead and write the code and you will understand it better now here the first thing we.
Need to do is we need to provide the selector so the first thing we will select is this background image so here we can see if we reload this page the background image is first displayed over.
- Color Gradient Photo Overlays Bundle Download For Photoshop Sheri Sk Photoshop Tutorial
- Excel VBA Introduction Part 8 - Variables
- Create Pay Periods, Events, Search By ID and TONS More Excel Employee Manager Part 5
Here so let's go back and uh if you go - ID Card Make
To the HTML file here we can see inside the hero section we have this IMG tag so it is immediately inside this hero section so we can just go ahead and type.Hash hero and uh in that we have the image so I'll just type greater than IMG so it will Target the immediate image tag and it will not Target the images inside any of the other divisions so.
Let's go ahead and add an object over here for all the animations now here we just set the opacity to zero so it will start from opacity zero and go to this state which has the opacity of one so.
Let's save this and let's go back and let's reload this page and now we can see that the image starts from opacity of zero and it goes to this state right now let's go ahead and add the animation.
For this nav so if you go back here we can see that the nav comes in from the top so let's go back and uh here we can go ahead and keep adding new animations so here let's type Dot from and let's.
Select the nav so we have the nav element and let's add the animations so here in this object let's type y which is the Y AIS so let's Ty minus 100 and we can also add easing so let's tap.
Ease and let's set the easing to export. out now you have different options in gap so I'll just show you that so you can just Google for Gap easing and uh just go over here to this link and here.
We have different easing options displayed over here so we have power one out and we have these three options in here and all these options over here you can.
Also create your custom easing so you can just click on custom ease and uh customize the ease and it will give you the code for that so right now we are using this easing called export. out so.
This one right here so this is how the
Easing will look so let's go back let's also set a duration so let's Ty duration and let's set the duration to.1.7 and let's save this and here we can see after this image animation we have the nav being animated now we want to have this nav animated a little earlier so before the.
Animation of the image finishes we want this nav to appear so here we can see the nav appears a little earlier so for that you can go back and you can add an option over here after this object so.
Let's add a comma and here you can just type minus equals and you can add a value over here so I'll just type 6 now it will run the animation 6 seconds earlier than default so let's save this.
And let's go back and now let's reload this page and now we can see that the animation is working correctly right now let's go ahead and animate this logo so for the logo we have the animation where.
It fades in so let's go back and uh here let's let's add a from so let's typ do from and let's target the logo so let's type nav and if.
You go back to the HTML file here we can see for the logo we have this anchor tag with a class of logo so let's type do logo and now let's add the animation so let's create an object and let's set the.
Opacity to zero and let's also set the duration to one and let's also add a transition delay so let's type minus equals 1 so we are adding a negative transition DeLay So let's save this and.
Let's reload this page and now we can see that the animation of the logo is also working now let's add the animation for these menu items so if you go back here we can see that all these menu.
Items are displayed one after the other so forther let's go back and uh here let's type Dot from and here let's typee nav and if you go back to the HTML file here we can see that we have this.
Division with a class of menu items and in that we have the anchor tag for all these menu items so let's type do menu items a and uh let's create an object now for this we need to set the opacity.
To zero and uh we need to set the scale to 0.8 so it will start a little smaller and it will grow and then we'll set the duration to 1.5 and let's also set the easing to.
Elastic dot out 1.5 so you can experiment with these numbers and now let's go ahead and add a transition delay so let's type minus equals 1 and now let's go.
Back and here we can see we have the animation for all these menu items now we want all these menu items to be displayed one after the other so for that you can use this option called.
Stagger so let's St stagger and let's set the value to 0.3 and now let's save this and now we can see that all these menu items are displayed one after the.
Other so it is working all right right now let's go ahead and animate the rest of the elements so let's animate this uh text content area now if you go back over here we can see.
That this text content area comes in from the bottom now if we go to the mobile version here also it comes in from the bottom but uh here it has a lot of.
Height and here it doesn't have a lot of height so we don't know exactly what position we need to start this text content area from so for that let's go back and let's go to the CSS file and.
Let's go to the text content division so here we can see we have this division with the class of text content so let's find that over here so here we have the text content now here we will set the.
Position of the text content to below the screen so we can just type transform Translate Y and let's set the value to 100% so it will go below the screen now let's go back and let's go to.
The main.js file and here let's target the text content so just have Dot and here we use two because we want to start from the bottom and we need to go to a different state so let's type hero text.
Content and let's create an object and let's Ty y z and let's set the easing to power 4. out and let's set the duration to 1.8 and uh let's also add a transition.
Delay so let's type minus equal 1.4 and now let's go back and here we can see we have the animation for the text content right now let's go ahead and add.
The animation for this heading so for the heading we have an H1 so we can see we have this H1 over here so let's type Dot from hero H1 and here let's create the object and let's tap opacity and.
Let's set it to zero and let's set the scale to 0 .9 so it will start from a scale of 0.9 let's set the easing to elastic do out and here let's have.
1.2 and 0.4 and let's set the duration to 1.5 and let's also add the transition delay so let's type minus equals 1.3 and now if you go.
Back here we can see we have the animation for the heading now let's animate this subheading so if you go back to the HTML file here we can see we have this paragraph with a class of.
Subheading so let's type Dot from hero subheading and here let's type opacity and let's start from zero and let's set the x value so if we go back here we can see that the subheading.
Comes in from the right side so for that we are setting the xaxis and let's set it to 40 and let's set the easing to elastic dot out 1 and.
