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: 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: fe.fyi/pro
📺 If you want to see more videos like these, check out my website: fe.fyi/videos
✉️ Subscribe to my newsletter: fe.fyi/newsletter
MY SOCIALS
🌍 My website - 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

[@0xAndy]

Perfect length and content. Thanks

[@frontendfyi]

Thank you, glad you enjoyed it!

[@julienheng3880]

another great tutorial as always. Thank you!

[@frontendfyi]

Appreciate it!

[@dizzland]

That was an amazing tutorial. no extra bluffs

[@frontendfyi]

Glad you enjoyed it!

[@LeandroVilanovaDev]

Amazing! Thanks!

[@frontendfyi]

Thank you for commenting!

[@DheerajSharma-hw6qm]

please drop your vscode setup.

[@chetandivekar1813]

Awesome 🔥🔥

[@frontendfyi]

Thanks 🔥

[@sebosamuraj]

Love it ❤

[@frontendfyi]

Thank you ❤️

[@RedVelocityTV]

Beautiful stuff

[@alexg7282]

Nice ! Wich font did you use in Vscode ?

[@frontendfyi]

The font is called Recursive Mono Casual Static

[@nnadivictory917]

What is your vs code theme and font ?

[@frontendfyi]

It's called Arc, from the Bearded Theme collection: github.com/BeardedBear/bearded-theme
The font is called Recursive Mono Casual Static

[@abdkelanii]

What is the font name?

[@frontendfyi]

The font is called Recursive Mono Casual Static

[@geekthegeek730]

FONT ?????????

[@frontendfyi]

The font is called Recursive Mono Casual Static