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
Смотрите видео The Most Overlooked Framer Motion Hook is DOPE онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Tom Is Loading 30 Август 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 4,688 раз и оно понравилось 284 людям.