Auto-hiding Sticky Navigation With Framer Motion In 10 Minutes

In today's video we'll be building an auto-hiding and revealing sticky navigation, with Framer Motion. It will show and hide based on your scroll direction, have a nice hover to show itself again if you hover it while it's collapsed, as well as make sure that the accessibility for it is on point too.

🤓 Check the code here: https://www.frontend.fyi/recipes/fram...

MORE?
📈 If you want more content like this, become a Frontend FYI PRO and get access to my current and all future courses for a one-time purchase: https://fe.fyi/pro
📺 If you want to see more videos like these, check out my website: https://fe.fyi/videos
✉️ Subscribe to my newsletter: https://fe.fyi/newsletter

MY SOCIALS
🌍 My website – https://www.frontend.fyi
🐦 Twitter –   / jeroenreumkens  
📸 Instagram –   / jeroenreumkens  
💼 Linkedin –   / jeroenreumkens  

WHO AM I?
If you're new to this channel — Hey, my name is Jeroen. A frontend engineer with almost 15 years of professional experience, who in 2023 decided to stop teaching only his close collegeas to start teaching the whole world. What I teach some call Design Engineering, I like to call it the Craft of Frontend.

TIMESTAMPS:
00:00 – Intro
00:35 – What we'll be building
01:05 — Starting point
02:30 — Start coding, adding visible/hidden state
03:15 — Add motion variants
03:40 — Toggle animation based on state
05:20 — Using useScroll to toggle the animation based on scroll
07:10 — Reappear navigation when scrolling back up
11:00 — Show navigation on hover (while collapsed)
11:50 — Accessibility: Show navigation when you focus into it
12:28 — Outro

#framermotion #webdevelopment #frontend