Make Your React Next js Portfolio Stand Out with Perspective and Gsap

hi to everyone in this tutorial we'll make a tutorial on how to make this perspective effect and of course we will use next JS gsup and vanilla CSS for making this effect I was highly inspired by Matthias Peters is more or less the same what I did and he made this super beautiful websites he's like there is this perspective animation and also this opacity and blur animation in the images and so yeah my version is kind of different but the principles are all the same the first thing I want to do is to store all the projects in one file in this case I creating a folder in the source directories called data which inside there is another file called data.js and in this file there will be just a constant which is data which is a array of objects and this object I just have a text which is just a simple copy in this case there is an image and each Divi to have a class which will be put in the class name of course and I want to start with the jsx and a madiga DP the class name of perspective which is kind of the main wrapper inside there will be another div with a class name of perspective inner which is where we are going to iterate in this case I'm importing the data each data it will be a project in this case and making a div with a class name of project.class and I also take in the index so the first div it will be with the index of zero the second D will be the index of one and so inside of course there will be the image with a source of projected image with also an ALT with the project that text an experiment is a d with the class name of perspective desk which is where all the copy and button and all the things that you want to put it will be inside this div so there will be a niche to with the project.text and a link with the button we just need to import the link now we are ready to style and I want to reset all the styling having a root of a black and white color I want to put the black color to the background of the body resetting the style of the A and double start by studying the perspective which is the main container of the wall animation of course we want to put the order for hidden because the images are going to overflow so we don't want the horizontal scroll we want to put a height of 100 voltage and the width of 100 we want to position relative of course we want to add the perspective is is like the most important property that without this animation will not work now started styling all the diffs and develop a width of 20 and each image it will have a width of 100 and a display in line of valid images are more literal now we also want each div to be positionally absolute I want the one in the left to have the transform Translate Y at minus 15 percent of it will be centered vertically so in order to do that I'm just going to put a top of 50 percent I just Center vertically and I want it to be on the left of 13 and I want to do the same for the one in the right will be of course on the top 15 and in the right of 30 and I want to put the one in the right with minus 10 Ram in that Z direction as you can see the first one is the X second one is the Y and the third one is that's it so it will be more far than the other one and this will give the perspective animation each divot will also have a transitional 0.1 second and we need this one to have a smooth transition when we add the the class with the opacity of zero without this one the capacity will be immediately set and this kind of ugly with this transition of 0.1 there is a little bit of fate and we definitely want this now outside the text it will be of course white will be more little and with a font weight of 400 also the span which is the button it will a color of black a white background you'll have the same font size and the padding and a border radius to make it more like a button and the third one it will be just like the other divs these two will be just more apart than the others will put a minus 20 RAM on the exact Direction now we want to set the perspective inner and for animating in 3D we need this property most making this one position relative with a height of 100 and I want to select all the things that we need for animate and the first thing I want to select is the triggers it will be the element will be trigger the animation and in this case it will be the div with the class name of perspective course I want to select the div which I'm going to animate the perspective itself and this one will be the perspective inner and I also want to select each div inside the map data and the thing is this case the best solution is to create a const called refs where we are just going to iterate twitch data and which data it will be I use ref so in the first day we just need to boot the ref and the left will be equal to the left and the Reps will take the index on the register scroll trigger I'll put everything inside this effect and the first thing I want to do is to creating a cost sold first item which is equal to the first left so the first leave also want to domain the second one and the second one of course will be the same just with the number one so it will be the second one I would put all the animation inside the user that context so so we kind of avoid some problems with the strict mode of clear inside it there will be a timeline and the timeline it will be uh defaults with the ease of none so the default it means that each element we are going to animate it will have the ease of none so now I want to call it scroll sugar the trigger will be the trigger it will start when the user reaches the top of the container and it will end after the users are scrolled for 2000 pixels the scrubby set one so the animation plays when the user scroll the pin is to set to true so the animation will be positionally fixed in this case I also want to add a snap in the snap means if the user stops scrolling is going to snap automatically to the closest element that the user have and in order for reaching this I'm making a simple calculation which is one divided to three three is the maximum length in in this case but we can fairly animate the perspective itself and by doing that I'm just going to animate it translate 3D in the exact Direction so in this case of 45 Rams and the animation is already working but once again sees kind of ugly to have this super giant image which is never disappeared so I'm just going to set an opacity of zero at almost 0.300 seconds and I'm also putting an opacity of zero to the second div after 0.400 seconds never forget to return this works for clean up the animation when the components gets unmounted I'll get a refresh and now the animation is also working with the opacity I know it's more pleasant to see I'm also adding a spacer to the top and to the bottom and this will lock just as a spacing and yeah that's what I wanted to achieve this thing is really nice if you want to showcase your projects your work is a kind of nice feature to have in your website and I think that's all I'm putting the link in the description to Matthias Peters thank you for this version was really cool to develop and yeah see you in the next tutorial

Channel: IvanSmiths

Views: 2,650

Keywords: react, next.js, gsap

Id: ehsYXxbogxs

Length: 5min 57sec (357 seconds)

Published: Wed Apr 05 2023