Horizontal Scrolling Animation with React and Framer Motion

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
Today we're going to recreate one of the most popular effects on the web: Transforming vertical scrolling into horizontal scrolling.
Seen in just about every Awwwards website ever, this effect can be recreated with just a few lines of React and Framer Motion code.
We'll create a carousel style component, but this would work just as well with testimonials, text, or entire layouts.
We'll use Tailwind CSS, but all of the animation will be done with JavaScript, so you should be able to follow along just fine with normal CSS :)
📚 Project Links
live version and code: www.hover.dev/components/caro...
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading

[@tomisloading]

Okay i have no idea what happened to the audio in the last like 5 seconds of the video when I uploaded and I can't replace the file, but I promise you it wasn't anything important, just your typical end of video rambling😂😂😂

[@mohaniya15]

The quality of your videos are pretty good tom! Makes me want to increase mine

[@tomisloading]

Haha, don’t worry, I still feel like I have no idea what I’m doing on the video editing side of things 😂😂

[@mirage4731]

This was damn easy to understand, thank you for the video

[@yuktijhawar6729]

Thank you so much for the video... You solved a very major problem of mine

[@mistersir3185]

Bro you're funny and you explained this really well. Thanks!

[@slythespacecat]

Awesome video! Thank you so much

[@AviralTuteja-bp3ho]

I have been stuck on this problem for 3 days, thank you for this video. Turns out I was using fixed instead of sticky.

[@marianakoudela2760]

This is exactly what I needed, thank you!

[@tomisloading]

Happy to help! :)

[@kernelgm]

Thank you, bro! Help me a lot.

[@nushen88]

you just got a sub haha love your humor

[@essenc3189]

thank you for this animation webpage mate

[@tomisloading]

Thank you so much!! 😁

[@blablalagence5013]

Hybrid and Locomotive scrolling are the names of those!

[@davidlintin]

Hey @Tom would love to see a video on how you go about figuring out the animations. I.e the game plan and how you’d approach the solution. Great videos. ✌🏻

[@tomisloading]

That’s a great idea!! I’ll think about that for sure :)

[@tamerahmed9860]

If you make a course about framer motion in react, I will buy it! Please make more projects! Thanks

[@germanpinto883]

Great video 🎉

[@tomisloading]

Thank you! :)

[@taunado]

Thanks

[@gunnercat8045]

althought it is very good, wouldnt it be a problem when there is more item to be added if the transition is on percent?

[@michaelxaviercanonizado7931]

adding more content (Cards) shouldn't cause any issues. The only thing that would change is the speed at which the carousel will move. Since the height of the large container (h-[300vh]) is being distributed amongst the width of the Cards container. There shouldn't be any problem. Just increase the large container size to vary the speed

[@lazimmv]

Can we just make div flex row and overflow y hidden?

[@feastofsteven1214]

Great video man, thanks! One thing I've had trouble with, and I've tried it every which way --- I cannot for the life of me get the background image to display through the URL. To clarify: I'm using jsx, I copied the javascript code from your site, and I'm pulling my images from an 'img' folder inside the 'src' folder. I've tried using ./ and ../ because sometimes I need to go up a directory or two for it to find it, but that hasn't worked. I even tried moving the images to the public folder to see if it worked, still nothing. I know I'm missing something simple, but can't figure what? Do I need to import the images if they are local or something? Any help is greatly appreciated, thanks!

[@CeezGeez]

noice

[@AlbertoLeo_]

Can it works with videos instead of card (images)?

[@djimenezweb]

Someone having overflow issues? I'm trying to replicate this effect using Next.js 14.1.1 and Tailwind 3.3.0 and the carousel element keeps overflowing. Not only it overflows, but it is causing all the parent elements, including body and html, to be wider than they should! I've tried every possible combination of overflow-hidden, overflow-x-hidden, overflow-clip... It's driving me nuts! Any ideas? PS: SOLVED! It turns out that my grid layout was the cause. I had grid-template-rows: 1fr auto 1fr and forgot to declare grid-template-columns.

[@Ven0mHQ]

How could I center an element when the user stop scrolling?

[@divadolleh]

Do you have a vertical version that could guide us?

[@aburex705]

Great job❤ Is there anyway I can find the design animation of the horizontal scroll thing on framer or figma?

[@tomisloading]

Thank you! Unfortunately I’m not sure, I don’t have anything I could provide personally but there might be something similar around somewhere 🤷🏼‍♂️

[@wizardfed1221]

How would you fix so that when it reaches the end its equal to the left side black space, ive tried different % values but in different sized screens the values becomes wrong and parts of the last cards gets hidden

[@whatyoumissed9994]

use view port instead of pixels, view port is relative to the window unlike pixel that is absolute

[@whatyoumissed9994]

here is a code sample , i hope you are good with math, you get to use equations of a line to map two diffrent point which is the screen size and the view port const ref = useRef(); const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"], }); const [screenWidth, setScreenWidth] = useState( typeof window !== "undefined" ? window.innerWidth : 0 ); useEffect(() => { if (typeof window !== "undefined") { const updateScreenWidth = () => { setScreenWidth(window.innerWidth); }; window.addEventListener("resize", updateScreenWidth); return () => { window.removeEventListener("resize", updateScreenWidth); }; } }, []); function calculateSecondValue(window) { //this equation is a gradient equation y=mx+c adjust it with your points for smallest screen and largest screen return `-${-0.31 * window + 555}vw`; } const x = useTransform( scrollYProgress, [0, 1], ["0vw", calculateSecondValue(screenWidth)] );

[@kennedyfreitas7548]

just want to say, i visited your website and it' pretty cool,

[@tomisloading]

Thank you!! Working really hard on it haha :)

[@knvsf2829]

@@tomisloading it definitely shows, I’m even planning on getting getting the lifetime subscription (which seems reasonable in pricing )

[@tomisloading]

@@knvsf2829 that’s awesome!! 😁😁 it’s my main focus right now outside of work. Plan to 5-10x the number of components + have some other tools I want to build and include :)

[@knvsf2829]

@@tomisloading truly an amazing concept you’ve built man, excited to see the growth

[@tomisloading]

@@knvsf2829 thank you for the kind words, it’s genuinely extremely motivating hearing great feedback like this 😭😁

[@krims254]

hi, awesome little component, im stuck on one thing. On useTransform i start with 0% and i want to end the scroll animation when it reaches basically the very end div. using -% is not the outcome im looking for. another thing is why did you use 300vh and not 100vh for example? help would be appreciated.

[@tomisloading]

Not exactly understanding what your intended use case is, but I CAN answer the second question. The 300vh is because the wrapping div needs room to sticky scroll through the viewport. At 100vh, you'd scroll right past it since the inner div is also set to 100vh. Hope that helps! :)

[@krims254]

​@@tomisloading thanks for answering the 2nd question. Its a bit difficult describing the problem for the first question. non the less thanks.

[@riteshmaharjan7011]

Hi, I am following your video to make my project but i am not running through all the projects. Basically this is what i have: const scaleProgress = useTransform(scrollYProgress, [0, 1], ["1%", "-100%"]); This is for the horizontal scroll to view all my projects but it doesnt go through all of it. This is what i have for my container it should increase the size of the scroll but it's not working as intended so i am not sure what to do. Any help would be appreciated. Thanks

[@lukasgerhold7822]

Your issue is that its not the section thats the motion element (at least in his example) but rather the div containing the images

[@lucaapa]

i want to do it vertical but i cant, just by chance you dosent have a vertical example? i've tried but candt doit

[@tomisloading]

Hmm, what exactly do you mean by vertical? Could you explain the desired outcome a bit more?

[@giovannimh]

scrollYprogress does not update somehow. When I console.log current value stays on 0.

[@tomisloading]

You won’t see updates by directly logging out scrollYProfress as it’s a MotionValue. You can see the latest value by passing it to the useMotionValueEvent and logging that value out :)

[@BKBees]

This feature doesn't seem to work properly on mobile. Any ideas as to why?

[@tomisloading]

Hmm, it should! If you take a look at the version on my website on mobile it should work as expected. Could also be a specific browser/version issue?

[@BKBees]

The issue seems to be that it doesn't start the horizontal scroll until the items are already past the viewport. When you're scrolling up it works. And mind you, it works perfectly on desktop, scrolling up and down.

[@mauiboss5242]

@@BKBees did you find a fix or an alternative?

[@amansoni8670]

i want to do snap with each cards how to do that

[@amansoni8670]

btw great content keep going

[@IsebellaStone]

I dont know how to add this code my framer project can u help me?

[@tomisloading]

Hi! Unfortunately I’m not an expert on framer as a platform. I believe it would be possible with their “overrides” feature but I wouldn’t be able to help much beyond that :(

[@IsebellaStone]

@@tomisloading no no ı want use this in framer how can use where ı need to paste this code on framer pls help me

[@divyanshrana4257]

you were suppose to make videos on how you made your website on framer...where are the videos.

[@tomisloading]

Framer motion my friend, not Framer itself! 👍