How to Make a Zoom Parallax using Next.js and Framer Motion

I want to take a look at another paralax animation and to have this effect all you have to do is scale a bunch of images on scroll it's deceptively easy to do and the result is quite nice if you ask me and that's because there is one secret animation technique that's hidden in this animation I'm going to use next J and Fir motion to remake this and hopefully I can redo this under 5 or 10 minutes and as always there is the live demo and the source code in the description below all right guys I have a very basic nexj application here I've created the basics here in my page.js I have a component Zoom Parallax that I've created here and I have my component here it's empty for now and I've statically imported a bunch of images here perfect to start this tutorial and that's basically what I want to recreate now and I'm going to start by abstracting all of the images and I'm going to start with the first image which is the middle one and the concept here is I'm going to have a scroller of about 300 VIP height so a div of 300 VI height and I'm going to have another sticky div inside of it and then I'm going to have an image at the middle and I'm going to scale it it on scroll and so it should look like this we have a div that's in position sticky it's going to hit the top of the main container it's going to stick as it sticks I'm going to scale the main image that's in the middle I'm going to scale it until it reaches the full height and full width and then that should be at the end of the sticky container and then it's going to unstick and then we can continue scrolling on the website and so here's how we can do this I'm going to have a div I'm going to call it like the container inside of that container I'm going to have another div which I'm going to call the sticky and those are the essentials have a sticky container so I'm going to go into styling here specify the container should have a height of 300 viewport height it should be in position relative the sticky container inside of it is going to be in position sticky with a top of zero pixel and it's going to basically stick to that container which is in position relative and then I can give it a height of 100 viewp height a background color of like orange and so we should have something like this we have a sticky container which is orange inside the main container and here I'm scrolling and it's just sticky all the way through and then all I have to do is add some margin to the body at the top and at the bottom so we can actually see the sticky going on so I'm going to go into globals I'll do margin top 50 viewport height and margin bottom 100 viewport height and so you're going to see that the sticky container here enters the viewport boom it sticks and then for 300p height it sticks and at the end here it un sticks for us to see the rest of the website and so with that we have a sticky container that sticks for 300 V height and now I'll add the first image which is the middle image here so for that I'm just going to create a division here I'm going to call it an element and inside of it I'm going to have another div that I'm going to call the image container and then I can initialize a next image give it as a source the first picture I'm going to do fill alt just image and I'm also going to do placeholder blur and that's why I statically imported the images because now when I do placeholder blur next J will render a small blurry version of our image while the main Big Image is loading and so that's just the detail you don't have to do this but it's a good practice and so I'm going to save that go back into styling and here I'm going to mention that my element is going to take the full width and full height of that sticky container now I'm also going to put it in position absolute with a top zero and then the image container inside of it is basically this guy here I'm going to give it a width of 25 U width a height of 25 U height in a position relative we need to put it in position relative because it's a next image and then the image inside of it I'm going to do object fit cover and that way we have the image take the full cover of its main container so I'm going to save this and we should have something like this and now I want it to be at the middle right centered here so what I can do for that is do display Flex align item Center justify content Center and so we should have something like this I'm going to scroll we have the image in the middle and then it's going to reach the bottom and it goes away and so now that's good we have the base structure all we have to do is scale that image while we're scrolling so now to track the progress of the scroll I'm going to use the use scroll Hook from fir motion which is going to return me a scroll y progress value which is a value between zero and one it needs a Target which is going to be a container and it needs an offset so I'm going to go quick over this if you're looking for the details on how to do this check out this video where I go into the details of what's Happening Here and so for the Target I'm going to create a container it's going to be a reference and what I want to track here is the main container which has a height of 300 VIP height and now for the offset I want to track when the top of the container reaches the top of the window and so that's going to be start start and I want to track it until it reaches here at the bottom bottom of the container and the bottom of the window and so that's end end and then I can have a scale value I'm going to call it scale four it's going to be equal to the Ed transform hook I'm going to transform the scroll wi progress which is value between zero and one into a new value between zero and four and so that's why I call it scale four because it's going to be a scale four and the reason why I chose scale four is because our image here takes 25 dup width 25 dup height and so if I multiply it by four then it's going to take 100 V birth width 100 V bir height and so now I can just import the motion here grab the motion put it in front of the image container and I'm going to do style scale is the scale 4 and I'm going to save this and now I have an error it's basically because I'm using a bunch of hooks and so I need to specify that I am on the client here and then here I need to import the user F Hook from react so I'm going to import user F from react and so we should have something like this I'm going to scroll and we should have the image scaling to 100 report width and 100 D height boom and then it unsticks and this is looking pretty good now I made a bit of a mistake at the beginning it's a scale zero which is not good I want to have a scale one so I'm going to change that value here and so now it's a scale one at the beginning and now it scales up to four and that looks pretty good and so now we've basically remade that effect of the middle image here which is that one here and so now for the other images it's going to be the same exact thing but it's going to have a different scale and a different position for the images so to be efficient I'm going to create an array of images and I'm just going to map it and return all of the images at a certain position based on some CSS properties so like I said different scale properties so I'm going to copy that and I'm going to create a bunch of different scales so I'm going to have scale five scale six eight and nine so I'm going to have five six 8 and n and so here I'm doing 5 6 8 and n and the reason why I'm creating a bunch of different scaling values is because you can see that the images here seems to not be scaling at the same speed and that's what gives it like its Parallax and like perspective effect is because the scaling are different so for example this one is scaling by four and this one is scaling by probably nine that's why it's moving away really fast and so it gives this sense of perspective and then like I said I want to be efficient so I'm going to create a pictures array that I'll be able to map to return my Js X so I'm going to have a bunch of object with a source that's going to be the picture that I statically imported here and it's also going to have a scale value and then I can choose my scale four for the first image and I'm going to copy paste that and here I have seven images I'm going to copy that by seven and so I'm just going to change the source here 3 four five six 7 and for now I'll just keep the scale four so you'll see how it looks if it has the same scale and then I'll adjust the scaling and you'll see and so now that I have this efficient structure I can then come here and I can map my array of pictures I'm going to have the picture the index and here I'm going to return this here and from the picture I can actually deconstruct it to have access to the source and the scale value and I'm going to give the source to the image and the scale as the animation and as always I need to add a key so that react can differentiate the different elements and we should have something like this now all the images are stacked on top of each others at the same spot because of my CSS here right it's in position absolute aligned in the Middle with a width of 25 U width height of 25 U height so they're all stocked on top of each other here now all I have to do is change the position of each image so I'm going to give a different top and left value to basically have a nice layout and so I've skipped the part where I do this because it's very timec consuming and it's not complicated it's just about finding the right values and so you can see that my second image here I've chosen a top and a left value everything in viewport height and in viewport width so that it's responsive and then I give a certain width and a certain height and I do the same thing for all of my images so nothing too complicated here and I should have something like this a nice grid and so we can actually see what we have as a result I'm going to scroll this and it looks like something like this which is kind of wild and then it Scrolls it's kind of a mess here but yeah that's not really the result that I want to have if I take a look at this this looks really really nice compared to this and that's when the secret technique comes into play how can we have something that looks like this into something that looks like this and it's actually really really easy the first thing I want to do here is at the end of the scroll I'm seeing the images go outside of my orange section which is the sticky section So to avoid that I'm going to go into the styling and I'm just going to specify an overflow hidden and now you're going to see that it's getting cut here which is exactly what I want and that's the first step and now we can see that all of the images are getting scaled by four and they're actually getting scaled from their current position and so that's why everything is overlapping on top of each other it's kind of a cool effect if you ask me it's not ugly but it's not what I'm looking for here what I want is for them to scale but I want to keep my grid intact I don't want them to start overlapping on top of each other like that I just want them to scale and keep the layout that I gave them and so to do that I'm going to take a look at my structure here and I have a div which is an image container which is what I styled here with a certain width and a certain height for each one of them and its parent is an element and that element has a width and height of 100% and a position absolute so if I take a look at it you're going to see that every single image has a parent called element and it's taking the full height and the full width of the container and so we can actually scale that parent instead of scaling the image container and that way all of them will scale from the same size and the same position and it's going to keep the layout so I'm going to show you that I'm going to remove the motion from the image container and put it into the parent instead and I'm going to move the scaling as well and now if I try this I'm going to scroll and you're going to see that now everything is scaling from its current position and it's keeping the layouts intact instead of overlapping on top of each other like we had before and that's the secret trick we need to scale the parent which has a width and a height of 100% and a position absolute since they now all are scaling from the same reference right they're scaling from the same width the same height and the same position instead of scaling the image container which has all different sizes and position and that's why it's keeping the layout the grid that I created now all we have to do is change the scaling values to actually have something that looks a bit more natural now it's kind of cool Stills but we could make this even better by basically giving different scales to all of the images and and so we would have something like this which is even more cool so with the structure we had we can actually do this very easily by simply changing the scaling of all of our images here and so I can do like scale five scale six and now this is just some fine tuning things you need to find the right values to have the effect that you're looking for but my own personal taste is something like this and then this goes to 6 8 and N I believe something like this are is the right scale for for the look that I'm looking for but really you can fine-tune this yourself and have your own effect and so if I save this I'm going to refresh and now we have this nice Parallax Zoom effect which is really cool and really simple for the amount of code that I have here which is really minimal and so the last thing I'm going to do is just remove the orange and then I'll just go inside of the roots of the page and I'll add a smooth scroll here so I'm just going to import the lenis scroll and I'll have a use effect initialized when the component mounts and then I have the basic lenice directives here and I can remove the event something like this and then just specify that I am on the client and we should have the final effect here I'm going to scroll we have a nice smooth scroll a nice Parallax and then this sticks and then it goes at the bottom really nice and so yeah that was basically it for this video The Secret animation technique is to know how to scale you want to scale the parent or basically elements that have the same size if you want to keep the layout the same size in the same positioning and for that you can just create a parent with a width of 100% height of 100% and you could have something that looks really nice like this so yeah if you like the video leave a like subscribe and I'll see you in the next one bye

Channel: Olivier Larose

Views: 19,077

Keywords:

Id: pEt0eiArTSg

Length: 13min 12sec (792 seconds)

Published: Wed Jan 31 2024