The Most Overlooked Framer Motion Hook is DOPE
Framer Motion course waitlist ✨ https://www.blast.dev
Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev
So Framer Motion has this hook called "useVelocity". I've seen it in their docs, but never really taken the time to play with it. That was until I found the PERFECT animation for this effect while scrolling Awwwards the other day. Today we're going to check out how it works!
📚 Project Links
Source code: https://www.hover.dev/components/text
Inspo: https://play.makemepulse.com/
Docs: https://www.framer.com/motion/use-vel...
🔗 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/
Timeline:
0:00 - Introduction
1:03 - Basic layout stuff
3:43 - Setting up the scroll listener
5:02 - Setting up the useVelocity hook
6:01 - Adding our skew animation
7:37 - Adding spring physics
8:26 - Adding our translate animation & polish
Watch video The Most Overlooked Framer Motion Hook is DOPE online without registration, duration hours minute second in high quality. This video was added by user Tom Is Loading 30 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,688 once and liked it 284 people.