Published On Nov 1, 2023
Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev
Today we'll learn how we can create a tilt effect when you hover over an element using ReactJS, TailwindCSS and Framer Motion. We'll learn about the useMotionValue hook, the useSpring hook, and the useTransform hook in the process!
🔗 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
0:00 - Introduction
1:22 - Markup with TailwindCSS
6:46 - onMouseMove listener
13:16 - Store position with useMotionValue
14:34 - Add easing with useSpring
16:47 - Apply effect with useTransform