🏆 Learn from Basic to Advance with Awwwards Website Scroll Animation ! | HTML CSS JS GSAP | Part 01

Hello friends, how are you, hope you all are doing well and Sorry for putting on a lot of weight, but it's fine, no problem, it's the same as it is today. The project with which you guys talked meant that you completed the like that you had given. Also completed the comment given, hope you like this video also. You will like his I series so let's continue it and there is much more in it. I know the video will be a little long to learn but it's okay, you have a lot to learn. Something is coming a

nd this is just the first video and more videos will follow. Will come because it is not possible that we can cover it all in one video but okay today The main thing that we will learn is our hero section which is visible to you or right now. What you are seeing on the screen is the thing that we are going to create and it is quite It will be fun, let's create quickly and come back once again, sorry friend because my There was a little issue as well. Okay, you can understand as you are a student

and I am also a student. Understand, if you don't understand then who will? Friend, I can understand your sorrow and pain. Let's meet here on the computer screen and create it quickly and this time also If you show the same love then it will be much more fun then I will not like it but I will not keep it but ok Do you know what to do? Share it with your friends as well as the channel. Don't forget to subscribe if you are new to this channel, if you are old then enjoy. Now finally get it on the

computer screen quickly otherwise the cameraman will get angry. Come on brother, let's meet here so let's complete this website quickly. As I told you in the intro, okay, so first of all I want to know about its assets. etc. assets are needed, meaning that whatever things are visible here have become images. When all these things are texted, I need them, so I do one thing and get them quickly. Let me show you how to figure it out, do the rest quickly and run away. Okay, so we will go here, go to

the network, go to the network and Where did brother go? Oh my God, will we have to refresh once ? Yes and this Let's reduce the screen a bit, it is actually not visible here. It's ok, let's check once by clicking on all. Here we got it, ok one more time. Refresh is ok, all the images etc. are visible here, if not. If so, I'll zoom a little more, then nothing will be visible, okay look at this. Here we have all the text images we need, like this is our We will find all these things used like SV

G etc. here and whatever If you have images then how to download it is simple, right click here and save. If we talk about images and direct download and font, then how will we extract the font? To download the font and font, right click and directly open it here. And new tap then whatever is there will be downloaded automatically. Your whatever will be downloaded. Okay, so first of all let's create a folder and we will work inside it. There used to be a folder named here, ok, we will create ano

ther folder in it. Brand beat in the name of brand beat not bram dum brand beat is ok and we all in this Let's download our thing and here it is. Okay, first of all, let's do this font. Will you download the app? Where did it go? There was a folder named 'Brand Beat' on our desktop. Right here, right click on it and select the names of the assets. From and just change the name of the font here and keep it as Phat Phat Phat Phat, okay but one. The thing is that this font is in double AFT, okay, s

o we will change its format. Whatever it is , we will convert it from DDFF to TTF, ok, find this website. You can search anywhere on the web as WOFF2 to TTF or OTF because our Whatever is in the computer means whatever is in Windows, it normally supports the same, so we Will work only where we find supported format, here it is, let's convert. Look at this, here it is TTF, convert to TTF, it's done, download it right here. You should have downloaded it in the folder from where we did it. Okay, no

w it is visible, so once Let's check this inside the assets, it's ok, this font is supported by you, it's not. Supported We delete it for now because it is supporting us By right clicking install for the user it says already installed, ok Do it one more time, what is the problem, ok, one task is done, now let's talk about images. If you were doing this then I told you how to download the images quickly. Simply click on the image right click and save image from here S Okay and I do a thing I will

create another folder inside assets named images. Okay, and if we save all the images inside this, we will keep the name very simple, Tooth, by doing this So now you get to download everything directly. After okay, this is all ours, here the images have been downloaded and now what If we have to use it then first of all the images are fine by name and the font is also ours. All the assets are almost downloaded here and more if we need. We will take a look further. Okay, whatever we do with this

folder right now, we will right click on it. Open with code, right click on which folder, folder named youtube2 We are making it open with code because we are going to do the coding inside it. So this is what we are doing, welcome screen, thank you so much for this welcome screen. Guy's here to cut it html.com There is no need to tell how it is used, that much you If you are not wise then brother, then you can become wise by enrolling our paid course. Okay, so quickly here we will write gravity

coding and move ahead. But let's make the main deep and I will work by dividing it in half so that the work can be done quickly. If it 's okay, then whatever is there in Haig is revealed here. Give 100% and height will be between 100 ok but I thought this height should be minimum height. So that whatever elements and other things we keep inside it, it keeps increasing automatically. Okay, now the first task is to create a nap bar here. Because we will not proceed without nap bar here as you can

find on this website I can see that there is a nap bar here, right above and we have created the same effect. Now see how these effects are being created. Okay, that means how these things are being created now. Look, first of all we see a left nav in the nab, then we will create the left nav and If we see one right here, then I just copy it and just change it here. I will give RGHT okay and whatever we have inside it here if if carefully If you see, one thing is happening that suppose a brand

beat is written, then what happens when every If you are doing this, then another brand beat is visible from below, which means the text written here What we will do is write two texts here and write one, then another and but first. You would have written this brand bit and everything was in small, ok copy paste Two, we have placed the brand bit here in the same manner as written here. hit.com So what will we do here in the same way, make two ave or h2. Okay, let's separate them, so contact @, l

et's write ours here. Gravity coding is fine, you can write whatever you want, if you have any problem If you want to contact then you can do it here, we are fine, it is working so this is what it is We have put the contact here, now we will design it and give the width. 100% and we will give whatever height is and something 15 VA background color: For now, if you try something, then at least a glimpse will come, will it be aqua? Marine will show o If we have not yet opened it from the live serv

er, then right click on it. Let's open with live server. Here's open with live. The server is currently in such a way that we cannot see it, which means that we have not updated the CSS If you haven't linked it, get started. The first thing you need to do is link the CSS. We deleted something yes link it here is the link to the CSS Now let's see a number is visible, okay but it looks something like this, we want Left and right come and to do this or that, first of all you have to Display flex ha

s to be made, it 's not display block, brother, it's flex. Okay, I have given flex and do one more thing in between, align the item and center it. Are and justify content space between is ok then it will be separated i.e. left The part has come here, the right part has come here, number one brother, but you sir said something like this If you make it properly then you will become a guru. Wait for a while, let's move on. Here we design the left nav a little and we do nothing for the width. Will g

ive it by default, it will take the background color, give it for now and Suppose it is red, it is okay to give it so that it is visible, whatever its width will be, it is visible. We don't care about that, we want to give the font size here, then the font inside it. The size will increase, oh yes, it looks too much, just a little bit more. 1.5 is ok 1.5 is good and I want some padi to be added from left and right In the nave, here we put zero word and on the left we have given it from top to bo

ttom and Left Right, if we give 3 words then it is okay, it gets shifted inwards but now which We have to reduce its height, okay, I just want one brand bit. If the second one is visible, what will we do about it? Here's the height. Will decide its ok height will be something 5 BH Let's see this, it's ok, 5 BH is there, we can see its height, but I want it. I am a little more, it should be kept around 6 BH, it is great, so 6V is good for This and I want that this is what if one more thing can be

done that let's suppose left nav Inside, if I give margin top to h1, it means that the first one of h1 is two h1. Nah, if you look carefully here, there are two h1 inside the left, okay this is one h1. a h1 this is what I want to give to the first one so what will I do here a f first mth No bro a f first okay and margin top here if I give Let's give margin top of bh sorry 6 bh as much height as we kept which if we If you take the margin top, what happened? Well, you had to take it in minus. Sor

ry bro, look at this. The second one is coming inside this one, we need something similar inside the red one. There was a number Y sir but it went a bit too much. Keep 5.5 and it should be visible in the center. Okay. Great, now look, if I remove this thing, this is what is visible here and if this If I add something then this is what is visible here, we have to do something like this, just this Whatever is going outside should not be visible. No problem, friend, go outside. Stay hidden, kill me

, whoever went outside, send him out immediately, brother, overflow done. Done, now only one is visible, meaning only the one inside this red box will be visible. Whatever went outside will be visible. If you understand, then one thing has to be done now, this thing which we have written. On whom do we have to do this? Whenever we do Har, because when we do this Har, If you are doing fine then no problem, just put it on the left nav when we do the denominator, what? It should be okay, so it shou

ld be that this line inside the left nav is ours. Copy the entire copy and paste it here, it should be ok and this Now remove it, okay, so what will happen, see here, if everyone is doing something, then something is happening but. Sir, it is not visible, it will be visible, apply transition here, it will be visible, okay, let's do one thing. Let's remove the overflow before adding the transition and then you will get the idea. Look at this, nothing is happening oh my God what happened? no somet

hing is wrong What if I'm taking okay direct here but it's okay We can put h1 here or if you want, give a name, okay, I I don't want anything to go wrong going forward so please add a class here. Then add an ID, okay, I am adding ID in the name of these people only, okay We are giving only the first one to the upper one because we are selecting the upper one only. There will be no need to do so much directly, if anyone was doing this work also. There was no problem, as per your wish, I follow my

own rules, it's ok, dot. No hashtag because we created the ID it will work the same there is no difference but this See, something like this is happening, even if I put overflow hidden, it will give us proper The animation was visible, it is not visible, this up and down is happening a little bit, it is okay then that. To give a proper animation, we will add here the transition All Cubic Buzzer. You can select any of these, whichever you like, but this is the one. Smooth bit we get to see the a

nimation so we put this okay anyway If we are not able to see then why is it because we have placed it on the left nape. And what we're moving is moving h1 up so to move h1 So what do we have to put here, inside the dot left nav, above our h1? If they want to put animation then we will remove it from here and put it on this because our h1 is moving. It is our left nave, now look at this, look at this number one, it is wonderful, ok, very lovely. Now you are getting to see a little animation that

whenever we hover over it but this cursor If it is coming then it means as the text is visible here, so we want it to be like this. If he doesn't come then what do we give here? Cursor pointer. Wow, I said and he listened. Lia, now look at this, it's okay, something like this is taking more time, friend, hurry up. Where are you going, you have to check your mail in the morning, hurry up, okay now, so be a little early. Now we have to do the same work here, so it's okay, let's do one thing here.

So let's put dot right nap here and after this will it become the same aha It's a bit much, let's keep it separately because we want to keep its font size small. Because of this, I made it separate, but never mind, I have a task inside the right nav. I will do the whole thing by copying this and only changing the things will be done here. Like the font size I want is 0.8 and smaller than db and this height which is Will reduce ff, th is visible in f, one number is ok, th is not visible in th, n

ow with this Whatever we have given here, we could have just copied it or given it here, but We will have to change the margin top, okay, no problem, here also whatever is the ID and Let's write the contact. Ok, come copy this and we will make changes below. okay here Right Right, we have taken A3 or A2, something like this, okay And here also we have written inside here Nav Contact Contact Okay now this margin top which is we will not take that much if With this much, he will run away, look, it

is quite high, as per our height. You will take the same amount as you took, you will take around 3 minus then see this proper animation. We are getting to see, okay, so this thing is also sorted out, that means both of us have become Sir, this color is looking like this, so what is the big deal with the color, take the background color. Remove it from here, first of all remove one and where did one go? Where are you bro? Just remove it completely from the two, don't keep it, do we remove it fr

om here too? Let's remove this too, let's remove this too, okay it's removed, everything looks perfect. A number of cool animations are visible, but whatever this is, it has some effects, it's okay. The effect is that it is changing its color according to the background, if you pay attention Okay, so how will we make this thing? Now let's look at it first. Now let's do the background, but before that we will do one thing, we will position it. Let's do absolute. Okay, sorry. Let 's fix the positi

on. Why did we do this? Because this position will be fixed, if you look here, this new is the same as the new somewhere. If he is not going then we will also keep it the same so that Nav does not go anywhere else it has to remain the same, okay? This is why we have fixed it. If you want, you can also zero it from the top where you I have to keep it, it's okay, the work is done, now let's go. Let's close the bottom, we will see the remaining things later, now here But let's create part one. Okay

, here too we will create dot part one and width. We set it to 100% and the height is 100 % which is fine. The background color is 00. Okay, so we made it black something like this. Given that it is not visible but black has become black then it is ok, there is no problem right now. It will be seen here that we will make another one inside part one, what will be made inside part one. Can Hain dot content part is ok, we created this and name it as part one here. Okay, we have created content part

one, now whatever things we have to create inside it, we can They will create ok now why did we do this now reason to you You will know the dot content part We gave one width 100% but we will increase its width, the height is 100 for now. BS gave background color red or Ray 's purple is ok, right now we see something like this We want to increase it further, so we will do things as they are now, see in what ways. things are going well Now whatever is there, we have to do one thing, if we look a

t it carefully, here Look how many divs are there, one is visible on the left, one is visible in the center and one is visible here. And one here means total is five, one doti cha pa means five in section we have it It is okay to divide and before that we have to do one more thing that is okay. If it is divided into five parts then by what name can we divide it? This content part is fine, our content will remain in it like this brand bit All these things scroll down, all these things stay within

this content but if If we look at the div at the back, what is happening is that it is rotating, it is okay in a way. How will we perform that rotation? So for that we will create rotate deep here. So that we can rotate it later and it does not happen that we rotate the whole dip. For this reason, we will create a separate part and keep it, okay, rotate the row. Let's make one in the name of Deep. Okay, we want to make five, so we will make five but first. Let's make one and copy paste it. Okay

, so we made it deep, now it can't be seen. Here is the region, let's see the region later, rotate D first, let's make it, rotate D, okay. We have given the width, we will increase its width to 200. But what is the height? That something between 150 Background color 00 ok, something is visible, yes it is visible, no problem now One more thing that has to be done in this is to create it in Dot Row Diva, okay Roddy Witt will give it according to the calculation because if we want to make pa then 1

00 Divide Ba is as big as 200. According to that, 100% divided by Pa means that The one of 200 is taking 100% of the parent's income of 200. Meaning, it is at 200, okay, we divide 200 by Pa, whatever amount we get, the background. You can make the color as Ella Blue and the height along with it is 100% ok. Check what is coming, so much is coming, why is it coming because whatever it is, there is more. Okay here, so taking it accordingly, if we create this same thing here Make the content part on

e a display flex and align the item to the center and then If you justify the content along with the center then see what will happen, this part has gone here And the rest of the parts are here and there, that means it fits perfectly in this but it is fine. when I sat down Yes to this, so this is what it is now, this part is coming in the center, this part is fine, scroll bar. All this is coming and will be removed so don't worry because right now we have made only one and There are still remain

ing things left so if we make everything then those things will be done ok but that First we will give him the same property, okay now by giving him the same property, he will The problem is that what we are getting to see here is something like this That it is coming in the center and is coming very thin, okay how to sort this thing out If we do it then we will put it here So okay, first of all let's do one thing, we have kept the height at 200 and here We also make it equal to the amount of Rs

100 that has been given to the parent, meaning that from here We are taking the height of 200 now, why are we doing this, what is the reason behind this? The reason behind this is that if we look here, it is scrolling a lot. It means that when we are scrolling from here to here, this is what is happening but actually This is 100% only, so we will not take that much, we will take 100 VA and here too, it is everywhere. Let's keep it at 100. Here, what are we doing to the rotation depth? Give it a

height of 200. Why are we doing this, the reason is that when we scroll down to our first deep Look, it's fixed, it's okay from here to here, so what will we do when it If you scroll, it should be fixed from where to where and that means from here to here. By fixing it till then and after that whenever whatever thing of ours is overflowing What will we do, we will hide it, you will understand, just look ahead, you will understand, ok first of all So what did we do with this also, here we conver

ted it into 200 words, if it was at 200 then it was converted into 200. Vad is done ok now whatever is after this we have just created one div we want After this, if you create more, flex the display here and align the items. Center and Justify Content are also done. If Center is ok then you will find it in Center now. You can see it coming, but there is no tension, it will go to the left if you just push it. It's okay if you copy paste it and this [music] Rowan wanted five, here are five, okay,

so look at the whole of this scroll of ours. There is some gap coming, no problem, it will be visible now, okay, give a gap here. We give 3 rods of gap, it's okay, look at this, the gap in the middle is visible like this. 's coming and this part is in our center right now, meaning one, two, three, four and one is ours. Five is fine on the left side and what do we have to do now, we have only four inside it. Have we made it? 1 2 3 4 No Yes Okay, so what we have to do now is that its If the total

is to be divided first and images are to be placed inside it, then it is ok to do so. Let us see how many total images we have to put in the road also, okay so if I If I scroll through it, one, two, three and below one, four means four images which are in one. If we are there, then for the image also we create an image deep for it, okay not the disk. Bro image deep ok dot image deep all width and height same We will keep the disk itself being written to and fit the image inside it. First of all

, we would have designed the dot image div di di div, it is ok, we would have given the width. We give it 100% and height as per our calculation and divide by 100%. 4 is ok or only 25 will come, no problem, now if you have given then you have given the background. Color, if you want to give something for now, then give me this water marinade, okay now? We give a little gap in this also, we will not give a gap in this for now, let's see for now. What is coming, why can't it be seen because it is

in first di, okay if If we copy it and place it somewhere in the third place, where will it be visible? Gone, disappeared, ok, come Why did this happen? Because we did something wrong. 100% width inside the image diff. Dia and height are given by doing a work 20 5 wad b. H right click and inspect and check where the mistake is happening then rotate Div's Image div where miss is gun ok ok you have understood the problem What's coming is that this is just above here because we have this part cente

r. This is why we can't see this justified content sorry align item which Centered because we can't see it, so let's start it, okay? and now it is visible What Cry content is also available here Look at the start, it is actually visible here. If it is coming then we could not see it because of the part, we can keep it in the center. Okay, so the problem was this, did you understand how much we gave for 25 WDH? Bro, according to the calculation, 100% divided by 4, okay, now it's okay. Actually th

e problem was that when we kept this aligned item center, meaning that in this We had kept it so that the center part was showing, the upper part was disappearing. So for this reason it is understandable, so far we have been given only two, in the rest If we give, then we will do one thing, here we will also add the gap property. Let's take row Divn, make it display flex and flex direction and make it a column. Because top to bottom we want things and after that add gap property 3 word's 3 BH's

okay, it's not visible right now, no problem, if you start messing now. One, two, three variables will start appearing and whatever is there, four, four, one, two, three have to be added. Four is fine and look inside this one, two, three, four, now you can see something like this in everything. In this way, I want to fold their border, so start the border from here. Let's fold border radius 10 pixels, okay look at the corner which is folded. It's done, now what you can do is to insert all the im

ages in it. Okay, put the images that we had placed here inside all the assets. Let's turn on the dot sl asset inside images one ok It will take some time, so let me do one thing and fast forward it because We are posting all images only Okay, so first of all, now we have put all the images inside it. Given and it is visible some images but these do not fit the images then how to fit the images Will come here first and inside the image div which is our dot ig div What will we say together by tar

geting all the images inside? Make the width 100%. Take yours, it's fine, look at the width, I did it 100%, all of them got fitted and one thing is this. Do this, we will hide the overflow of this div, okay overflow hidden, so whatever now As we are going out, the fold that we had done in the corner is now visible. Okay, let's do one thing, they close everything a little because inside this We have filled only and only images, so there is no problem, direct this, this and this. Here and here, it

's okay and there is one, right? Five TVs, we had made this, now along with this Another one, we work in this and give the ID along with it, the reason for why we will give the ID. Now you will understand that inside the row dip we have given the ID by doing something like this, it is okay. The use of this ID is now, let me show you, look like we are scrolling. If you look carefully, one D is going up and then Y is going up above that, so it means If we have to use Margin Top to give this thing,

then for that we will create different IDs. Only if we give it, we will be able to use it, we can also give classes, no problem, ok, ID. we had given and here Okay, we have given this thing, now see something like this is coming and it will do one thing. You could have removed the background color from here, which is Elise Blue, and also this color from here, which There is no use of color, there is no point in keeping it, otherwise it is visible, okay now what do we do? If you want the first o

ne, then it is okay, but what should you do with the second one? up a bit so that it looks like this Okay, so what do we do to make it look like this Can it? It doesn't look too big height wise I want height wise To reduce it a little, we will reduce it here. can 150 200 only is ok ok so the first one which is D we They target him here Roadie and well Ro Deavan has to do something No, we will do it in two, okay, we will start giving top margin little by little. If it is fine on top my pa then it

will go up on -5, it is not visible because the second one If it is here then it is not visible but it is ok it will come in three and the hashtag is here sorry Now it is visible that it has gone up a little, in the same way we will copy it and paste it here. Let's make the three a little higher, okay if it's a five, let's make it eight. It went up a little bit more and can do more and can do more right up at 9 This is what we are after Let's raise four to four a little bit more here. Would do

one job for a salary, keep it at 8 and whatever it is 12 Okay, this one went up next, which after that we have row five and that one and can up a little Okay, if we look here, we can see it going up. Okay, so something like this. Here we are seeing the effect, this is a little above this, then this is a little above this, so like that We did this only because the quality of the different and picture I don't know is so low. Why is it coming? I think I downloaded another one with lower picture qua

lity. Had to do more but it's ok, I understand the meaning from the images and now this is what it is. Let's watch a little scene of Brand Beat Wala, why is this happening and here is this Why is it coming, so let's do this first, then the animation part. Let's go over how to animate it on the scroll. Okay, so this is the part that needs to be made. So what do we have to do for this, we have applied one very simple thing which is we They come here, where are we? Nav is gone, here is Nav, okay, s

o in Nav we will put a property like this Is mix blend mode difference ok? We set property one and because of this What happened here, the region has stopped appearing, the region is this Guru's a little bit, come down and There is an h2 here and we also gave an h1, where has the h1 gone? Here it is, both of them are fine. Set the color color # ffff means set white color sh f ff and here also Which is its color also? #FF Okay, so now it's just that. Opposite color starts appearing, okay whatever

ours will come like here look here If black is coming then instead of black it starts appearing white then look like this It means that here also this image is there, our image is another one, there this one is there. The image is probably posted here, okay, whatever is there, what is happening accordingly? Changing the color like look here if I do this a little bit, this Look what is visible in black is visible in white but as soon as it turns into white Look at this, it is starting to look bl

ack. Look carefully at the contact, whatever it is. Ours is showing the opposite color. Okay, so the difference is due to this. How I did Simple Nav, Hume Pura Ko Kya Bol Diya Mix Blend Mode Difference Meaning, you just show its opposite color, okay, and what can we do with the color of the one we have? Given h1 and whatever we did with h2, what did we do with it, so it became white? According to the difference the color is making, if you put some other color here Let's suppose we keep raid here

, after that see the difference according to raid. Will show ok, so we wanted to see it according to white, so see it according to white. What we are getting here is that if you keep it according to the raid, then whatever we get according to the raid means whatever. The background color will differ depending on the color you are placing. Okay, so why don't we keep it simple here? If the white color is fine then it is visible as per the white, this is done but funt There seems to be a little iss

ue with me, it's fine, we also import the fonts here. The font is already kept, but if you have not imported it, then the font size is fine, so here it is. Let's keep our name Fant One, no problem, we have only one Fant for now. If you want to use it then here is the dot sl asset. Okay, now I will use it as a function. I do it right here in the universal selector and I say that the funt family is for everyone. What is the first one, okay, this first one will be applicable for everyone, okay but

one. The thing I think is the problem here is that there is a slight issue of font weight if I reduce Pau is 400, it is fine, so whatever it is, it has been reduced accordingly, yes, it is fine and I will reduce this also, so let's do the work, give it more, what may not be needed? hai dekh [music] I have given it the same way almost everywhere. Okay, so let's do one thing in the universal selector above. Would have given the pot no less than this Now okay, we are getting to see what is there ev

erywhere, so this is the part. This one is also completed, now let's quickly move on to the animation part. If you understand what it is and how it will be made, okay then first of all this We will work on the rotate one and def, after that we will see the brand beat that is coming. Okay, so one thing you have to do to rotate is that first of all if you are here Look, if we scroll through this, what is happening is that the diff is getting smaller, meaning. Here we can use the scale property to

show that the dip increases as we scroll. Which div will be smaller anyway? So here we created the rotated div. Where did this rotate dip go? Okay, let's do one thing on this, let's set the scale property. The scale is by default, we will keep it one. If you look here, it is one. Any changes? It will not be visible but as soon as we do 0.5 here, see it becomes smaller. It means it should be small, it is visible quite small, so 0.8 is ok, this much is visible. It will be visible according to how

much you make it smaller, so we will do one thing for now. Let's keep one and now what do we want to do with the things, all the things on the scroll If we want to animate then what should we use for that? Okay, let's go. But before that let us put what Lenis has, ok Lenis as it is. Come on let 's see CDN here is okay let's just paste this above the body okay and this is what For normal setup we will use G sep is also for scroll trigger here. Look, you can do whatever you want, normally if you w

ant to keep the scroll, keep it. This is for sep scroll trigger ok we want to keep it normal everywhere so this Let's copy it, okay, script file is already created, paste it here and come under it ok you can see something now Why is it not visible because we did not link the script? ok then we will also put the script file here link is some mistake If script src and script dj are ok then we have done this, see the link now. Now we are getting a scroll to see, okay but we have to use it. Let's go

to gsup, jeep cdn is ok, let's search directly on gsup. Brother in CDA ji sep CDN we have to go to the first website and here the CDN Copy this, come here, just paste what is after this here, okay and then Just come down here and paste the scroll trigger one just below it, meaning First of all, whom have we put in place? Here, we have kept Lenis in place, see, okay. Installed Lenis, then we installed G-Sep's CDN and then G-Sep's plugin. We also placed the scroll trigger here and at the end, wha

t is our file? Where are all the scripts like these placed on the body? Okay, so this thing is there. Now for the animation we have to make, we move quickly, so what can we do for that? We will do it here, we will have to create a timeline already, it is already ready. No need to make it ok so let's make it here lol no sorry timeline is fine Timeline and in this we will create the timeline of the scroll trigger so jeep dot Timeline: Now is this a timeline? I have made many videos for this, broth

er. Please please please, if you want to see then you can understand by watching more videos. Why not explain that thing here because this project is going on Brother, it's okay, so I won't be able to explain things that deep in the project, just how is it happening? I will be able to explain this thing, okay, what are the things being used? Yes, if you want. If you want to learn how this thing is being created, I have already made many videos. On top of this, it's okay, you watch some other vid

eo, you will understand it, but first watch this, okay Now what we have to do inside the scroll trigger is to trigger what to trigger. First of all whatever section you have, you have to start it and after that Whatever is our end will also remain and whatever is after that is here. Let's turn on the marker, okay let's go, the scrub is also coming, now you will ask brother, how did it come? It is there in yours but it is not there in ours, so we have installed AI, it is okay magic which They say

that magic has to be done quickly, so brother, it has to be done, okay, that's it. Neither we nor you have time to write everything but it is okay for recommendations. Keep going accordingly, things happen, so for now it is showing that it is closed. If you have forgotten to do it then it is not that we have stopped, what have you stopped? It is absolutely right. If it is not wrong, then for now we will give one more thing here. If you give me scrub then what will you give? Come on, what scroll

is visible here? Look, the scroll is visible at the start top, right at the top, so we can call it They bring it to the center at 50 dollars, not at 50 dollars and that too at 50 is fine. We will work by making it pin true, meaning that this section will remain here only. The dip will not scroll completely. The section that is visible will be removed right here. It will remain in the center only it will go up make us like this If yes, then for this you have to give this thing, okay it is comple

tely complete in the center and It is okay to just increase the end and increase it to 200 as much as you want. It will start from here and the end has not happened yet, okay, it is good, if the end has not happened then At 200 or 100% but why did we write section one here, the trigger has just happened. no hi ok so dot part here Van Kyara Part One Hi Hai Yes Part One Hai Hum Part One Hi Par Hai Want to keep ok but let's do one more thing here 150 for now 150 Keep it so that the end matches, thi

s one is fine We are doing end match, nothing else, yes, one more property, we had to put what pin? True, ok, we have made the pin true, now look at this part, it is not moving, there is animation. The butt is not moving, it is not being animated, we have not applied any animation, but this Look, this deep scroll is not happening and we need something similar so that even the depth doesn't scroll. Yes, now the things are changing, in what way, so come here, tl2, where is it okay? What should the

animation be on? First of all tell me, brother, then tell this. We have created rotate div, we have to do it on top of rotate div. Okay, so what should we do on rotate div? If you want to do that then tell me if you want to rotate it, simple brother, rotate it by how much. Tell me what you want to do - 15. What we wrote -1, does it mean that he is already in the degree? He calculates, okay, now see what is happening as he is doing it. If something like this is rotating then it is okay then this

thing is okay it is rotating but this At the same time we also had to scale, okay the scale is 0.8, okay, so now see this. The scale is also getting smaller. But brother, the thing that was going up is not that thing. If everything is going well then only that has to be done, everything else is going well so we can do that too. Come here, if you have made a time line then you can also use the timeline, then here If I had done one thing, I would have given the same name to everyone, just like we

did here, now even here if I I will give, what will happen if that thing runs in the same time, then there is no way to make a time line. I mean, brother, it was absolutely okay, now look, what do we want here, which is our D? One tha and Ro D one tha okay shag so we gave different IDs so we can tell him Margin top can be given from here, Roadie one can now be raised, take it to the very top, brother, on the hive. If you offer it then margin top margin top is ok, how much is margin top? Give it

to the forest for 5 rupees, it's okay. No need, no, anyway, let's give it to you, ok after Okay, let's make the margin top here at 8 but keep giving everyone else in the minus. Okay, we will give you five more than what we have already given, so here But you keep increasing, come and do this, it's okay, minus this. 10 ok and copy whatever is after this and 4 minus 1 I'm just giving the odds of three three You can keep the rest as per your choice, you can keep more or less. Ho mine 15 ok you che

ck if anything happens then refresh once more nothing What is going up? Why is it not going up? Why is it not going? We have written a mistake Roadie. roadie roadie what tl write us on y I will have to write I think, that's why I am not giving it, okay see. tete okay wey this happen with As has given the same amount to Ro F. Has given the same amount to Ro To. Do one thing and see its value increased by 15 20 25 30 Yes, a little bit, it seems that it is going, but it is not going completely, if

I keep it If I turn it off then look no one is up for now Look here, you will understand. Okay, look at this area which is a blank area. Okay. No one has gone up yet, but as soon as I turn it on, it is visible, meaning that It's working fine, it 's fine if I refresh it, it's slow It is going slowly but you will have to give a little more value only then At best things will be done at minus 20 instead of minus 15. give 25 35 40 ok This one is going a little low 25 But it's okay but I feel like so

mething is missing, I can only see one, two, three, four, four. where is a d Gaya Ver Is One Div Con Line Item Center Justify Content Center One of our divs is not coming from the left side, everything else is fine. Okay, so what is there now, if you look carefully, this part of ours is going up. Okay, we will take it down first because it is going up too high. So I think this is happening because of the center we have set up here. Where is the start in rotate D? It's ok in this. Whatever is our

center is fine in content part one, there is no problem, just whatever we have. One thing here is that the margin we have given is in minus, okay so this Whatever is there, we will do it in plus, so here we will do it in reverse, 15 is okay and here we Let's do 12 and let's do it here 8 And here let's do F. Okay, we just did the opposite and Refresh once and look at this, okay this is coming here and this means a lot Coming down guys, we didn't have to go down too much, let's keep it at 10 and

here But digest it here at 10, ok Okay, it will work, so now the thing is visible like this and when you are scrolling But here that thing is coming to an end, it is okay for us but it is not happening here, so we If it is placed too high then we will reduce it a little, this is fine here. We made it too high, now let's reduce it to 15 more here We give around 18, 22 and 25, meaning we are increasing it very slightly, not much, it is okay. Now look, the butt looks quite smooth, but it is still e

nding here, so now whatever thing How do we hide the overflow that is part one of this first because when our If it's coming to an end then finish it Part One Part One Part One Where gone here ok let's do this overflow hidden overflow hidden ok Still there is a lot going on here, the debris is very minor and we will have to take it with us. We took a little too much and came here 10 12 Friends, if you have to reduce 15 more then you will have to set these values ​​because without that Otherwise,

we reduce the value further here, why is it doing three pa three pa? The same three pa and dhaya who speak like this are ok. Now it's okay, let's go, now it's almost right, just this third one. Looking a little deep means the fifth one will get it right By the way, even if we do zero here, the work should be done because our margin is already there. It's great, it's fine now, it's feeling lighter now. A little bit is going up, just not going much, very minor, okay, so what it is now. This thing

is fine but our Neff bar has disappeared, where is the bar? The bar is actually there but because of that we placed it there and it is not visible. Naf, you will have to give the root index. Here it is okay, if you don't give the root index, then that. It will start appearing, look, it is visible, now it is true, this thing has happened and it is visible. That you are not going to go up and you can do it right like these values ​​that we have You can reduce these values ​​significantly here. Th

is is okay, so F, whatever is here, if you make it even at 3, make it 0. But do this, okay, this was right and this - 10, but see some changes are happening. Now it seems that there is more scrolling, this one is deeper, look more scrolling. This one is happening a little less, let's do a little more of this one. and five this Let's leave Might-5 only, ok it's happening now That's right, now this is also seen scrolling, this is also seen scrolling and Even though it is ending here, we can see it

. Okay, so this part is done quickly. Let's go, one more part of ours is left, which part is this when it is scrolled down? This one is coming after us, how to bring it is very easy in part one. We will create the content rotate now, okay now there will be an overlay in it. We will create a div, ok overlay div, ok inside the overlay we will write a div in which it is written brand bit brand bit Okay now let's create a little overlay here overlay overlay si named overlay did we name overlay div N

o, it's okay, Vit is 100% and height is whatever, we do that. Give 100% height to 100% or middle and one thing we will do is check first. That's how much we have given to the content, okay it's 100, that's right, the background color is here. Background color 00 Something is visible Something is not visible Why is it not visible Because it is below this and we have kept the position 'What do they say' overflow, not because of this. If it is visible then we make its position absolute. Okay, make

its position absolute. This is just. Came over it, we needed something right here, the back part doesn't mean right now, the butt is moving. Believe it or not, that's it, now it has one more thing to do, the display flex. align items align By changing the item center and the justified content along with its center and color, we If you do 'shag ff' then it will start appearing which is written inside it, this brand bit and Let's make it a little bigger. Let 's increase the font size from here. Ad

d 5 is fine. This is enough, so now we write down this thing and when it should come to us. What is the by default of h1 inside the first overflow deep? Opacity is zero, ok. If it is there then it has become zero and is not visible, at the same time the butt will not be visible and along with this Whatever we will do here, will we change the color ship, when will it be ok here? Can we add after? Let's do it and copied it here. Paste it and put the dot over here inside the dip. We have to give it

through opacity . One but here we have to give Hvp okay and we will make another just copy of this and here The one who will paste it and the one who will change the color of the overlay here, okay background color and background color what is here This is ok, let's change it a little, don't make it completely black yet, let it be visible a little. If you want, then okay, let's keep this much and we will copy this color code, brother, please copy. Copy and paste it here. Okay, actually it's in

double inverted commas. Okay, so let's see what's happening, let's refresh and Let's start, sorry here, which gives us color by default. You will have to make it transparent, okay yes, what is there by default is complete. It has become completely transparent and now when we start it, see it slowly. is coming and along with that we get to see that black one here too Something similar was happening here, look, something similar is happening here too, then this came to us. The text and then it is

gradually turning black but it takes a lot of time. It is happening quickly in our case so there is no problem anyway it is happening quickly If yes, then you can increase the timing by doing one task or setting some delay for it. Delay is ok, delay how much to do 0p One is ok, I want to scroll through it for a while and then come here and then Cause this thing is happening 0.2 ok now right This is very cute, so now one more thing we will do here which is if we make it 200 Well then Okay, now th

e scrolling time has increased, because of what, it has increased, because of this, okay? Yes, the more you pay at the end, the more time it will take to go up. It's okay. According to you, what you were seeing normally was that it was taking more time, go above. I was coming just then, we did the same thing, nothing else, just to take more time here. This is given to this, okay this is our brand but this is the background that has come so much But now I have to stop, next to this we have to cre

ate one more thing. It is visible friends, look carefully here, okay the scroll down thing is visible here. Now how will this thing be made, let's make it quickly, why leave it, friend? When you are working so hard then a little more effort is quite easy, let's make it within this. Let's create it inside the overlay itself. Okay, so let's name it scrolling. It is right by the name of scroll down and inside the scroll down we have an h1 or h3 which Also take it is ok inside which it is written sc

roll down Scroll down ok look it is quite easy it is fun to make ok so inside this Which one and ours is scrolling, we will write scroll, okay on scroll one. Parent will take and there is one which if you look carefully when you are scrolling then this white which is moving forward from here, so what will we do for this, there is another inside this Scroll, let's take it okay and give it the name scrolling and scrolling meaning. Parent, we took it, okay, come here, scroll down, okay, scroll down

, we took it. Made and what to do with it Position absolute absolute and bottom which is a task First we give 100% from top but if we give 100% it will go a long way. Two from the bottom is ok, we have given 0 from the bottom and the background color is something like that. No, create background color display flex, display flex flex direction Low column flexus direction column then what should we justify here? Content center and one property and will add color sh ffff ok see what you It is comin

g so big, it is ok, we have to make it smaller, so first of all So we will have to do dot scroll down which is our A3, we targeted it and Its punt size is kept at 0.8 wad, okay so it has become quite small, it is visible and this is from the bottom. We put it on G and also give absolute position, so for this, first of all we have to overlay it. What will have to be made, the position of the overall deep is relative, so that according to this, this thing Okay, this thing is done, next I will not

give it at 0, here I will give it at 10, okay That's 10 more, let 's put it right now, below this we have one. If you want to make one with scrolling then come let's make a scroll name for scrolling. That's fine and let's set its width, width is something 5 bundles and height is whatever it is. Keeping the hatch of BH will be too much, let's see by giving the background color, ffff ok. If it looks white then we will give it in pixels, pixel to pixel, okay, a thin one. To see this line, scroll do

wn and convert these 5 words to 10 words. It will be quite long, 8 wads will give good runs, ok no problem but this thing is starting. If not coming from then display flex flex direction column justify content If you don't center the item then you will have to center it, then it will come in the center, okay now? If we have to give a little gap in between then we add the gap from here and also give a gap of 2v. It's great, it's great, it's okay, but it's a little off, let's do six. ok border rad

ius give border radius 50 Pixel is fine, its just the corner which needs to be folded, now which gives us the fill inside it. If it should be seen happening then see how the thing will be seen, okay we have written it inside the scroll. Scrolling was created inside the scroll page, it is fine now, we will use it for scrolling. And we will give the same property, it is okay which was given here and it is okay and do this Make overflow hidden. Well, it is not necessary. If you don't do it then the

re is no problem, for now. Remove it, okay now whatever color it is, turn it down a bit. means something And if you remove its width for now, you will get to see something like this. Refresh yourself brother, what's the matter, why are you glowing? Okay, now it looks something like this, I want it to look like this when Also when we scroll, it starts filling, so what will we do for that if I I keep this on and for the time being, if I start giving width and then I If you give a let's proposal th

en see how much tweet is coming, this much is coming if I give a tweet. How much is coming, so much is coming, it means if we increase the width then that thing Ours will continue to grow, so let's do one thing, let's keep it at zero for now and we What will we do with it while we are scrolling inside it? We will increase the width. Okay, so who do we have to take here? Scrolling is okay. If we want to increase the width of scrolling, then what will we keep here? Whatever amount is decided here,

you can also enter 100%, that is your parent's money. Will take 100%. If there is 0 word above then six will be taken. Is there any problem? No, it is ok. Now scroll a little and see this thing is visible on scrolling, scroll down. This one seems to be filled but this one seems much bigger to me. The part is ok. Keep it as 0.7 or 0.6. Now it is ok. The gap should also be a little more. It's gone now, it's great, okay, look how much it is now Our scroll is not done yet, if anything is scrolled t

hen it will be the same when we scroll it. When scroll down is started then look at the filling which is started in this manner. What will happen to us when we scroll down completely? Okay, so this We can create this method, rest when the work is finished, we will create this marker. Is off ok? If we turn off the marker then our marker will be removed, so this is our We have created the first page, now you tell us how you like it and are you You must have learned something new in it, like this o

ne, I think you must have learned something new, it's okay. This part is done, this part is done, all these things you must have learned, okay so this is what Tell me the things you learned, how you liked it and what's next in the next part. We will grow in this, it is quite easy, most of the time, according to me, it is the toughest part. This was the rest of this part for you, we have already seen the previous one. If you haven't seen it yet then go watch the video in which we told you how. If

we want to make this then we will make the same things, there is no problem after this. Things are going to be quite easy, this one is ok, so this will also be quite easy according to me, ok The remaining things are there, go and see them once, then you will understand this one with curves. This is what we are seeing next, meaning we will see the rest in the video, brother. Thank you very much for waiting so long. Okay and I hope you like it. You must have liked the video, okay you must have le

arned a lot in this thing, okay so let's go Create this quickly, the next video is coming very soon, that means After this, we will bring this part very soon. Show me some love brother, just like you showed love in the last video. You also hope that you will show a lot of love to this video and make things Also share with your friends who really want to learn all these projects. You share with them, see you in the next video, till then take care. Keep it up and yes, there should be a good respon

se to this video, only then we We will be able to grow, ok, there is no problem, let's meet in the next video then. Take care till Tata bye bye h