Horizontal Scrolling Animation with React and Framer Motion
Tom Is Loading Tom Is Loading
19.3K subscribers
55,473 views
0

 Published On Aug 15, 2023

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://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: https://www.hover.dev/components/caro...

🔗 My Links
TikTok:   / tomisloading  
Instagram:   / tomisloading  
GitHub: https://github.com/TomIsLoading
Twitter:   / tomisloading  

show more

Share/Embed