Published On Jun 6, 2024
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