Mouse Hover Tilt Card Effect || React, Framer Motion & Tailwind CSS

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ 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: github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: linktr.ee/tomisloading
Portfolio templates: tomisloading.gumroad.com/
Website: 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

[@tomisloading]

IMPORTANT NOTE!!
It looks like that as of my writing this comment (Framer Motion version 11.0.3) there's a bug causing the implementation explained in this video to glitch out a bit. I assume this will be patched sooner than later, but if it isn't when you watch this, I've got a stable version of the code in the link in the description!

[@thenonameboy3073]

In Google Chrome when you open up the dev menu and hover over the card it starts flipping around like crazy. Any solutions to this? It is also happening on safari sometimes when i mark the text inside of the card

[@tamerahmed9860]

Amazing like always; thank you

[@collinsk8754]

Excellent tutorial 👍👍!

[@togya4]

"So three hooks in one video, YoU aRe WeLcOmE" got me so bad 😂😂😂😂😂😂😂😂😂😂🤣🤣🤣🤣

[@Kaviarasu_NS]

Thanks for tutorial ❤

[@tomisloading]

Happy I can help! :)

[@mainakmukhrjee6328]

amazing tutorial sir!

[@tomisloading]

Thank you! :)

[@VELIXYZ]

Awesome video ❤

[@tomisloading]

Thank you!! :)

[@auronvila1069]

Amazing tutorial provide us with more series PLZ

[@tomisloading]

Thank you! If people keep enjoying them, I’ll keep doing them 😁

[@prashlovessamosa]

Thanks for sharing.

[@tomisloading]

Thank you for watching! :)

[@urmom0x]

Link two is CODROPS!

[@ronitgurjar5747]

🔥🔥🔥GG🔥🔥🔥

[@harshitpant07]

instead of applying all hooks once and then show the result you should instead add one hook at a time and show what change does it bring

[@tomisloading]

Thanks for the feedback! I’ll try to take it a bit more “one step at a time” on the next one 👌

[@studyafa7159]

​@@tomisloadingthanks 👍😊

[@NuanceWebsites]

Framer Motion paid course?

[@tomisloading]

I’ll probably do a super in depth course sooner than later, no timeline on that now though!

[@studyafa7159]

😂😂 0:01 my face again