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
Смотрите видео Build Smooth Scrolling Parallax Effects with React & Framer Motion онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Tom Is Loading 07 Август 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 10,479 раз и оно понравилось 452 людям.