Hide Navigation on Page Scroll || Framer Motion useMotionValueEvent

[@yogeshgupta9205]

Amazing tutorial!
Straight to the point and helped me customize my header real quick. Though the navigation in the header got messed up initially, I managed to sort it out later.
Thanks again for the tutorial!

[@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 😁😁

[@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 :)

[@pikusionexio]

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

[@tomisloading]

Happy it helps! :)

[@maciejmyslinski7820]

Amazing work! Thanks a lot for this content.

[@nathannelson5645]

Appreciate this FREE knowledge bro!

[@tomisloading]

Happy I can help! :)

[@sportseye7422]

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

[@Adventures_English]

Fantastic video thanks a ton. New fan

[@s4chin_verma]

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

[@developedbymighty]

Amazing tutorial

[@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 :)

[@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.

[@usamariaz3765]

Amazing thank you keep providing us great content 🤩🤩🎉

[@tomisloading]

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

[@janira98]

Yah that was the one I was looking for 👌

[@es20x]

great tutor ❤

[@ema.n.u.e.l]

Thanks bro !!

[@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

[@katerinadesrosiers]

Thank u!!

[@navinkumarsahu1159]

great

[@tomisloading]

Thank you!

[@WebEngineer36]

Great Video

[@tomisloading]

Thank you!! :)

[@studyafa7159]

Great

[@elmiur]

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

[@gaborlakatos882]

Nice

[@ChandanKumar-ps3cz]

Awsommmmmmmmmm

[@honefone]

niceee

[@cosasdereddit111]

gooooooooooooooooooooooooooooooooooooooooodddddddddddddddddddddddddddddddddd

[@ashish9028]

Great