Make a Parallax effect with React, Next.js and Gsap ScrollTrigger

so welcome to this new tutorial where we will make a parallax effect using an xjs gsup and vanilla CSS I will start by creating the main container with the cluster name of Parallax outer and another div with the class name of Parallax which is where all the animation will be placed in the CSS I will let the route with two constants one is for the background color and one is for the color for the text and I'm putting both to the body The Parallax outer should have the auto flow hidden and I want The Parallax to be just a bit more taller than around the port H as I want The Parallax background to be animated I'm putting it inside the estate and I'm putting 20 which stats for 20 as you can see I'm putting it in line style and there are four colors one is blue violet red and yellow and I want the Violet one to go from 20 which is the initial state to go when the animation is finished to a total of 120. now you can finally start to add the images I will start by the mountains will make every image inside The Parallax to position absolute and I want the mountains to take the whole wheat I will also add the sun and the sun will be horizontally in the middle and a bit more in the in the bottom I'm also adding the clouds where one cloud is like taking the full width of the page one is totally to the left and one is totally to the right and as a final touch I was adding the Stars now also adding some copy with an H1 it can be your CTA your call to action and a button I want all copied to be positioned in with absolute I want all the content to be centered and I want to put the Z index to zero so it will be between the Sun and the mountains each one of course is more big and the span will look like a button now before we start the animation I'm adding some spacing on the bottom it is just an H2 and a paragraph to make just some spacing in the bottom so right now I'm just preferencing all the stuff that you need to animate and as you can see I'm referencing all the images also the div and the span because I want to animate also the span separately before we continue I want also to put the copy all the way down with bottom zero and I want to put an opacity of zero so in this case I'm using gizap that contacts putting all the animation inside it because by default react uses the street mode and the strict mode in development can cause some issues usually you'll find every time problems when you're using that from operator from gstap in this case I was also finding problems because maybe I was using a timeline there are some problems and I didn't want to put Street mode to false because you need on development so I'm just registering scroll trigger and I'm using that timeline with the timeline I put I want to put some default values in this case just the direction each element in the timeline would be a direction of one and we do need to write it every time I'm also calling the scroll trigger and we have a trigger which is The Parallax ref we want the animation to start immediately so it's top top you can also put one as a number it's totally the same we want the animation to end as soon as the users scroll for 5000 pixels the scrub is put to choose the user will see the animation when you scroll up the PIN to true so it means it's pin so it's fixed as you can see I'm also putting the update function and this is only for animating the background and the code inside is pretty simple I Will Show You by console log what is the self.progress the self that progress is just console logging the percentage of the scroll trigger which is from zero to one of course we don't want all that decimals we want to round the numbers we're using the Mod Dot seal and running the number and I'm just multiplying the number for 100. as you can see we already have the numbers but we don't want to start from zero we want to start for 20 so just adding a plus 20 and now we have a range between 20 and 120. now back to the timeline I'm animating the mountains as you can see from the code two goes down and one goes up I'm animating the starts to finally be visible and setting the top to zero I also want the Stars to start at 0.5 seconds after the timeline has begun I want the clouds in the bottom to just disappear so I'm just putting a positive Zero The Cloud of the left should be all the way to the left and the clouds on the right all the way to the right then also designer want it to be more down I'm making the copy to visible and also the bottom after 1.5 seconds after the animation has started I also want to return the context that the reverted this for just for cleanup when the component gets unmounted and the animation is already working is not that much responsive if you want to make it responsive you have to tweak the animation I'm also doing in the description some links about the spirit mode in real the problem was that with swift mode the use effect is kind of run twice so the animation was not working probably so I just found some solution and and I'll put the link in the description

Channel: IvanSmiths

Views: 27,231

Keywords: react, next.js, gsap

Id: alGnk3iMaYE

Length: 4min 27sec (267 seconds)

Published: Wed Mar 22 2023