How To Make an Image Reveal On Scroll with React Next.js and Gsap

so here's the thing in this tutorial we're going to make an image review animation using an sjs gsub and vanilla CSS and this animation comes out with two variation variations as you can see this is the first one you just animation gets triggered and there is also another one which is slightly different the users the user scroll up then animation will be triggered again so let's begin with of course and PX create next app and just call it image review and not using test script is lean Source directory experimental art node and import all the same all right now the project is fully bootstrapped so we just open vs code and of course we are going to install npm I G sub in the meantime you can start to delete all the placeholder stuff that we have in the index called this stuff home and also in the Stars you can delete the home modules and use [Music] CSS modules and we can already start the server pmram Dev I'm going to create a classic component folder opponents components yes and we are going to create our hero.js copying it really quickly all right that's important hero.js well just here is good all right these are just a second of a pacing so it's not that much important for the tutorial itself but first Imports I'm going to just add some Global styling this just adding some resets for the studying some colors some headline stuff some facing and some stuff for the buttons also the body of the Monster Rod and the background color that I set right here and some more styling for the the hero section is not that much important so I'm going to go really really quickly and so yeah now we can finally start to work on our image review component and I'm start by inserting some images in the public folder you can find these images of course in the complete GitHub repo and I'm going to create in the source folder another folder called data and inside data I'm going to create a projects here dot Js and as you can probably guess this projects folder file will contain the informations about all about every project and this will be just a simple constant is an array of objects like the every project will have a name and has margin and this has margin is just for studying purposes as you can see one is false one is true one is false that one is true this is just for studying purposes because in my example one project always the one in the right it will have more margin so I just thought it was the best uh the best way to deal with with that effect it would be of course an image as a array of Technologies and a link for redirecting the user to the yeah to the page of the of the project but in this case I don't have of course a page it just will redirect to the to the home directory and now that we have all the data we can finally start work on our component so I'm just going to create a component calling its projects yeah what is that JS and I'm going just to all right I'm just going to copy and paste some cool key Imports and just going to import these effect use ref from real gsop scroll trigger and we are going to import our projects uh projects there from the data that we created previously and also we're going to import a component that we still haven't created but we are going to create really soon and yeah we're just going to build really quickly is component I'm just going to create a main inside this Main we are going to have of course our projects we are going to map through every projects and for each projects we are going to have a simple project and yeah for each one of course we are going to use project single that we are going to create right now maybe I'm going to pass the project as a prop it's still as a project so right now you can finally create the single component for each project and you can call it like just project if you want project.js but I think it's not that much clearer because we already have one called projects with the S maybe it's a bit confusing to have projects and projects so I'm just going to call it project single maybe a bit more clear I'm just going to grade it really quickly and but you can just copy paste because it's not that much important for the sake of the animation I'm going just to explain a little bit we're just going to take the project prop that we send right here descending the project as a project prop projects come from the data and for the project we have a single div select the wrapper the main wrapper and save a class name with an as you can see there is a little if statement and this is just for the styling the has margin and basically is if the project have as margin is equal to true it's just going to to have these two classes you're going to have project single and project single Dash margin if not it's just going to have the projects underscore single for the it will have the stuff for the for the image will be the project.dink as a as a link imported from next Dash link and this is really important if you have an old version of next.js you still need to put the anchor tag but in this case I'm using an SGS 13 so I don't need to put the anchor tag hopefully I'm going to have the animation with the source projected image the alt type is project.name we're going to have some description this is the project that name with an H2 of course the link again project link this will be like a button and of course you have the URL for and for each uh this was let's say the worries it was the Technologies so we are going just to map for each Technologies which will attack and for each stack it will have a key which would be the attack and of course the name of the attack at this point we are finally ready to start give it a little bit of style at the single uh single project and as you can see there is kind of a bit of CSS properties but the only important ones are these two one is the clear paths and one is the scale of the image the clipart is rated the developer of the image but you will see later why and of course the scale is for giving the image a scale scale animation all the other CSS just for studying purposes as you can see here just signing the for example the title The what's the that stuff yep you probably understood and the single margin is also really important this will be the class that we have in this case if the house margin is true it will have this clip this class that will add some margin top of 13 RAM and I also have just a little bit of middle query where super really important I will just remove the margin top because maybe in the mobile version you don't want a project to have more margin in the top it doesn't make for me any any sense and some other little styling adjustments now you're finally ready to import the component to the home but before we're just going to add worries this one hey class name of projects let's go underscore over all right and yeah I think we can really import ant projects here we are Auto closing and angles on that class name of projects and okay we are starting to see something the image is not here it's probably for this CSS properties this is for the animation but maybe we don't need right now you also don't need this one I guess yeah perfect now the project is already showing of course there is not the animation that we are going to build it right now but as you can see the projects are already showing so the the name the bottom the text stack and images and here another fairly Refinery ready to build the animation we will create the animation just in one file in this case it will be the projects.js so I'm just going to remove this spacing and we will create the for created the animations you can see we have more than one image so in this case I think the best solution will be to create a custom hook to just take the reference of each project and yeah for doing it just going to create a custom hook which will be const project riff and set projects ref is equal to use array ref and this as you can see it's kind of similar to your state because basically the first value of this const is the state variable that gets initialized using the custom walk and it's it's like the initial value while the second one is worth kind of a function to update the first value so it's really really similar until until now do you state uh you state Hook from the earth now we are going to create the function which will be function use array [Music] ref and first we will have the projects ref it's the same I think yes all right and it's equal to the classic use use ref and as an initial value we want this to be of course and empty array then also we need the project serf Dot current which is also equal to 20 array and at last we just need to return an array of two values where the first value is just the projects ref that we declared before and second value is an function which it takes the ref it's only the the ref that we are going to reference stuff in the Dom and it's going to uh it's going to push this ref ruited to the projects ref that current Dot push also the ref now the custom Hook is finally finished and now we just need to register jsop.read register plugin called trigger thank you and of course we need use effect and this is the fact we are just going to take the projects that have that we have declared before dot current dot for each Loop and literally for for each of these of the reference we have a project a function its function with with it will have the animation for each for each project with we need first to reference of the stuff that we need in this case we want to select the wrapper which will be project dots query selector and it will be the class which is this one we also need of course to select our image which is equal to also project dot query selector and we need to select the class of the image once we have both elements selected because developer is for the animation that Fades the image and the image itself before the scale animation once we have what's selected we need to make a timeline which is there or you can call this whatever you want equal of course to G sub that timeline all right and we just need to call immediately the scroll trigger inside timeline which is an object and the trigger of course it will be project we want animation to start that top bottom and we want to toggle total actions all right to restart known reset this will act uh this will restart the animation once the user scroll Scrolls up now that we have our trigger Rhythm finally built the timeline itself so I'm just going to make a TL Dot two which is for the proper and the wrapper will have a is of power two it will have a question of two seconds and a clip path which is the animation itself copying it one second all right and second one it will be the TL dot tool and it's only from image it will have of course hydration also two seconds and a scale of one in this case we also want to put this minus sign it will it means that with this timeline it will be triggered when the timeline itself it triggers so this boat they they start at the same time in this case we can remove the return and you can start to take the set projects ref and pass it as a prop so we can reference all the stuff in the Dom that you want that we want to put inside the projects ref which is for now an empty array what we are going to select all the projects and we're going to send this as a prop yeah set projects ref and they noticed that we are we are mapping here but we don't have a key which always put the key in this case it will be project project yeah that name those can be project.id if you have one in the best case scenario so yeah we can give it a save now we just need to take our uh the second prop we pass just now which is set project ref yeah and we just want to put it in the top ref set projects all right now it should be working but I think we just yeah we need get read please comments guitar refresh [Music] um it's not working oh it's not working because this projects graph yeah we finally have our animation and as shown before you can also remove the toggle action I think it's more it's less chaotic if you just play just one time I think is the best for the user in my opinion but that's totally up to you so yeah I hope this was helpful for you leave me a comment if I wasn't that much clearer in some some parts and make sure to check out the full GitHub repo where I've read some some comments in the code but yeah let me know in the comments I think it's the best if something is not clear I can explain it better for you

Channel: IvanSmiths

Views: 3,293

Keywords: react, next.js, gsap, image reveal

Id: OYrodTmMyKE

Length: 20min 35sec (1235 seconds)

Published: Wed Mar 01 2023