Build a Smooth Parallax Scroll with Framer Motion, Lenis Scroll, Nextjs

hey guys welcome back in the past couple of days I've been working on this Parallax animation because I truly believe these types of animations are great basically they're versatile you can use them for a corporate project or a more artistic one and they work in Mobile in the end I believe they are an essential tool for any creative developer So today we're taking a look at this animation I'll make this using next just frame of motion and the Lennon scroll alright so here I have a very basic nextges project I have a bunch of images here inside of an array that corresponds to all of the images inside of the public folder here and I'm going to use that to create the gallery and so the first thing I want to do here is create like the basic HTML and CSS layout so for the basic layout I start by creating an inner component called column that takes an array of images as parameters and that column then Returns the images with the container and a next image and then I simply copy paste that column inside of a gallery div inside of the page.js component and we should have something like this a very basic layout I have four columns here with three images inside each one of them and all of that is inside of the gallery and with that we can start working talking on The Styling I'm gonna go real quick over this to show you guys how we can create like a nice layout so what we have here is a gallery inside of the gallery we have a bunch of column inside of the column we have a bunch of image container that contains images so the first thing we can do is give a height of like 175 viewport height to the gallery and we can also give it a certain background color and then to position the column I'm going to put it in display Flex Flex Direction colon with like a gap of two keyboard width and I'm also going to give it a padding of two viewport width and for the Box sizing I'm gonna do border box and the colon will have a width of 25 so we have four columns so 25 each a height of 100 also a display Flex a flex Direction column and the gallery here the flex direction should be row not column and we're still not seeing any changes here that's because the next image is taking the full height and the full width until we give its container a position relative so I'm gonna go in the image container here and give it a width of 100 height of 100 and position relative and the first thing I'm seeing here is in the column I'm going to add some gap of two of your width as well and then here the image are kind of getting like crammed up here so what I can do is do object fit cover and all that makes more sense and I'll also give it a Min width of like 250 so it doesn't get like too skinny and lastly I see some margin here I think it's on the body so I'm just gonna go in the globals here and do body margin 0 pixels so that looks pretty good last thing here I'm gonna do a border radius of one viewport width with an overflow hidden on the image container and now we have like this nice rounded look and I'm pretty good with that now we have a gallery and we can start animating this using framework motion so we're going to use two hooks from frame of motion to create The Parallax Effect one of them is the use transform and we're also going to use the use scroll and I'll specify that we are on the client here to start using those hooks so the first thing I want to do here is track the scroll so what we can do is create a reference for the main container so I'm going to use the ReUse ref Hook from react and I'm going to give that container here to the gallery and that's basically the section where I want to track the scroll and then I can use the use scroll Hook from frame motion and extract the scroll wide progress which is equal to the U scroll and I can can specify a Target here and then I'm going to give the container if I don't specify a Target like this the use scroll hook will track the progress of the scroll for the entire document and I don't want that I only want to track inside of the gallery so I specify a container for that and then I'll also specify an offset and to understand that a bit better I'm going to add two div here that I'm going to call spacer so I have one on top and one at the bottom of the gallery and I just give them a height of 100 viewport height in the styling and without we have a bit of wiggle room to work on the animation now the offset is basically when I want to start and when I want to stop tracking the scroll so here I basically want to start my animation when the container here enters the view so it's at the top of the container and at the bottom of the window so I can do the start of the container and the end of the window and then when do I want it to stop tracking I want to stop tracking here at the end of the container here so it's at the end of the container and the top of the window so I do end of the container and top of the window like this and here I'm just logging the progress of the scroll to show you guys what we have and when the gallery enters the view it starts at zero and then it's gonna go up to one the end here so now we have a value between 0 and 1 inside of the offset that we specified and so after that we're going to use the use transform hook to transform that progress of the scroll into a y value that we'll use for The Parallax so I could have here a y value that would be equal to the use transform of the scroll y progress and we want to transform the values right we said it's between 0 and 1 the value of the scroll progress we want to transform those values into a value that would range between like 0 and 1000 and then I'll take that y value and I'll give it to the column here to the First Column to show you guys what it looks like and then I add a second parameter to the column I give a default value of 0 and here I import the motion from firmer motion and I just put the motion here in front of the column and then I can add The Styling here and specify the Y that I gave to the First Column and if you try this we can see that we have a column that's moving on scroll and we could increment that value to maybe 2000 just to show you guys and here The Parallax is even stronger right and here it's also going outside of the bounds of the gallery so I'm just going to do an overflow hidden here and now this makes a lot more sense but now this animation is is not smooth so what we can do is add a smooth scroll and for that we're going to use the Linus scroll Library so I'm going to take a look at the documentation here and the first thing we need to do is install the library so here I'm installing the library and then I'll take the import here paste it and I'm also going to copy the basic setup and obviously I can just paste it here I'm going to paste it inside of a use effect hook so that this piece of code only runs when the component mounts and then I can remove this event here I don't need it and now we have a nice smooth scroll and our animation is not smooth so we can do this very easily thank you linen scroll so yeah that's basically the concept here now we created a y value for the First Column and now what we want to do is create a bunch of different y values so four different y values for the four different columns and we want to find like the right values to create a nice Parallax effect but I would also like to have this animation be responsive and so instead of having absolute values here for the translate on the y-axis instead of that I want to use like the height of the window and I cannot do like the window that inner height like this because the window does not exist at first when we use nextges since its server-side so what I have to do here is create a hook I'm going to create a use Dimension hook and from there we can extract the width and the height of the window so here I'm creating the use Dimension hook it contains a state with the dimension of the window and when the client mounts I can update those dimensions and I'll also add an event listener when we resize the window I'll also update those dimensions and then I can simply return those dimensions and here I can extract the height of the window from the use Dimension hook and then instead of having an absolute value here I can use the height and like multiply it by two and we have something that looks like this but of course here it's a bit weird because there's like a huge blank space at first so it doesn't look too good so I'm just gonna go in the CSS here and I'm going to use the solo selector here of end of type I'll specify the first one and I'll do a top minus 45 and I'll also add a position relative to the column so I can actually use that Top Value and if you try this it makes a lot more sense now there's no like weird blank space and there's no like blank space at the bottom too so this looks really good and now I simply need to find the right values for the three other columns I'm going to do both Direction and different speeds so here I'm just copy pasting the values from the use transform I'm creating three other ones with different values and then I go in the CSS and I adjust the Top Value and we can take a look at the final result here we have this nice Parallax and so depending on the multiplier here it goes at a certain speed and at a certain direction and since we use the height of the window I can actually put my window bigger and it also works and it retains like the same speed for different window Dimension and so yeah that's the final result really nice animation love Parallax animations on website I think they're great so if you learned something leave a like subscribe and I'll see you in the next one

Channel: Olivier Larose

Views: 18,999

Keywords:

Id: VhXemORYup8

Length: 7min 36sec (456 seconds)

Published: Sun Aug 06 2023