Restyle sticky nav when user leaves the top of the page

Design help Animations & Interactions
1

Hey all! First time posting here and would really appreciate some help.

I’m looking to recreate something similar to the nav shown on this website: Envoy Design Agency

When a user scrolls down the page a certain amount, I’d like to play an animation to:

  • Widen the nav bar
  • Hide the nav items and reveal the hamburger icon
  • For the purpose of having a sticky nav that’s out of the way of content

I am able to accomplish those as a Page scrolled - “When scrolled down” animation, but my issue is I want the full menu to return once the user reaches a certain area near the top of the page (not just when they scroll up in general). You can see this functionality on the site provided.
Would I use a different animation type on scroll up? Or a different animation type in general for the entire interaction?

Appreciate any help I can get! Thanks

2

For these types of animations I like to use the element interaction “Scroll into view” instead (using the top-most section as your selected element) since you can control what happens both when it scrolls in and out of view from the user. If you need to tweak when the animations trigger, just use the offset feature on the interaction panel.

3

Works perfect, thank you @mikeyevin!