Build Smooth Scrolling Parallax Effects with React & Framer Motion
Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev
Today we'll learn how to add smooth scrolling parallax effects to your React applications using Framer Motion, TailwindCSS, and Lenis. Often referred to as Locomotive Scroll after the package that made it popular, this effect can be found on most, if not ALL, of Awwwards "site of the day" winning websites.
📚 Project Links
Code: https://www.hover.dev/components/heros
Lenis: https://github.com/darkroomengineerin...
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: https://github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: https://linktr.ee/tomisloading
Portfolio templates: https://tomisloading.gumroad.com/
Website: https://www.hover.dev
Timeline:
0:00 - Introduction
0:29 - Project overview
2:18 - Clip path background parallax effect
16:33 - Overlay image parallax
27:35 - In view scroll animations
30:05 - Adding Lenis
Watch video Build Smooth Scrolling Parallax Effects with React & Framer Motion online without registration, duration hours minute second in high quality. This video was added by user Tom Is Loading 07 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 10,479 once and liked it 452 people.