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-velocity/

🔗 My Links
TikTok: https://www.tiktok.com/@tomisloading
Instagram: https://www.instagram.com/tomisloading/
GitHub: https://github.com/TomIsLoading
Twitter: https://twitter.com/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

Тэги:

#tailwindcss #tailwind_css_full_course #web_development #javascript_animations #awwwards

Скачать видео