React and Next JS - Scroll Animations Based Project (Framer Motion)

hello everyone in today's video we're going to be creating some screw animations using frame emotion so this is the project we're going to be creating so we have this nice server effect okay and now we also have a parallax scroll as you can see here okay and uh we have some horizontal scroll animations on these cards we also have this review animation okay and the image is going to move away from the screen as we keep scrolling down okay as you can see this horizontal scroll this is coming from a different direction and this one is also there this one is coming from a different direction as well okay and we also have some nice text animation the color is Anime and animated the opacity is also being animated as you can see there's two different colors here okay just going to blend in between the colors the animation and also down here we have the video section which is also animated you can you know play the video if you want to okay uh yeah uh you can keep scrolling down here we have this section here there's a nice Parallax node Parallax a nice half effect 3D have effect okay and uh we can keep scrolling down there's more text animations okay yeah that's uh basically it for this project it's just mainly scroll animations you know how to do scroll animations and stuff and uh if you are new to this Channel please don't forget to like comment subscribe before you see more videos like this and yeah I'll see you in the video alright so I've already created my project and I've also added the images that we're going to be using in the public folder I've also removed all of the stuff that was in the page.tsx okay so as you can see now in the browser we have nothing so there's nothing in our project so we're going to start everything from scratch so we're going to be using star components for styling but you can use any styling methods that you want now you can use SAS you can use CSS modules or normal CSS that's entirely up to you um yeah let's start in the app let's create a new folder it's going to be the components folder components and then we're going to start with the header section um so here is this the our header so we're going to start with that um here I'm going to remove this this two inputs here I'm going to derivative of those Imports so we're just going to have the main in the page okay so um let's start with the global I'm just going to define a few variables so Global CSS in here so let's define in the root we're going to Define some variables in here so in this case in this project I'm going to be using only two variables but all of the colors that we're going to be using you can put them in different in variables if you want to change them later let's start by doing a basic page reset so I'm pretty sure you know this by now I just you know getting rid of the margins and the paddings on everything that that's the status selector so that means everything and in the body I'm just going to set a font size in the body a different font size and then a color of the text okay so that's the default color of the text and font size and the background color which is the dark color uh there it is okay so for the buttons and the inputs I'm also going to reset get rid of the borders and outlines okay that's it so now let's create some folders in here I'm going to do button it's going to be a button component and then I'm going to create another folder so this one is going to be let's start with the header hello okay so in the header we're going to create a new file so it's going to be header dot TSX okay so this is going to be a client component so I'm going to say use client okay client and then it's going to be a functional component Okay so now with the header let's go to the here get rid of the main it's going to be a fragment and then we're going to render the header in here era uh there it is okay so now let's save we should have a header there it is our headers there is showing so in the header component we are going to start with let's start with enough okay I've also installed components so if you want to install a command just run npm installs if I go to the package.json just run npm install components and then we're going to use frame motion so npm install frame motion for the animations okay so now uh in the header now let's start with the nerve so here I'm just going to do nav and then we're going to have a div so it's going to be logo okay so we're going to do an image it's going to be next image and then the source is going to be logo okay so here logo we need to import that so we're going to import logo I think [Music] most of this correct path let me double check public it's a PNG let's see if this is a correct path it is a correct path okay so now let's give it a width of 36 36 and then get rid of the height so it should show that's the here's our logo okay so we have the logo you can you know do an H2 here H2 and then you just say logo okay so that's it for the logo now we're going to have UL nav items okay so nav items of items we're going to have Li so you can make this nav item a component but in this case I'm much teaching you how to do this so it's mainly doing uh scroll animations and stuff so but yeah you can make these nav items uh the component okay um I cannot find a hash okay I found it so now we're going to have home okay so we're going to have home uh about Marketplace okay and then I'm gonna paste okay so there it is so we're going to also have a button here this button is going to be reusable so let's go to the button component let's create a button dot TSX okay so button.ts X make sure the sparing spelling is correct TSX it's going to be a client component use client and now we're going to do react functional component and Export so that's the button we are going to render the button in here button okay so make sure you input the button so we have free button it should show somewhere there it is there's a button okay so now what we need to do is style this so we are going to save const header so make sure the spelling is correct header style equal to styled it should be header should be header okay so start your header and my keyboard is weird so it doesn't have a f Keys like F1 F2 so I have to hold two keys to do that so we need to import Star components up here so import styles from Star components so we will take this header style and then replace the outer div that's our header nice now what we need to do in here is just to do the initial header Styles so let's start with the nav nav uh nav okay so nav I don't know what class I've named it so it's called class it doesn't matter anyway if you don't give it a class so that's the only enough we have so we can just do nav so now I'm going to give it a padding a mean height and a border bottom so the bottom bottom is the variable color border we've defined in our in the global there it is and I'm going to display flex and just five space between all of the elements and align items to Center so it's nicely centered okay so we also need to display Flex the logo as well and Center align and give it a gap of our Ram okay like this nice so it's display flex and then the Gap is one ram okay and I'm going to Target the so what we also have is the we need to we did enough enough items okay so nav items I'm gonna copy the class name nav items I'm going to display flex and give it a gap of tool Ram and then I'm going to do an ally Target the LI within the nav items and then I'm just going to give it a transition for the animation transition and then let's do the Harvard when we have a I'm going to give it a color fight and make it scale like 1.1 of the original scale so when I have a scaling nice so yeah it's coming close okay so it's scaling so now uh what we need to do also we need to do the input so as you can see in the original one there's like an input so that's what we need to do okay so here there's a such input in here so we need to put that in okay I'm just looking uh to where I can put the input so I can put here I'm going to say dot input and then here we're just going to your input Tab and then search as a placeholder okay I'm just going to copy this class name we need to style this so before nav items we're going to start the input so for the input I'm thinking let's do Flex 2 to take twice the size of the other space like like here it's taking twice the size of the items here okay so we need to make sure it's 100 width the input itself but in this case I'm just going to put to 55 percent of the flux 2 width so let's inspect this so if we inspect you're going to see the input it has a lot of width okay so in in that case we're going to only give the actual input a width of 55 percent okay so we're going to Target the input Within the input class and give it a width in the background and the Border color okay in the in the background color I mean so there it is it's looking nice let's give it a border and then use the variable that we've used for the Border and then I'm going to start the placeholder replace folder and give it a font weight of 500 there it is okay it's gonna be nice uh let's uh what else do we need here for now let's just tap the button okay so for the button number sequence button styled pattern styles you go to start a button okay I need to hold another key as well to do this okay so we need to also import styled import styled from style components and then I'm just going to copy this and then replace okay so save so now we just need to style this pattern button component let's start so this pattern is going to well let's create an interface for this button okay so let's do interface so button uh let's we can name it button button props because it's going to have props so we're going to have name it's going to be a string and then I'm going to have an icon icon so the icon is going to be optional okay and then background it's going to be optional as well and then I'm going to have a color it's going to optional as well and then a border it's going to be optional as well okay nice now let's save so now in here we're just going to destructure the props okay so now we have our props now what we need to do is uh do the button so let's start with in here I'm gonna do and when I say if we have an icon we display the icon so I'm going to do icon if we have icon we will display the icon and then I'm just going to put the name of the button here let's do the Styles as well so Style so for style I'm going to start with the background color background you can impact on color or it doesn't matter and then color color like that and then we save so now with our button we just need to style this let's give it a padding so padding and the Border radius and the border of two pixels so this border you can also make it a prop if you want to and then let's skew the cursor and display a flex and Center everything okay so there's our button it's coming out nice and then on Hover let's make the color to white okay it's a nice so our button is there but you know we have not we have an error now because the button it is an interface which which is a name name is required by default that's why we have an error here so let's give it a name so for the name of this pattern let's name it connect wallet okay so connect and oops name connect wallet so the name is required so now we don't have an error anymore so the other thing we need is react icons okay so react icons let's copy install react icons okay so it's it's why it's installing react icons let's import the icon that we want from react icons so in this case we need we need fa rocket and Fa wallet from react icons Okay so let's do icon icon we can do f a I think wallet for this one okay that's our icon uh what else let me just double check if that's the correct icon yeah that's the correct one I can okay why is it giving an error oh I could say assignable to type of string wait I'll address it icon oh icon should be a node a react node I um react node so react dot node.react node react node okay perfect so now we shouldn't have that error anymore and when we go back we should have an icon which is not showing uh let's see why our icon is not showing inspect by default we actually need to give this a background color maybe but uh anyway icons not showing but we do have the icon okay we need to install the proper f a uh FFA gotta remember which one is fa hmm I think we need to uh install these icons individually I can't remember how um home oh because we're not running the projects okay so now we should be running the project so now let's refresh this we should be able to see an icon once they finish loading okay it's going to take a while to load anyway let's do something else so now after we have the icon I'm going to set a default background so let's go to the button I'm going to set up a default background on this background okay so the default background I'm going to say equal to I'm going to put our variable color BG that's going to be our default icon color so this is our default okay our button color so it's going to be this background of the website so nice it's really nice otherwise if you don't Define the background this is going to be the color that's going to be there perfect so now we have our button so now let's see what else do we need to do in the input here nothing in the input so uh yeah what we need to do now I think the fonts font family is different so let's do a font uh let's I'm just trying to figure out what font we can do um oh well we can do fun funds later anyway so now let's just focus on the content of the header okay so uh for in the header we're going to do header content after the nav so header content so header content I'm going to do a different font for the header okay so let's import a Google font okay so let's import a Google font up here we're gonna set const Abril so that's the phone I'm going to be using a prefetch face that face yeah that's the font and then we're gonna do this and then here we're just going to say subsets it's going to be Latin just Latin and then we're going to give it a weight of 400. and then to use this we have an error because I think we need to import this oh it's already imported anyway so let's let's use it first so in here uh in the content I'm going to do an H1 okay so let's do put this in a div and then let's do an H1 and then in here we're just going to put a text like this and then I'm going to go to class so for the I want to put the font I'm going to do Style oh no no name of the font and then dot class name okay so save so hmm we still have an error I have no idea why we have an error it should be weight not weights 400 it should be a string as well because we're not doing a lot of Weights so if you want to do weights you can do this I don't know if it is many weights or it is only one weight so I'm just gonna leave it at 400 like this okay get rid of the comma here uh yeah we should have an issue now okay so now it's working we should have the header with the correct font on family okay perfect so now what we need to do is I'm just gonna put a P tag after the header with random text okay so you can you know put any random text that you want here and then I'm going to have buttons buttons container buttons so we want to render buttons uh so make sure you import button okay and then you put whatever colors you want so I'm just going to paste in the button here with the props so this is the background for this button uh we haven't imported this button yet and then paste and then okay so now there's the button this button does not have a border or a background color it's optional so let's save as you can see now we have two buttons the different perfect so now uh we need the image section here so buttons after that uh we have this one this section here and then here we're going to have the image content image content so I'm going to do a div in here the class of image okay and then I'm going to random image okay so I'm going to run an image so I think we've imported this image already from next so save oops self closing so we've imported image from next somewhere here okay import image from next Okay so nice uh we should have this image there it is so it's coming from public so so you can do like this okay because uh stuff comes from the public is by default we can access it like this okay which is uh public and then images so public and then images and then the image name okay so now uh that's that for the image we just need to style this okay so let's copy this header content and a Content nav I'm gonna collapse the nav I'm gonna do header content so for the header content let's start with display flex and give it a gap of 4 Ram okay so there it is this reflex and also we're going to give it a mean height of 90 VH so we're just gonna do 10 VH okay so this can be Min height because the nav should also have a height of 10 VH something like that like this okay so that's why we'll give me the mean height okay so and I'm going to give it a padding so we're gonna do padding I'm gonna do cutting so uh padding top I'm gonna do zero top and then I'm gonna do 10 Ram right and then bottom I'm gonna do five frame and then left I'm gonna do 10 Ram okay like that so it's looking nice okay so we have the I need to collapse this so I don't need to scroll much I'm also going to collapse okay I'm gonna collapse these buttons so we have the header content so this one I'm gonna give it a class I want to save text content you can name it whatever you want so text content I'm gonna collapse and then we have the image content okay so text content I'm going to Target the head Edge one okay H1 I'm just going to give it a font size which is going to be responsive it's a clamp so 2 RAM 5 Freeport width and 5 frame that's the the minimum is 2 RAM the max is 5 Ram so it's going to be responsive so when I try to you know reduce this width it's going to also be responsive okay I'm running a lot of things that's why my browser's a bit laggy because I'm running a lot of things in the background okay so now I'm going to tuck the buttons I'm going to do display Flex on the buttons too okay and then give it a gap so there it is there's a gap now so now for this image so we're gonna do image content and then image content after the text content image content and then we're going to Target the image we're just going to give it a padding and a border which we created the variable for the board already okay so there it is so there's a padding okay so padding of one ram after the padding and then we'll put a border like this okay so the image itself the IMG image we're going to give it about a radius of 8 pixels okay let's save so yeah it looks it's looking nice so now let's work on the this hover effect okay so for the have effect I'm going to create a folder uh let's name this in app let's do utils utils so in here I'm just going to do hover to Js okay so it's going to be a client use client okay so we're going to import react react okay and the other thing that we need to do we need to create a function we need to export this function okay export default function so we're going to name this 3D hover uh you hover 3D okay so we're just going to mess around with the perspective so let me show you what I mean so uh when I go to the original let's try perspective perspective so when we have a we're just going to mess you know with these perspective value okay to make the image like this okay to make this server effect I mean so we're just going to mess with perspective okay so now uh let's go back here so uh we are going to have a ref okay of Whatever item so this is the reference of the item uh for example when I have a domain okay so that's the ref the reference of this domain as you can see they have effects not working anymore but the reference for this offer to work is the main so that's the ref okay and then we need some values so we need the X by default we're just gonna set that to zero uh let's do y we're going to set that to zero as well and then Z we're gonna set that to zero as well okay so I'm going to create a state for coordinates oops I should be inside the function so const codes code for coordinates okay so uh we're setting our state by default as well x value we are setting that to zero Z zero but in this case we don't need a z just need x y okay so for the coordinates and then we're just going to check if we're having the state uh this is a true or false so is hovering it's hovering okay so by default it's going to be false but by the way you you can import your state if you want instead of using react.you State that's entirely up to you anyway we can just get rid of the reactors we can just use state okay so now we're just going to do a mass move so const handle Mouse move okay so here you want to say const and then we're going to say offset so okay let me show you what I mean so let's do COG and then e that's the mouse move event okay so that's for the mass move event we want to see what this event is okay let's do under Mouse move here what we can do is have a 3D uh let's go to where can we use this um [Music] let's go to the header oops however 3D okay there's no Auto Import okay foreign Ty okay let's just make sure the input is is correct uh here we need to just make sure the path is correct should be having have a 3D should be just hover okay so now let's save uh we shouldn't have an error now but what we need to do uh we need to have an event listener for this end of moss move so we don't want to call this here okay so we're going to say react s.use effect okay use effect and then that's where we want to do uh the event listener okay so in this case let's just leave it as an empty array at the moment but we're going to affect this using the ref okay so for now let's let's what uh let's code let's do a event listener so let's do let's do hmm ref cost let's do current coming from ref okay so the ref of the item so the current so for example if the current ref uh oops this is a video I'm playing isn't it I'm gonna get rid of this so current uh okay so the current ref is going to be let's say the header is the the reference so that's going to be our current okay so here we're just going to do current event listener dot add event listener and then Mouse move and then the handle Mouse and the mouse move okay and then we're just going to save this uh let's see so we need to pass the ref in the header yeah the ref so let's create a ref so cost header ref okay so uh we need to input use ref uh use ref okay like that so we have the use ref we just need to make sure it is it is HTML elements actually it should be HTML it should be I think a div element uh do you have elements like that okay and then copy this ref name and then let's do the header so let's pass the reference there and then paste it there okay now let's save so now we should have a ref which is this header the header let's refresh here to see where we're getting errors um why are we still getting errors X and defined okay now let's go back here I'm just gonna comment out comment this out see if we still get an error um there must be we I think we need to put our parameters actually the ref we need to put the ref here because if we don't uh have the ref parameter we actually need to put in here okay so the ref should be oops my keyboard is running out of battery uh yeah I'm gonna cut this I'm gonna put it here I'm gonna do the header ref like this okay now let's save we shouldn't have an error now and to one okay so now let's save so every time I move I move a mouse we are seeing something on the screen so in this case we're going to get a few properties from here from the mouse move okay okay so we just need a few properties so I'm gonna get rid of this I'm also uh gonna get rid of the I mean I'll just lift I'll just leave it here I just named this hero instead hero uh okay I think that's pretty much it I'm gonna oops [Music] bear with me for a second charger okay so now uh we have the ref so now let's continue to work on the hover effects okay so uh we have the mouse move I'm gonna uncomment here and comment I'm Gonna Save okay so we have the mouse move in here uh we're just going to get a few properties so first let's start with the const and then we're going to do offsets offset height and offset width from rafter current the current you know ref which is the hero the header and then we are also going to get client X and Y on the event okay so these properties are coming from the event you showed you saw that on the console okay and then I'm going to do some calculations so X for the X we're going to do client x minus uh the width which we don't have yet okay and then uh we're going to do client y minus height okay so yeah uh for this offset width we're just going to put them in new variables so I'm gonna do with and then for the height I'm Gonna Do height okay so we're just going to get the height and the width of the current item okay and then here we're just getting the position uh of the event the mouse okay the position and then here we're just subtracting the width of the car ref current ref and then the height as well okay and now I'm just going to set the coordinates the state value set coordinates to X and Y all right and then we are going to handle const and the mouse enter so when we you know put the mouse on the on you know when entering the div so here on must enter we're going to set the state to true the hovering State that's basically what we need to do on Mouse enter uh setting the state to True okay and then on my sleeve a mouse Leaf we're just setting this type to false okay and then we won't do the animation anymore so in the easy fact we are going to whatever time the ref updates so we're just going to you know find the use effect okay so we have the current ref and then we have the current or the defend listener and then we have the mouse move and also we need to add the event listener for months enter and also for Mouse leave okay and then here we're just going to do some cleanup we're going to do a return we need to get rid of these event listeners okay and then we get rid of these even listeners okay and uh let's save so now it's a moment of doing the animations so here I'm going to do uh costs I'm gonna do X I'm gonna name change its name to uh x coordinate x coordinate and then the Y to icons which coming from the coordinates the state okay so now um I'm going to do cons X transform transform transform transform this this one is terrible okay so we're just checking uh if we are hovering and then we multiply the x coordinate by X okay so now we do the same thing for the Y and we also do the same so if we don't have X it's just going to be zero and now we also do that for the Z okay Z ah the other company is so terrible okay Z and then we're gonna say const transform transform trans form and then we're just going to do a perspective equal to perspective okay and then we're just going to set the perspective 1000 pixels and then we're going to rotate X okay so for the X it's going to be the let's set that to y transform uh for X transform and then y transform okay and then for the Z it's set to the Z transform okay so now so let's save by the way so this should be the rotate should be in degrees and then the translation should be in pixels okay okay so translate Z pixels and then rotate should be in degrees let's save so we also need to do a transition uh property just in case we might need to make the animation look smoother so if you want to make it look smooth let's do cross transition then let's do I mean let's do based on hovering as well so let's do if it's half ring is hovering and then we set this transition as 2.3 uh okay const so this properties we need to access these properties so we're just going to return these two properties transform and transition okay so what we're going to do uh wait a minute this shouldn't be in the easy effect I didn't realize that I'm inside this effect so it should be outside the use effects okay save so and then we return from this function we're just going to return these properties so we're going to return transform and transition okay so now I think that's it for this however so now we need to go to the header where we need to do the half effect okay so the hero the hero I'm just looking where to do the hover okay so header era uh I'm gonna do cost I'm gonna do hover hero you can name this whatever you want that's entirely up to you go to hover 3D and then we put in the hero which is the ref which is the header that's going to affect our hover animation okay so for the X Direction X I'm gonna do 30. that's our value for x you can increase these values you can experiment and then Z I'm going to do 30 but for the Y I'm going to do minus 40. okay so we need to use this how do we use this well we just need to go to the element which you want to you know do they have effect on so in this case the element which I want to do the half effect it's going to be the image okay image this one when I have this so I'm going to do Style I want to do have a hero dots actually no I wanted to transform transform and then I'm going to do have a hero I have a hero Dodge transform says from by should be transformed anyway uh advanced form let's save this and then let's go back and change it trans form okay I think I need to speed up this video because it's taking a while transform okay uh now as you can see now I'll have effect is now working okay that's good you can you know lower these values we also want to do the other effect on the actual image so as you can see here the image and the Border is different the way it's you know moving okay so we want to do the same thing so for the image we're going to give a slightly different values I'm going to go back oops I'm going to close the hover I'm gonna say duplicate this when I say image oops image cover so for the image I'm going to do 20 for the X and then minus 5 for the Y and then 11 for Z so you can experiment with these values and then we also need a ref for the image okay so uh you can name this ref whatever you want I'm thinking what should I name it or should I name the image okay so actually no no we don't need to give the image a ref we just need to put this property on the image so let's go down class image okay here I'm gonna do Style okay and then we're gonna do transform transform image have a transform okay so now it's a different okay so the border and the actual image it's looking pretty good to me when you leave there's no like half effect you can you know do the half effects in here when you enter like here you can do Transition transition uh you can do the transition with exported okay but I'm not going to do that in here I'll use the transition later okay so yeah uh that's for a header now let's do the lines as you can see there's like lines in the background so there are multiple ways to do this you can use a loop to do the lines but in this case I'm going to I'm thinking what I did to do the lines I'm going to be using I think I'll just use an array okay so the array is going to have shapes of these lines okay like a circle X so yeah it depends uh you know you can use the loop or you can use an array that's entirely up to you so what I'm going to do I'm going to go to let's go let's create a layout okay let's go to the components we need to create a layouts folder or you can you know I'm just gonna do it directly in the app I want to do layout ah we actually have layout here already so in the layout I'm going to we're going to create our custom layout later anyway so for now in here we're going to do lines so in the body so our fun family for the D for this enter in the body for the children is going to be after the lines okay uh children oops I should just children and then we're going to have lines okay save so we have the div of lines so we're just going to create an array so this array is going to give X uh you know a circle X Circle X Circle X so I'm just going to paste the array um let's do it above here my array so like this you can use this in a loop you can do a loop with this but I was just lazy I choose I chose the easy way and then uh we have Circle X Circle X like that and then save that's our array so with the loop if you have like a longer page so a loop will come in handy to do that but in this case it's not the page is not that big so no need for that so what I'm going to do in the lines I'm just going to map I'm just going to do uh touchline okay I'm gonna do line one so in the line one I'm just going to map I'm just going to mark this array okay map through the array whoops okay so the map so we are going to have this shape index shape index and then in here we're just going to return a div the key is going to be the index and then the class name is going to be the shape and then we save okay so we're going to have four lines so we're going to duplicate this one two three three more times so we're going to have line four line two not three and then line two so now we have four lines so I'm just going to collapse so we need to display Flex these lines what I'm going to do we're going to style this right so uh where else can we style this so let's go in the global lines I'm going to set position of absolute top zero width and height 100 on the lines and then I want you to display flex and then justify content space evenly okay and then I'm going to say pointer events to none and then the Z index I'm going to set that to zero okay that's for the lines but we we need to give them you know a background color so we have lines so we have line one line two and line four so I'm I'm gonna select the lines and then Target line one up to four and then I'm gonna give them a width and a Min height of 100 and then the background color of the Border color we should have those lines there they are okay so uh we need to set the Z index uh we need to set the header and sections so let's have section and then we also need to do the header as well okay so it's going to be on top of the lines as you can see now it's looking pretty neat okay so now that's for the lines we need to do the circles now the shapes okay so I'm going to select the shapes class I'm going to select these shapes shapes so for the shapes we're going to do the same position absolute and give it a padding top and bottom 10 RAM and then we're going to set top zero and then translate this on the x minus 50 and then give it a display Flex uh direction to column uh we should refresh but we don't see our shapes yet because we have not created them the shapes already so I'm going to say lines and Target the class name so if I inspect here if I go to lines now let me see if I can find them Airlines so each line it is like this shape okay so I'm going to Target the class names on each individual line so I'm gonna say dot lines lines and then I'm going to Target the circle shape Circle and then I'm just going to style this give the width and height of one ram and give it a border rate is 50 percent and then I'm going to do the X shape X shape I'm going to give width and height of one ram and then I'm just going to do and after pseudo element to you know make two shapes okay so in this case we have the circles let's do the X we just need to do a position absolute and then rotate to make two shapes like an X okay and finally for the lines and then the before like this by the way we don't need to repeat this position absolute and stuff you can you know select the X and circle and put these properties together but you know I'm just lazy okay as you can see now we have these shapes they're looking pretty good okay but uh the shapes are not really centered to what we desire we need to make sure that on the actual line okay um Okay so shapes so shapes should be displayflex justify content space between okay for some reason it's not doing that let's do mean height 100 percent okay let me see why uh lines okay so this should be in a class name called shapes I forgot to include that class so if we go back to the layout so line in there this array should be in shape Steve shapes okay so shapes into that shapes paste cut this shapes okay and paste so now uh this should be able to work okay looks promising Min height Let's Do height okay so the reason why it's not uh really stretching we have a a lot of padding top and bottom so once the website starts to you know go down more it's going to start you know to stretch more okay so that's that's working so now what we're going to do we're going to go to the what section are we so we're going to I don't know I have this text here we're going to go to this scroll section here for that we're going to be creating let me see so we have header we're just going to create a main okay so here we're just going to domain uh we are going to say const Main styled it's going to be a main okay so for the main Style I'm going to copy this um replace here that's the main section we also need to import start components okay don't forget to use client okay we might want to use some hooks in here so we have the main for the main I'm just going to put a few Styles it's not going to be a lot I'm just going to give it a mean height of 100 VH and yeah that's it so now we should be able to scroll as you can see the items are stretching now okay so now uh let's start with um so we need a layout okay for our all of our sections I'm just going to create a section layout in the components folder new file section layout clear.tsx so uh in here we're going to have some children because I'm going to wrap our app with the section layout so that's why we are doing children because we're going to wrap our entire application uh with the section layout so now we're just going to create an interface for this okay let's do interface section layout props we're going to have children it's going to be react dot node and then we're going to have a ref a ref it's going to be ref object HTML development okay and here we just destructed those props and uh now we don't have an error anymore so for this section layout it's just going to have a padding so I don't need to use style components in here so I'll just put a padding top and bottom five frame 10 Ram left and right uh uh [Music] oops Okay so no need for the star components okay so section layout where we're just going to use that to wrap our individual section so section layout here we're going to have a section so uh the our first section is going to be the horizontal scroller okay so let's start with the cards let's do some cards okay let's create a card component card dot TSX so for the card it's going to be use client as usual I think I forgot to do use client somewhere I know if I don't use this uh if I forget to do his client on components let me know I don't know why I forgot to do this client but it's okay it will give you a warning anyway so for the card I'm going to do a functional component let's do each Client First his client okay so I'm just going to uh there's a lot of stuff in the card I'm just going to do a card style for style components I don't want the video to be very long so that's why I have to copy and paste some styles so we're going to import Star components and then the card is going to have a title image okay like that so now I'm going to save this uh we also why am I getting here okay or elements are used so in the card we're going to have the image in the card so we have the image the image okay so that's the image section with the width and height of 100 and then I'm just going to have a P tag that says new in there div ision wait a minute so this should be kind of styled okay so in here I'm going to have a P tag that says new and then the text I'm gonna put the props text okay so now we're distracting the props but we haven't done the props yet so that's why we have an error so so he's saying uh you know we can create an interface for this but I'll just I just didn't care okay so now we are going to what else do we need in here we're going to set the image so make sure you import image from next image image so image make sure import this from next image and then the source we're gonna put that to image and then I'm going to do a style give Style which with uh it's going to have a width of 100 percent guys with 100 percent why am I getting an error let's close the image okay so height 100 with 100 object free cover object position to Center and the Border radius so that's our card let's do this and then I'm going to have an overlay div okay so the overlay is going to be this dark shadow at the bottom of the card okay so now that's our card so we don't have these props yet so in this section layout uh we're going to map through cards okay so in the utils we should have cards I'm just going to paste it so it's just uh I'm importing images and then it's just an array of objects of each individual card it has a title description and an image okay and that's it so we're just going to map through those cards in here and I return a card component okay so we're mapping and then we're going to return a card so make sure you import the card component okay and then I you save yeah what what might be the issue here class name cards so we haven't imported these cards yet so we are mapping through nothing so we need to import cards I think it's default export I think you you choose cards like this should be let me see how I've exported this uh export cost cards okay wow okay so cards section layout are ref uh with Section layout okay let's make this optional okay nice so what else is bothering us so okay let's just do an interface so we don't get this error okay cut props so let's make this uh optional so the title is not optional all right so our warnings should go away here so now we do name [Music] card dot name leave this name as title foreign that's our name this title and then we do the same thing for other props all right so now that's our card image so card dot image yep okay uh Source image static image data is understandable to I just you know what just I just get rid of the error anyway so we should have the images that are there okay so it seems like our shapes on top of the image so we need to fix that section layout [Music] position layout it should be a section okay so the Z index it's on top now so now we just need to start this card I'm just going to go faster on this one so card I'm just going to let's let's start with the positioned relative give it a border transition and then I'm going to Target the new text and then give it a position to Absolute so the new text is going to be this small text up here okay like that uh we'll set the Z index to five and give it a padding and then I'm going to Target the text and then there's going to be an H3 inside the text okay and uh save so we should have the images that they are okay so now uh overlay so there's an overlay after that we just paste overlay we're giving it a width of 100 plus 4 pixels and then the background is a linear gradient and then a water bottom left radius of 8 pixels percent of absolutes there it is as you can see it's dark at the bottom nice so uh when we're mapping through the images in the page cards I'm just gonna copy the card once we have cards here multiple cards we just need to do a display of Grid in here you can use flex or grid display but in this case I'm just going to do a grid of five columns and uh position absolute okay so now as you can see now we have the cards okay so we have the cards uh now we just need to move on to the other section uh this image section here okay so for the image section uh it's not going to be a lot of stuff but we're still going to be using the layout Okay so let's do actually for the image let's let's do a full page component okay so let's in components I'm just going to do full page.tsx okay so make sure it's use client as well so here's client Rift functional component and export okay and uh here we just need to have a div code image dot image and then we're going to import image from next image and then I'm going to copy some properties save so the image we're going to be using Grover which is coming from the public and the other tag is going to be monkey feel it's going to be true and then object fit to cover yeah that's it for this section we just need to style this image someone said cons full page styled okay and copy this and replace this div we just need to import these type components okay so now let's save we should name this issue so now I'm going to Target the image image I'm going to give it a height of 1000 pixels and the width of 100 plus 10 RAM and then position to relative and then give some border and the transition okay so we should never mind we haven't rendered the component yet but the image itself I'm just going to give it a padding okay so the padding is going to be 1.5 frame and then when I hover the image we're going to get this color here the yellow color so what we need to do now is we just need to render this component in page uh section layout let's render the full page here let's save hopefully we should have the image which is not showing oh it is there but we will set this position to Absolute okay so that's why we you know it's like on top of the this so I'm going to get rid of the person absolute for now so cards page so cards because position let's get rid of absolute for now okay so as you can see now there's our full page okay so here inspect cards okay so this section then with the cards this oh there they are so the cards person are absolute and then relative should be on the section okay so if you go back in the global section should have a personal relative okay nice now what we need to do is go back to the page we need to okay so we need to do a session layout section layout copy this cards actually we need to do the same thing here copy the section layout with the cards after the full page paste the cards again so we should we should have the cards again down here okay um now after that we are going to have a text section text section I'm going to create another component in the app text section .tsx I'm like really starving right now I'm just waiting to do all of the basic structure and then stop the video uh use client this client okay so for the text section we are going to let's start with uh text okay so for the text I'm going to well I want to create a functional components okay functional components oops all right so we are going to have uh let's let's do an interface to face uh let's just do props so Props so we're props and then we're going to have children whoops there's a fly nearby children and then I want to do reactor node I'm going to create a new function in here code text wrapper it's going to wrap around our text okay so Props const text wrapper it's going to be children props like this okay so it's going to wrap around our text and then I'm going to say const text equal to react react.use ref okay so it's going to be an HTML div element Okay so that's basically for the text wrapper we just need to return okay so yeah we return it's gonna we're just going to return a div and then here is going to be the children okay I suppose I want to wrap the text with this tax wrapper okay so that's that and then we have the text section and then here we're just going to have some text which we're going to wrap around the with the text wrapper okay uh yeah just wrap some text you want to animate so a block of text you want to animate by this text wrapper okay so as you can see here so each text is a block okay surrounded by the text wrapper so that's what we're doing here and then I'm just going to do a text oops text section styled like this and then I'm just going to Target the P tag the P tag and then I'm just going to set a font size and a gap copy this replace and now we need to import okay so this text is going to be a P tag later on when we do the animations okay so yeah I'll actually do it here the children cut and then do P tag P tag and then you put in the children in the P tag so save so now we need to render the text we still need to surround that with the section layout section layout and then that's where we put the text section and do text section like that I don't know why there's an error here did you mean text it's disappeared it takes a while for you to okay so now there's our text okay nice it's coming out nice what we need to do now we need to do the video section so for the video section I'm not going to create a new component for that one I'm just going to surround this with the section layout section layout and then I'm just going to do an iframe I'm going to do a div dot video and then I'm just gonna get an iframe do an iframe and then put a link to the video you want to do so in this case it's my video this video here if you go to the website it's going to start playing okay so that's the video when I click play it's gonna play Okay so that's the video I'm going to save so as we scroll down we are going to see a video there it is it's not styled yet so that's why it's looking a bit weird uh let's style that first actually so I'm gonna select the class name video down here so we're just going to give it a padding background color and start the iPhone get rid of the Border give it a width and height uh voila the video looks nice there's a padding and a color there it is so now after the video we are going to have this section here we're reusing this I have effect here the same effect we've done before we're just reusing that but before that I'm just going to skip the section for now I'm just going to put this text section copy the text section I'm gonna put the text section now and then finally we're going to go for the footer okay so for the footer we need to do components and then we're just going to do footer TSX okay so that's gonna be this kind okay components footer styled so this one should be a footer and then we import Star components okay copy the footer Style and replace okay so now uh that we have the footer what we're going to do is we're going to do the nav okay let's do nav it's gonna be like a navigation but it's going to be like a bottom now and then we're going to have the local container logo con container and then we're going to have an image in there image so we have the logo itself it's going to be an image we just need to import the logo from public okay like this uh we're also going to import footer data we're going to map through some data so I'm just going to put that in the utils so the foot is just the name and the link where you want to go to okay so and also the title okay so that's the footer save we need to also import image from next image all right so now uh we also need to import some icons okay so these icons coming from react icons save all right so now after the logo we need to do the input the input with this okay so the input yeah it is an entity okay so it is this entity HTML entity here so we go back we just uh do the footer we don't need to put rapid within the text section but then no no within the section style so we just do footer okay and uh we should have a footer down here there it is so now it's time to style this style I mean add more markup so I'm going to add socials and a P tag after the button after this div okay I'm gonna do a P tag and then some icons disco is not there we need to import that it's not coming from AI it's coming from BS okay now we should have those icons uh down there somewhere okay so there's icons here now uh finally we just need to map through the links okay I'm just going to paste in the block so down here so we just put a dot map item index we're just going to return a div the key is going to be the index and uh what is then error oh you need to set uh it has uh just put any actually so item uh it should be any index should be a number like this so uh the text we can do that as a string and then here index can be a number because we're also mapping through again the links okay so text or name does not exist so text let's check the footer data so it's saying text or should be links dot name no no text or name doesn't exist on this type strange um wait a second let me try to do this now it's working I don't know why it's doing that anyway let's save how much a test group Pro so I have no idea how task works I'm still learning test script anyway so now let's save uh we should have some issues let's see what we have put a photo compile what's the error can I find Mojo YouTubes because the path was wrong so this one should be string because the path was wrong that's why I think all right and uh no idea let's see let's see let's see let's see let's see string I'm just going to leave it to any okay so now let's go to do here down here we're going to do this right so it's going to be a P tag with two anchor tags okay I'm gonna name it right and it's going to be a a okay so let's refresh this okay so now uh everything works we just need to do some styling I'm gonna set the person to relative and then give it a padding and a background and a border top like this all right so now I'm going to Target the nav so the knife I'm going to do a display Flex and give it a gap of three Ram and then I'm going to Target the logo container in the nav I'm also going to do a display Flex logo container display Flex and then I'm going to set the input percent relative and then I'm going to Target the input class and the actual input like this and then give it a background padding so as you can see now there's a nice padding and then I'm going to Target the button so input and then button so input button save so it is a percent of absolute and then it's going to be percent here to the right side okay so top 50 right 2 Ram or they live in two Ram space to the right side and then I'm going to Target the socials so for socials uh I'm going to give it a display flex and a gap from Ram so as you can see there's a gap of farm Ram okay and then we're going to Target the logo container logo container the actual logo and the wooden display effects and a gap of one ram and then we're going to Target the links the links we are going to this give it a flex one to fill the remaining space and do the display grid give it three columns and uh each is going to be equal so three columns one two three so when we inspect you're going to see three grid columns okay so there it is so links three columns okay and finally we're going to Target the rights it's going to have a border top so links collapse so the rights it's going to have a border top there it is but uh the class it's let me see if class name is correct writes yeah so it's not showing for some reason let's refresh this okay I'm going to inspect inspect here down here so right it's a P tag okay let me see why the stars are not showing for the rights I'm gonna collapse uh all of these Styles here so I can properly see that is oh the right is not in the nav okay it's outside enough now save okay so now you can see now it's working properly okay so yeah that's the styles for the footer uh the only thing that's left is that um have a section here we are reusing this have effect so it's going to be a little bit straightforward so that section is code the zoom in section okay it was supposed to be some crazy zooming effect but I just decided to stay with this effect here Okay so we might just change the name let's name it you know what I'm just gonna stick with this Zoom Zoom section for TSX let's do use client I was going to put a lot of animations but I just realized the video was just going to be so long very very long so yeah I'm just gonna stick with the few animations so in here it's going to be a functional component export so we need to do a few things we need to import we have a 3D import 3D I have a 3D from foreign path yeah it is it is and hover okay so I'm going to select the hero a ref use ref cost hero okay so this hero component is basically the this is the zoom the actual container so let's give it a ref excuse me okay so now we just need to render that in page between the video and the text uh we need to do section layout and then we're gonna do Zoom section and save okay so now we're just going to do Zoom section styled dot div and then we import styled like that all right so we're going to have a few images so I'm just going to set the position to relative overflow to Hidden so I don't ever think anything to overflow the parents okay this should be Zoom Stout that's what I'm going to name it started okay so save and uh let's start with the images so we're going to have class called image image and uh it's going to have a style height I want to set that to 50 Ram 50 RAM and then width I'm going to set that to 100 percent okay that's for the image and then we're going to do image so it's going to be like a responsive image so I'm just going to paste the properties of the image so we have the source image source so it should be inside the div okay so if the source for the image our tag feel and another prop we need is sizes so it's going to be a responsive image sizes so the max width is going to be 7600 pixels one on the veg and then the max width 1200 pixels and then I'm just going to style this image Style object free to cover object position center and then transition a transform is going to be the Parallax effect which we have not done so we need to create that not Parallax I mean the half effect cons Ava so the one and half of the hero and then now we just need to put the coordinates so uh first off Hava I'm gonna start with x and I'll put that to 5. and then y I'm gonna do 10 and then Z I'm going to do four okay so now we have the first half effect uh the first half effects which here are transform we have a transform have a transform and how to transition remember we are returning returning the transform and transition from the half effects function okay so hero there's an error of a 3D is no exported member uh [Music] it's always the default export you don't need to do this so save okay so we should have an image somehow with a half effect okay as you can see uh there's something wrong with the transition transition let's get it get rid of the transition for now okay so yeah the half effect is working okay but it's not really working on the Z index let's increase this let's put it to 40. let's see what's happening okay Z minus 40. and Y let's increase this to 20. okay just experiment through these values here so let me see here okay nice and I'm gonna bring back to I Just Wanna Make It subtle oops I'm gonna bring it back to five actually Four okay let's uh do this let's do minus five let's see what's gonna happen let's put this to 10 I think so yeah just you know mess around with these values so I'm gonna leave it like this and then we're going to do hover number two over two uh here we're going to do 40. uh 20 and then maybe seven just mess around with these values here and then we're going to do half a three and then you know mess around with your values okay and then minus seven here all right so now we just need to import uh to put more images I'm just going to paste another image after this image I'm going to paste another one okay so this is another image and then find a final image okay so here are the images so the other needs have a two that only have a three and so on okay uh go back so that they are there's something wrong with that transition let's go and check it out have a okay so transition uh we set it uh we set it to is in and out let's just do ease for this one okay so transition is like that okay so let's actually start with none even a hovering none and then ease okay and then let's save a shoot all right not too bad still glitching a bit though okay so what I'm going to do let me try to invert this so for the X I'm going to do a wire transform for this one and then do an X transform for this one okay so just make them opposite and uh for the for the Y uh this one I'm going to do minus I'll do a minus X transform for the Y okay and uh for the Z uh this is the same Z transform stays the same so I've only changed the X so for the X it's still going to be the Y transform now and then the Y is going to be minus X transform now let's save so the effect should be okay nicer all right perfect so now we just need to uh you know style these cards to make sure they're centered so here we need to style those uh go back to the zoom in we need to start the image oh what's the class name image image so we start with the image Style I'm going to give it a border what are radius I'm going to give it a border radius of 8 pixels the image and the container and then I'm going to Target the actual individual image so we have smoke and then we have monkey so each image is a class name and then paste and then we just position and goes based on the image okay so now as you can see looking nice okay so that's the effect we're looking for so yeah that's it for the sections um I'm just going to take a break and do the animations after the break now that's where the cool stuff is going to begin okay so I'm just going to continue from where I left off now uh there's no animations so if I go to the original project as you can see we have the horizontal scroll animations okay so let's start with the horizontal scroll animation for these cards okay so what I'm basically doing is I'm using a wrapper around the cards so I can reuse that component on other on other elements okay so let's create a new component let's go in the components folder let's name it horizontal uh wrapper you can name this whatever you want dot TSX should be rapper okay so yeah like that so it's going to be a functional component so don't forget to use client it's a client component okay so now let's save so this is going to be the children okay so children like this we're going to create an interface interface let's just name it props props and then we're going to do a node for the children so here let's get the children okay so save so we're going to wrap uh the components especially the cards I'm gonna cut this okay so let's do horizontal rapper okay and then let's save so to save this horizontal workers um wrapper is working I'm just going to give it an inline Style Just for testing purposes I'm going to give it a background let's just set that to red uh as you can see now with a red background so that means our wrap is working so we're going to animate uh best on the wrapper on the on the wrap component so I'm gonna get rid of the background so to for us to do the animations we're going to be using motion motion motion div it's actually a motion coming from from frame emotion so we need to import motion so we're going to do import we're going to import motion from framework motion so if you haven't have a frame motion installed so just copy this or just go to the terminal and type in npm install frame emotion okay so in in here I'm gonna check the children I'm going to create a div another div in here I'm going to say motion dot div okay so we're creating a div oops motion dot div never mind so just do motion to div like this the div and then you put the children inside okay uh we we need a ref for this pattern container okay so let's do ref I'm going to name it uh uh scroll ref you can even touch everyone scroll ref okay so here let's do the ref so const should be scroll ref like this Crow ref we're going to do an HTML div element okay so now uh we also need to import a few things coming from frame motion we need the U scroll hook you scroll and we also need the use transform hook because we're going to be doing some transformations so now uh with those hooks let's start with the use Crow hook okay so let's go down here let's do const we're gonna get scroll y progress scroll y progress coming from use scrollware progress is going to come from U scroll okay you scroll but here it's going to take an object and then the target is the ref should be our score F but this should be Target okay save so scroll while progress is like the horizontal progress based on the ref or Whatever item that is referencing for example if I go to the project if this card is derived if I do 0.5 it's in the middle midpoint of this card of this ref if I do 0.2 it's like up here 0.3 0.4 0.5 0.6 or do it one okay so that's the scroll progress scroll y progress of whatever element you're referencing okay so scroll while progress um we have the scroll I progress for now we need to actually create the transformation so in this case we're going to trans transform uh the x axis so here as you can see now we're transforming translating on the X okay so now uh in the interface here I'm just going to add one more I'm gonna add Direction Direction for this direction um it's going to do the number and then what else I'm gonna do a height height I'm just going to do let's do any okay so I'm Gonna Save so we've uh let's do string actually so we have directions so direction is how many pixels I want to move to the uh on the x-axis how many pixels okay if you do minus it's going to go to negative if you do positive go to positive so that's the direction so negative and positive on the x-axis okay and the height is the height of the parent container okay so now as you can see now test group is complaining we don't have these uh properties so here let's start with height I'm gonna set to 40 40 Ram 40 and then let's do Direction I'm just gonna do let's do negative let's do minus 1400 okay so it's gonna go to the minus X okay so with the direction so now let's do const X transform okay so what we're going to do we're going to use the use transform hook so for the scroll why progress okay so we're going to use uh two arrays here so I'm going to explain so when the scroll y progress is zero when it's like up here or no scrolling one is zero won't do nothing so here's the transformation box so what we don't want to transform anything so it's going to stay at zero when scroll while progress is equal to 0 0.1 0.1 we just want to also stay at zero okay when scroll progress is equal to one scroll y progress equal to one and then I'm gonna put the direction because we didn't get the direction anyway so here we need direction and height Direction and height Direction okay so the values in between this is going to be between uh 0.1 to 1 is going to be automatically animated by framer motion so it's going to be gradually animating it's not going to snap from you know 0.1 to 1 it's going to be slowly animated depending on whatever you know how many pixels we have for trying to animate okay so when scroll y progress equal to one uh it's going to be one negative 1500 pixels to the x axis okay on the x-axis but in between it's going to animate to reach this to reach this value here okay so uh what we need to do now in here we just do Style style height we're just gonna set uh the height to height and then let's do the Z index I'm gonna set that to five maybe six and then we're gonna do position we're gonna set that to relative position should be relative okay okay so we have this Z index position relative and also we want to translate on the x axis on the X translate X and then X transform okay so there's one thing missing we need to position absolute these cards okay oh this is the original the animation is working as you can see here it's working uh let's position absolute these cards uh page cards position absolute okay so let's say what is then error what's in absolute uh okay so as you can see now it's working but it seems to be going really fast so what we need to do here this one more thing we need to do in here so we need to do an offset okay so we're gonna do it's gonna be an array start end and then we will do and start okay so now let's see okay so now it's working nicely okay so uh the horizontal scroll is working so we created this component for Zola scroll we can reuse this component on any any element on any component we want to you know to animate horizontally okay so for example if I want to use it on these cards down here these cards down here uh what I just need to do is wrap uh that uh where are they okay this one I'm just going to collapse I'm going to do horizontal like that so this is going on the opposite direction so this is going to be the positive uh the positive direction okay it's no longer negative so it's going to go on the opposite direction so as you can see now it's on the opposite direction okay so this one is going on the opposite direction and this one is going on the opposite direction okay so that's kind of the effect we're looking for okay nice okay let me double check here all right okay so it seems let me double check inspect so right is set to zero I don't remember setting right to zero wait a minute so it's an inline Style um okay right set to zero I don't remember setting that just zero okay so I guess we need to set right to zero on the card here okay so let's do that actually yeah we do so I I did it actually set right to zero so here we're gonna do Style and then right I'm gonna set that to zero okay so let's ref Oh wrong one let's refresh okay so now it's much better all right so yeah that's it for the orange Thunder scroll so now let's do the text animation okay so for the uh let's do this one actually the full image okay so for that one uh we're going to full page okay we're going to be using scale okay so we need to import a few things so we're going to import motion uh these three things okay some things we've done before uh scroll by progress we've done before scroll our progress like this okay so the section ref we don't have the ref yet so we're going to do costs section ref a div element okay so I'm just going to set the ref here and then it's going to be ref equal to section ref okay so what we're going to do here is basically just um animating uh value between one to zero like zero to one like what we did before okay scroll web progress animated between zero to one okay so depending on how much you have scrolled that's what we're going to do so let me just comment this animate animate animate okay let me just do this crawl where progress ah yeah is a value one between zero to one okay so we're just going to animate this value between one zero to one and how much we have scrolled between you know zero to one okay so now uh what we need to do now is animate the image so first off we're going to animate this scale so I'm going to say cross scale equal to use transform scroller progress so when scroller progress equal to zero I want the so this is a scale I want the scale to be zero okay so one scroll while progress equal to 0.5 I want this scale to be one okay so here I'm just we're just going to have two properties zero and one so scale y progress zero zero when scroll y progress when when the middle I want it to be you know one full size okay scale so let's go to the image motion to div so the image should be in a motion dot div okay motion dot div um parent okay so I'm just going to do this as a motion.div actually motion the div like so and then I'm just gonna do Style scale I'm gonna set that to scale and then I'm Gonna Save so the image is now scaling as you can see now okay you can you know animate the X all right so image scale nicely so it's same as this one but here we're animating uh the x-axis okay it's leaving the screen so now we have this scale scale bit we need to do the X X bit okay so we're going to do cost X transform so X transform use transform hook and then when uh when the scroll I progress equal to one when we have scrolled fully okay I'm going to say that to minus 1000 pixels okay when you've scored fully but when we're at 0.5 I'm going to set that as zero and then also when we're at 0.1 0.1 I'm also going to set that let's do zero zero because when Austin is zero here and then save so when scroll y progress equal to one we're going to do minus thousand pixels when scroll our program is equal to 0.5 it's going to be zero but it's going to be really quick any value is in between it's going to be animated automatically by firmer motion uh um why do I have two commas here okay so when is equals 0.1 is zero one zero zero okay so now let's say let's scroll so when scroll by progress equal to one the image should be moving to the left side on the x-axis okay so now nothing happens because we haven't used the X transform yet so we're just gonna do X X transform like that save so now let's refresh just in case it might not work let's scroll as you can see now the image is moving as we expect okay nice so the animation seems to be working nice you know you can even do the opacity if you want for this image okay we're going to do the opacity later you're gonna see how opacity works but it's basically the same thing animating as we did here we just put the opacity value so now we need to animate let's see what what is the next section so the next section is going to be this text okay so we animate the text I'm just trying to see what component I've done that in text section okay so for the text section uh we have a P tag uh text section Okay so P tag we're just going to make this a motion we need to import motion so we're going to do import motion the standard import of motion and you scroll uh we're gonna do motion dot p motion dot P okay we're going to animate the P tag so the ref is text okay so this is going to be the ref for our animation so what I'm going to do now uh we're going to do scroll while progress we're going to do start end again okay scroll web progress the progress of the Y when we scroll between zero to one so in this case the parent the ref is going to be the container of the P tag I think it's this div so that's that's how this call scroll progress is going to be based on so now uh let's start with opacity my seconds opacity okay so for the opacity uh when when the scroll program is equal to one I want the opacity to be one when the scroll process equal to 0.8 I want the opacity to stay at one and then when the scroll plug is equal to zero okay when the Scrapbook is equal to zero I want the opacity to be zero okay but the values in between are going to be automatically animated so what I'm going to do now I'm just going to do the opacity in here I'm gonna do Style excuse me opacity like that you don't need what is the same as opacity you don't need to you know do like this opacity like that was the same so just leave it at opacity okay save so now let's scroll should animate the opacity as you can see now the effect the opacity effect okay so our opacity is do nicely working you know you can mess around with these values here if you want so when uh scroll while progress let's say equal to 0.5 you know the opacity is going to still be at one okay you can mess around with the you know these values here so for me 0.8 is good okay so the opacity effect is now nicely working so here as you can see the opacity is 0.8 or less was and the values in between like one so this is this must be zero point eight this is one 0.8 so the values in between are going to be automatically animated okay so with the opacity um uh the next thing we're going to be animating is the X progress okay so what you can do is you can also use a variable for direction here in the interface if you want to change directions of how the text is going to animate scale whatever that's entirely but in this case I'm just going to be using a fixed a fixed value so I'm going to do the const X equal to use transform okay so for the x-axis when the scroll y progress is equal to one and when I set the X transform to zero zero when it's equal to 0.4 the scroll y progress 0.4 I'm going to set the opacity to be also oops this should be zero zero okay but when the scroll y progress equal to 1 scroll I plug is equal to one I'm actually actually not zero is equal to zero I'm gonna do minus 1000 pixels okay I'm going to animate from minus 1000 pixels so this text is going to be coming from the left side you can make it come from the right side so this should be a positive value so you can you know put a variable here whatever you know text you want to animate you have a different kind of position in where it's coming from that's entirely up to you I'm just gonna stick to a fixed value and then here I'm just gonna do the X X okay so now as you can see now the x is working now the text is coming from the left side okay nice that's the effect we're looking for so the other thing that's what I want to animate is the color so the color as you can see is different okay it's going to be super highlighted up here it's going to be white and you know in between it's going to be animated animating between the colors so here for the color animation um I'm going to do const I'm gonna do color change you go to use transform so for the color change I'm going to do a lot of uh a lot of keyframes okay I'm gonna do here uh actually we need to start with scroll wire progress okay and then let's do some keyframes okay and then here it's going to be the colors so the next array is the colors in this case it's black at home black okay so yes I'm just gonna paste the values that I've used I don't want to go do them one by one from here so we'll scroll y progress equal to zero uh the color and we're just going to press the next array here okay let me organize this okay one scroll y progress equal to zero the color is going to be this well scrollware progress equal to 0.2 the color is going to be the same one is equal to 0.4 it's going to be here 0.6 same colors here here and to reach one okay everything in between is going to be automatically animated okay you can put a different color here you can blend the colors whatever you want that's entire life to you depending on the scroll progress okay scroll y on the Y so color change we just need to put that here we're going to do color we just want to do color change like that so save so let's go back to the projects we're working on so scrolling down scrolling down as you can see now the color is working as you expect okay so nice uh the colors are working so the next thing we need to do oh we've done the hover here so the next thing we need to do is the animation of this section here okay excuse me I think this section is our last section to animate excuse me okay I can't remember what I've named the section let me check okay so page okay yeah so it's a video so I'm just going to convert this into a motion uh which we don't have the div motion so let's go up here and we import motion uh we need to import the rest you scroll and use transform Okay so we also need to give this a ref okay so let's give the ref of video so ref go to video and let's save so we should create a ref up here up here video Okay so now that's uh the only thing I want to do now is the animation so we're just going to animate the opacity and I say scroll web progress the standard okay scroller progress using the use scroll hook okay so now what we need to do is do the opacity so const opacity okay so for the opacity uh one of scroll y progress equal to zero the opacity is going to be one when scroll y plug is equal to 0.6 5 the opacity is going to be zero okay actually it's going to be State one when it's 0.6 and then it's uh when the scroller progress equal to one it's going to animate in between the values to zero okay and then the opposite is going to be zero when from this here it's going to animate in between to one or scroll up from 0.65 to one scroller progress the obviously is going to be animated back to zero okay uh let's do the opacity video let's do Style opacity okay uh just do that opacity let's see if the opacity is being animated oh it's here so something is wrong uh is not defined okay we can just import react from react here so let's keep scrolling down okay so as you can see the opacity is being animated now okay so in the original uh when I inspect actually you can see the opacity being animated uh you know slowly okay perfect so in the original here we also scale okay so we want to animate the scale we have the opacity we're gonna do const scale okay equal to use transform uh um this guy is going to evalore Valley so when scroll y progress equal to zero uh 0.6 we have 0.8 0.9 okay that's our values so here one scroller progress equal to zero uh it's going to be one for the scale 0.8 I'm going to hold this so it's going to be 0.8 again I'm going to scroll our progress equal to 0.8 okay so one scroll I progress equal to 0.9 uh it's going to be zero yeah okay save one two three four one two three four okay perfect so now uh let's give it a scale to see if this works so now we have scale now let's check it out on the in the browser to see if you have the scale okay so now this scale is working and low pass is working okay yeah that's the effect we're looking for um that's pretty much it for the animations so let's start again from the beginning I'm gonna make a full screen we have the power animation oh there's a parallax here I forgot to implement the parallax of Animation but anyway if you want to see the products that's for the next video um I think I've done enough for this video so it's on the original project here there's a Parallax here as you can see here okay so if you want to see that just uh let me know in the comment section but I think I'm done for this video today okay so here there's plenty of animations here if you want to see anything else just let me know in the comment section and there don't forget to share like comment and subscribe on my channel if you're new I'll see you on the next one

Channel: The Code Dealer

Views: 45,117

Keywords: framer motion, react animations, react js, next.js tutorial, next.js 13, typescript, typescript tutorial, typescript react, the code dealer, thecodedealer, react scroll parallax, react scrolling animation, react scroll animation, react scroll animation framer motion, scroll animation css, scroll animation, 3d hover effect css, 3d hover effect, react 3d hover effect, next js, nextjs tutorial, tailwind css

Id: T6tc7TT13is

Length: 143min 45sec (8625 seconds)

Published: Thu Jun 22 2023