Layered Parallax Scroll with React & Framer Motion

today we're going to check out how we can make a multi-layered parallax effect like this one using react.js and framer motion we'll go over how you can find a source image chop it into multiple layers using figma which is free then finally how you can lay out all of that onto your page with react and animate it using framer we're going to style everything using Tailwind CSS but there really isn't a whole lot of difficult styling going on here so you can absolutely follow along and use plain old normal vanilla CSS if you prefer quick shout out before we get started this video is sponsored by your boy I just released a new personal portfolio template on my gumroad this is the exact template that I used in my last job search in which I landed interviews at companies like Microsoft and Amazon and now you can use it in your job search without having to spend tens of hours putting something together yourself this is actually my second portfolio template the first of which is already received some awesome feedback happy job hunting Link in my description now back to the video awesome so we can go ahead and get started now the first thing that we're gonna have to do is find some kind of source material I like just going on unsplash.com if you haven't heard of unsplash.com before it is a free royalty-free image website they do you have a pro tier you'll see some of these that say unsplash plus but the majority of these are completely free to use and you can look up just about every anything they have millions and millions of pictures for our example I'm going to look up mountains I find this effector looks really really good with mountains and forests and stuff but the main thing that we're looking for is just a clear separation between the foreground and the background so say something like this top right image might be a little bit harder because you're gonna have to do some kind of cut like this and then you're gonna have some empty space at the bottom some might be a little bit trickier or something where you have a whole bunch of different layers like this image you kind of have all these different layers that would be really cool if you want to spend the time to cut all of these out and then maybe have all of them move at different speeds totally feel free to do that if you want to take the time to do that but for us I'm going to use something a little more straightforward like this picture right here you know the foreground is obviously just these images and then the background is the sky so this is perfect for our example once you've figured out which image you want to use you can come up to the top right over here click this little guy right here and then download whatever size of image you need I think I just downloaded medium for this which should be be good for for most screen sizes to not look uh too bad and once we've got that I'm going to bring it on over oops to figma and we can actually start cutting out our shapes if you haven't used sigma before you can just go to figma.com it's completely free to sign up completely free to use for individuals for just about everything that you need and once you're in here you're just going to drag your your image in and we can start kind of cutting it out before I actually do this this cut on this piece you can kind of see what we're going for here so I'm just cutting out the mountains and then we're going to export both of these separately we're going to layer them right on top of each other and then we're going to move them at different speeds and it's going to create this effect that we're looking for to actually do this cut again if you're you know good in Photoshop or something like that it's probably gonna be a lot easier than trying to do it in here because it's pretty tedious but I wanted to make sure I do this with something that's free to actually do this cut though just come up to this little pen icon up here on the top left click on that and you can just kind of zoom into the far left and start drawing a line around your shapes you don't need to be be perfect with this just kind of get as close as you can like really what I'm doing right now is probably about as close as I got for my example if you have something that's a more detailed example with a bunch of little trees and stuff obviously got to do a little bit of a better job but this is a pretty rough shape so you don't need to be perfect I'm not going to go ahead and do this whole thing uh because I've already done it and it takes like 30 minutes to actually do it perfectly but I'll just show you essentially the steps after that so if I zoom out a little bit here we're just going to do a rough shape like this click click click whatever I'm just gonna go all the way out because I don't wanna I don't want to make this take too long but pretend you know you're you're being careful with it and really cutting out your shape really well once you're done like once you get all the way to the far right just click as far right on that as you can try to get right on that last pixel go from there all the way up to the top so that's going to be like this top right corner then you're gonna go all the way over to the left and go to the top left corner right there and then back down to where you started you'll see once you hover this little cursor over wherever you started it's going to kind of change the cursor a little bit that means it's going to join that path together and now you should be free from drawing any lines uh once you're free from drawing any lines you can come back up to this move tool I'm going to turn this shape into I'm going to add some fill so you can actually see the difference so that's kind of what our shape looks like that we just drew obviously a uh a beautiful path that I've drawn here but if you have something that looks like this and you're you're happy with your cut you can kind of go through if you're not happy with it once you add some fill and adjust the points if you want uh but yeah so once you're ready you got something like this all you have to do is go ahead and grab both of these just kind of take your cursor drag it over both of them come to this little double squares thing up here at the top and click I believe it's intersect selection Oh wrong one no subtract selection there we go it's going to do this cut for you so now you'll see that all we have in this image is my super super rough outline of these mountains the one thing we want to make sure of though I'm going to go back a couple of steps here and we'll actually just look at the example that I already have actually just delete this Vector here there we go so back to just my normal image looking at my actual example here uh it's gonna look something like this so once you once you select or subtracted your selections you'll see that the size of the kind of image that remains is not scaled to the size of the original image it's scaled to the size of your cutout you want to make sure whenever you export this that you're exporting it at the exact same size as your original image because we're gonna have to be layering these directly on top of each other so what I'll do to do that is I'll just make a rectangle so you see this rectangle over here on the left I've grouped it along with this uh whole group that includes the cutout image if I add some opacity to this I've got 100 and then maybe make this black so you can really see it I've essentially just added a background rectangle that is the size of our full image so that whenever I export this they're going to export at the exact same size just make sure that whenever you actually go to export it the same way that I had it a second ago you just take that opacity and turn it down to zero percent so you'll have that opacity once you're actually ready to export though just click on these right here I've named mine so whatever you have the name over here like I've named this image bottom and the other one is image full Ubuntu ready to export just click on it scroll down on the right section down to export and you can just export this as a PNG I've already done that so we can jump over to our code editor now and I'll show you to how to actually make this effect taking a look over at our code I've already scaffolded it out a little bit of what we're going to be using but I don't have any of our actual component in here yet just some other stuff to kind of make this look good so I'm using next JS if you're using great react app or whatever else you might have to adjust the layout a little bit but you definitely want to adjust the actual component if you want to match exactly how I have this this file that I'm in right now this index.tsx file is essentially our home route file and in here I have our component imported and being used for where I'm going to implement all of that logic as well as just some extra stuff down here to fill up some space so we have some somewhere to scroll to essentially over on the left in my public directory so this is like my static assets directory I've added in our two images the one with the complete crop you can see it as the transparency on the top and this other one with the entire image which is going to be our background now that I have all of this in place I can come over and I can start actually creating our component here all that I have to start is this wrapping div and the first thing I want to do is actually set this to be the size of the screen so I'm using till and CSS like I said all of these class names should be pretty self-explanatory if you're wanting to use normal CSS there's nothing fancy about Tailwind CSS if you're just using normal CSS class names just look at these class names you should be able to see essentially what they do but yeah like I said all that I'm doing is I'm setting this to the size of the screen so starting with with full height screen I guess the more important part here is this position relative the reason that we have this is we're going to have our images absolutely positioned within this element so we need this so that they set to the element and not the screen other than that we're really just doing grid with the place item Center so that we can add this text to the center because the text is not going to be absolutely positioned we can go ahead and add in that text now as well it's just going to be an H1 tag and the only real important part about about this besides the basic styling here is that I've also set this as a position relative and I've set a z index of 10 to this H1 tag the reason I'm setting this to 10 is because the background image is going to have a z index of 0 and the foreground image is going to have a z index of 20. I want this Parallax text right here with this H1 to be sandwiched in between those two layers uh thus why I have this index of 10 and then the images around that so go ahead and add in the images I'm going to just undo that show you how those work both of these are exactly the same more or less so they're both absolutely positioned I'm just using a background image on a div putting those to a position of bottom so that we always make sure that we have the mountains at the bottom like actually in the screen background size cover so it covers the entire screen and then like I said uh Z index of zero and Z index of 20 so they sandwich around this H1 this inset of zero if you haven't used inset before is essentially the exact same thing as saying top zero left zero bottom zero and right zero it's just a shorthand for that uh so essentially we're just saying hey make this absolute position to the element and then fill the entire element with this element uh element A lot of times what if we save that now we should see that we have a static version of what we're looking for so text in the middle of the screen we have two images you should not be able to see any of the difference in the two images so we just have a foreground sitting directly on top of our background it should just look like one consistent image as you scroll down to actually start adding in this animation the first thing I'm going to need is a stored reference to our wrapping div and the reason that we need this is because we're going to use the use scroll Hook from frame motion to track the Y progress of this element so what we want to actually know is how far down the screen this element so from the very top to the bottom of this box we have scrolled we want to know hey from right here this means we're all the way scrolled all the way through the element and all the way up here we're all the way at the top of the element so we're just passing in this target ref and then we're passing in this offset array like this this offset array here is going to Define exactly how and when we start triggering this animation so we want this to start when the start of our viewport meets with the start of the element and we want it to end when the start of our viewport meets with the end of our element down here and that is essentially what this means in shorthand it's a little bit confusing the easiest way that I have come to understood exactly how this works is just by changing these around and seeing how it changes my animation to be honest I still got to do that sometimes but if you have a hero section like this and you're doing this exact same effect you can just know that it's going to be start start and start now what that's actually going to return is a handful of different values regarding where you're scrolled on the page with this element the one that we want is scroll y progress this is going to give us a value between 0 and 1 where 0 means you are all the way at the beginning of this animation or the all the way at the beginning of this element like right here and one means you're all the way down to the end of this element now just a value between 0 to 1 is not particularly useful for us for this animation without the use of the use transform hook which also comes from frame or motion the use transform Hook is just going to take in our value and as the first argument and then the second argument is where in that value that we're passing in we want to map from and then the third is what we want to map to so like I said scroll why progress is going to go from 0 to 1 thus the 0 to 1 here and we want to map at zero we want to be at zero percent and one we want to be 100 for this value that I'm using right here so you know if we're right in the middle of this if we're at 0.5 with the scroll y progress then the value that's actually going to be returned will be 50 I've defined two of these so one of them is a background Y is what I'm calling it the other one's text Y what these are is just a y translate that we're going to apply to our different elements for this first one is going to be our background image going from a zero to a 100 translate on this is essentially going to make it look like it's sitting in the exact same spot like it's never moving and the text Y is going to make it look like it's kind of going down and shifting down behind the mountains as we scroll that might be a little bit confusing so we can go ahead and just actually apply those I'm going to need this motion component which comes from frame remotion and what that's going to allow us to do is to turn this div in this H1 into a motion dot H1 and emotion.diff with this we can actually just pass in our motion values which is the return values of these used transform directly to the style uh of each of these components so for my H1 I'm passing in that text y translate and for our motion.div I'm passing in our background why translate and that is essentially all that you have to do so now we'll see as I start to scroll the background image looks like it's kind of staying in the same place and The Parallax text is scrolling just a little bit scroll slower than the rest of the page as it translates down and slowly gets hidden down behind those mountains like that and that is going to be it for this tutorial if you got anything out of this I would super appreciate a like and a subscribe it helps me a lot again if you're interested in the dev portfolios those will be down in my description that's gonna be it for this one guys I will see you guys next time peace

Channel: Tom Is Loading

Views: 23,926

Keywords:

Id: 29UWA-GdA7k

Length: 12min 45sec (765 seconds)

Published: Tue Jun 20 2023