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
Watch video Hide Navigation on Page Scroll || Framer Motion useMotionValueEvent online without registration, duration hours minute second in high quality. This video was added by user Tom Is Loading 31 August 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 14,358 once and liked it 589 people.