Mouse Hover Tilt Card Effect || React, Framer Motion & Tailwind CSS
Tom Is Loading Tom Is Loading
23.5K subscribers
14,193 views
311

 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

show more

Share/Embed