Next.js Horizontal Scroll With Gsap ScrollTrigger

so here's the thing in this tutorial we're going to make an horizontal scroll animation using an SGS g-sub and vanilla CSS anyways this is my first video I'm a front-end developer and I hope this video will be helpful to someone out there of course we are starting this project from completely scratched so I'm going to install off the dependencies with MPX create next app and just call it scroll you can give it whatever name you want and I'm not using typescript I'm using ES screen for Lending I'm using the source directory but you can also don't do that it's not mandatory in this tutorial I'm not using the experimental app and Port Alliance here we go project is already almost completely set up just need to install juice up of course 0.1 BMI juice up and just running the server all right so at this point we just need to remove all this all these placeholder stuff that comes with npx create next step and we are just going to create a brand new functional components call it just home so I just remove all the global CSS and I'm going to delete the home modules as I'm not using CSS modules for these projects so right now we just want to create a component folder component components maybe it's better and we are going to create our hero that's JS component and as you can see for this component it's really really simple and straightforward just have a header an H1 and H2 of course you can put all the stuff that you want it's just for the sake of this tutorial it's really really simple and we are just going to reset all the style just selecting HTML the body and everything just put things on I did zero emerging zero both siding border box and probably you already know all this stuff and we are just using some constants like for the background color the primary color the primary text color and some heading Styles left for big headlines medium hand lines and spacing all right so let's take the body you just have it this little nice black background I'm going to style it just a bit the header just putting the height of 400 report H and just centering all the stuff inside so we just want also to select the text in this case we are selecting the H1 putting the Jill Sands as a primary fonts and some other phones as a safe this one doesn't work they're going to take all the other their families and yeah it's pretty straightforward we're just going to import it in the index Euro as you can see this code automatically imported from the correct directory and yeah we have already our hero section right now our hero component is finished and now we just need to finally work on the animation I'm going to create other components called section Js if you're wondering what is this stuff this RFC it is comes from a really nice uh I'll call it extension is this one es7 plus we had Redux blah blah blah from this really complex username I don't want even try to pronounce this um so yeah just creating the scroll section and I think we are just starting to import all the stuff that we need we're just just using user for referencing stuff in the Dom use effect for building the animation with the interactive always on put the GSAT animation especially with scroll trigger inside this effect you're importing disappear importing's Cloud trigger from gizap slash this is really important as next.js uses uh server-side rendering you should not import scroll like this but always with the list folder and we are just going to create really slowly this time I'm going to write it by myself in Korea you'll start building a section section with it class name of scroll section section order all right inside the web active width another div and thirsty is going to have a class name of scroll sorry this diff actually doesn't have a cross so this div is going to call scroll section inner all right and this is very acts like a like a container for all the divs that I'm going to have right here which we're going to have an H3 of section one with every I have a class name of scroll section all right I'm just going to simply duplicate all this stuff and rename it accordingly all right and this is basically all the HTML that show HTML actually the assets that we need for the animation so I'm just going to start it just a bit we start having some style for the outer we just need to overflow hidden and in the inner section I'm just going to add 100 viewport H and this is really important I talk a bit more about later but for now I just need to know that these four centering all this stuff so I just need to close the hero and right here we can start slowly building the animation first thing first we just mean you just want to select some stuff in the Dom and not just going to select the first div the empty one without the glass this will act just as a trigger and the second one which is where the animation will let's say we will play and we can immediately jump to use our beloved use effort all right we want to use a const like pin is equal to G sub that from two all right and this one always always have the section ref is the element that you want to animate that current you're going to write is this stuff a lot you always should include that current when you want to to get the the ref and this have two objects the first one is the two animation which is Translate trying translate X which is zero and second object is the two animation which is way more longer is Translate X it's equal to -3 100 viewport H that is because we have four fourth section this number is going to increase or decrease based on how many sections you have we don't want any is none we want the oh wait all right we're going to Direction set one and finally the scroll trigger there you are which is an object and we're going to select our trigger which is the trigger f as again that current and we want this to start um like in top top this is when the user reach the top of the of the trigger the animation will be triggered and we want this to end is should be 2000 pixel when the user reached the top of the last section we want to put some crab one is not coming because I'm using the comma okay scrub you can also set this tool shoe or you can set a default value like in this case I want to have it from scrub off 0.6 and we are going to pin it to the screen with just shoe okay also we need in the return function we need to kill the animation with it's just a constant the constant pin that here this is really useful in some cases maybe not in this case but I just prefer to put it is is going to kill the animation when the component gets unmounted so the animation doesn't let's say doesn't remain in the component something really useful maybe we don't need in this case but yeah I'm just going to put it anyway the next thing we are going to make of course is turning a bit these sections and the code hopefully is really not that much because we just need to set the height of every section and just some styling to that H3 that I put in inside and I think we are almost ready to go even just import it importing it in the home scroll section here we are he wants some great fragments all right and yeah we are already working as a demonstration we gotta also build some really quick like further components footer.js and going to quickly say the code that I have and a bit of stunning is more or less is almost identical to the hero section and just going to import folder and now should be also working yeah it's already working as you can see it's also really responsive and yeah I think that's it the tutorial is really easy really quick and if you have some questions just let me know in the comments

Channel: IvanSmiths

Views: 16,582

Keywords: react, next.js, gsap

Id: PeFqGrEHnp0

Length: 13min 50sec (830 seconds)

Published: Wed Feb 22 2023