Show and conceal navigation bar upon scrolling

Build a navbar interaction that responds on scroll.

Within this tutorial:

  1. Conceal the navigation bar
  2. Uncover the navigation bar 

Conceal the navigation bar

  1. Choose the navigation bar and ensure its position is fixed to the viewport
  2. Within the Interactions panel, opt for Initiating an Animation from the Upon Scrolling Down menu
  3. Assign a title to it (e.g., “hide nav”)
  4. Click on the addition symbol beside Timed actions
  5. In the Movement section, alter the Y-axis until the navigation bar is located outside the viewport
  6. Tailor your easing curve and timing

Uncover the navigation bar

  1. Pick the navigation bar
  2. In the Interactions panel, select Initiating an Animation from the Upon Scrolling Up menu
  3. Assign a title to it (e.g., “show nav”)
  4. Click on the addition symbol beside Timed actions
  5. In the Movement section, bring back the Y-axis to 0
  6. Customize your easing curve and timing

Review your progress in the preview.

Ewan Mak
Latest posts by Ewan Mak (see all)