Hide Navigation on Page Scroll || Framer Motion useMotionValueEvent
Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev
You know how you LOVE it whenever you're trying to just read an article on your phone/computer and half of the screen is taken up by the navigation?
Yea.
That's annoying.
This is exactly why many content sites, and even most phone operating systems, choose to hide any sort of navigation when they believe you're interacting with the page, for example while you're scrolling down!
Scrolling back up generally shows the navigation again as the user can now be thought of as disengaging from the content, thus they might want to check out another page of the site.
Today we'll learn how to implement this exact feature using React and Framer Motion, in the process learning about the useScroll hook and the useMotionValueEvent hook
🔗 My Links
My website (animated UI components for React): https://www.hover.dev
Dev portfolio templates: https://tomisloading.gumroad.com/
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: https://github.com/TomIsLoading
Twitter: / tomisloading
Смотрите видео Hide Navigation on Page Scroll || Framer Motion useMotionValueEvent онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Tom Is Loading 31 Август 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 14,358 раз и оно понравилось 589 людям.