Horizontal Scrolling Animation with React and Framer Motion

a staple of any awards winning website is the horizontal scroller thingy okay I don't actually know what the name for this is but we're just going to call it horizontal scroller thingy and call it a day this effect is when you take over the user's vertical normal scrolling of a website and translate that into horizontal scrolling whether that be for an image gallery or text or testimonials or whatever it may be tiny bit of react and frame or motion and you'll be driving a brand new Bend in no time that is the Thomas loading guarantee some exceptions apply JavaScript may cause nausea heartburn vomiting imposter syndrome getting made fun of for using JavaScript by entry level rest developers who just made their first hello world application and being extremely handsome and Charming okay let's do it before we code let's look at my super high def illustration here of how this will work the white section is on the top and bottom represent content before and after your actual scrolling section content the purple box is the container of the content that we want to scroll horizontally and the white boxes are the actual content itself the Black Box represents a large wrapping element around our content and the red box is our viewport normally as we scroll up and down the page we would scroll right past our content and nothing would happen to fix this we've dropped our content into this larger section represented by the black box and we're going to set the content to position sticky this way as we scroll down the page our content will stick to the viewport we can then listen to The Scroll progress of the section using the use scroll Hook from framer motion and increase the X translate of our content accordingly once we're at the bottom of the containing div our sticky positioning will stop and we'll just keep scrolling down our Pages normal jumping into our code I've got a bunch of boilerplate stuff out of the way ever react project with frame remotion installed and I'm using Tailwind CSS but I'll make sure to call out the styles by name so that you can do this with normalcss if you'd rather just do that I'm also using typescript personally I cannot work without it but just ignore the typescript stuff if you have income to the dark side yet not super important I have a wrapping component with some placeholder sections for before and after the horizontal scroll section a card component which represents these image cards though this could be literally anything so feel free to use whatever you want for this like a color div would be totally fine this data at the bottom will represent each of my image cards and then most importantly this dummy component that we have right now which is where we'll do all of our actual coding I'll note quickly that all of this code can be copied for free from my website hover.dev under the carousels section both typescript and JavaScript versions are available just hit that little toggle thing in the top right if you're interested there's a bunch of other cool animations and interactions that you can use in your projects but I'll leave that up to you to check out if you so wish to start let's just lay everything out I'll add a section element with a height of 300 viewport height position relative so that our inner element can be sticky to it and a background of this dark gray color inside of this component let's just add another div with a height of screen and a background color of say purple we should now have a screen size purple box with an outer gray box we want to follow our viewport as we scroll down which we can do by setting position sticky and top zero now as we scroll the purple box stays within our view until we reach the bottom of our Outer Gray box let's remove the purple styling keep our position sticky top zero and height then also set display Flex item Center and overflow hidden this centers any elements that are going to be inside of our box vertically and make sure that anything overflowing doesn't cause a horizontal scroll bar we don't currently actually have anything so let's add that I'll add another div add a display of flex and a gap of 16 pixels this is so that I can now map over my data and insert my card components again you can use whatever you want or copy mine from hover.dev if you wish to use the same ones we should be able to see our content now inside of our sticky div scrolling along with the viewport but not yet actually translating left to right now for the fun part let's start by making sure that we've imported use ref from react as well as use scroll and use transform from frame or motion we'll create a refusing use ref and assign it to our section we need this so that we can pass it to the use scroll Hook from frame promotion you scroll will listen as we scroll this ref through the viewport and return to us a scroll y progress variable this variable will have a value of 0 to start and one once we reach the bottom and then some number in between kind of like as we scroll down this on its own is not particularly useful but that's where the used transform hook comes in use transform will take three arguments a motion value so our scroll y progress and array of values to map from and another array of values to map two in this case when scroll y progress has a value of zero I want to turn that into a value of one percent when scroll y progress reaches one I want to turn that into minus 95 and anywhere in between should return the correct value between those two values I picked one percent and negative 95 percent just by playing around with what I thought looks good but you could totally set this to zero percent and 100 if you wanted to start all the way on the left of the page and scroll the content all the way to the right off of the screen it's really just a matter of playing around with it and seeing what looks good in your opinion I'm using percentages here because this value is going to represent how much we want to translate our content on the x-axis but you could just as well turn this into pixel values or other numbers or even map between like two colors if you wanted all we need to do now to actually use this value is to take our content in my case this wrapping div and turn that into a motion.diff add a style prop pass our x value and then scroll to actually see our interaction working that's going to be it for this one if you enjoyed this video a like And subscribe really does go a long way to helping me know that videos like this are helpful

Channel: Tom Is Loading

Views: 54,241

Keywords:

Id: 4ehYkfh7P-I

Length: 4min 54sec (294 seconds)

Published: Tue Aug 15 2023