Hide Navigation on Page Scroll || Framer Motion useMotionValueEvent

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ 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): www.hover.dev
Dev portfolio templates: tomisloading.gumroad.com/
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading

[@johnemmerechts3769]

For typescript users, previous can be undefined (MotionValue.getPrevious(): number | undefined) First check if previous is defined : if (previous && latest > previous && latest > 150) { Thanks for the tuto :)

[@sportseye7422]

Greatt greatt, I really like the easy and clear way that you explain. Keep it up.

[@mdrifat6941]

I am a Junior Web Developer and currently trying to learn what it takes to be an intermediate or senior one. For this reason, started exploring different animation libraries and selected Framer Motion for it. To sharpen the fundamentals, saw some tutorials and loved yours the most. So I have a request to you. Please make a playlist of Framer Motion where you will cover all the topics to understand from the basics to the advanced. Hope you will keep my request.

[@tomisloading]

Hey!! Thank you so much!! I have some videos planned to go deeper into the specifics which I’ll absolutely get to soon :) thanks for the input, I genuinely appreciate it 😁😁

[@maciejmyslinski7820]

Amazing work! Thanks a lot for this content.

[@pikusionexio]

It really is that easy, huh? Thank you for the quick tutorial, much appreciated!

[@tomisloading]

Happy it helps! :)

[@Adventures_English]

Fantastic video thanks a ton. New fan

[@s4chin_verma]

Amazing video sir it helps me a lot in my portfolio website

[@janira98]

Yah that was the one I was looking for 👌

[@nathannelson5645]

Appreciate this FREE knowledge bro!

[@tomisloading]

Happy I can help! :)

[@usamariaz3765]

Amazing thank you keep providing us great content 🤩🤩🎉

[@tomisloading]

Thank you!!! I’ll try my best haha 😁😁😁

[@wibbs88]

Works great - Thanks! However when I add a Hero with absolute position (top-0) I find the scroll up only reveals the nav for the screen height - If i scroll way down then back up it doesn't appear. If I remove the absolute positioning from the hero image then it works fine.

[@es20x]

great tutor ❤

[@katerinadesrosiers]

Thank u!!

[@developedbymighty]

Amazing tutorial

[@tomisloading]

Thank you! :)

[@gaborlakatos882]

Nice

[@Equilibrium543]

Great Video

[@tomisloading]

Thank you!! :)

[@honefone]

niceee

[@studyafa7159]

Great

[@elmiur]

Just do it in plain js or using useEffect with react, framer motion is an over kill.

[@ChandanKumar-ps3cz]

Awsommmmmmmmmm

[@user-vk8ri5ks5c]

I tried to break this out into a component like and just pass children through, but then the animation stops working, only the show and hiding works but it's very abrupt. Do you know why this happens and how to fix it?

[@user-vk8ri5ks5c]

Nevermind I must have messed up the first time I tried, I got it working!

[@katerinadesrosiers]

I found the tutorial super easy! But the part of latest > 150 doesn't work as it should, with or without it, the nav appears at the same delay :(

[@RishiKasyap]

that only works when it is at the top, 150 is the distance from the top

[@navinkumarsahu1159]

great

[@tomisloading]

Thank you!

[@izusaE]

Which is your version of framer-motion in your package.json ? I have this error with useMotionValueEvent : "framer-motion"' has no exported member named 'useMotionValueEvent'. Did you mean 'useMotionValue'

[@tomisloading]

Should be latest!

[@izusaE]

@@tomisloading So fast ! I'm with the latest (yarn add framer-motion@latest so I have ^10.16.16) I'm gonna see why I have this error :/ But your tutorial is super cool !

[@tomisloading]

@@izusaE odd 🤔 just double checked the docs, it’s definitely not deprecated or anything like that. useMotionValue is a hook as well though 🤷‍♀️

[@izusaE]

@@tomisloading I resolve it by uninstall the folder nodes_modules ! It works well ! Thank you a lot for this tutorial !

[@tomisloading]

@@izusaE heck yea!! Happy I could help :)

[@cosasdereddit111]

gooooooooooooooooooooooooooooooooooooooooodddddddddddddddddddddddddddddddddd