Nav scroll functionality - change on scroll

Design help Animations & Interactions
1

Hi there,

I am currently trying to create a triggered scroll animation on our menu, the intention is to hide the main nav once a user starts to scroll down the page, and instead display a tab that the user can click to display the main nav again. I then want the main nav to hide again and go back to the tab if the user starts scrolling again. I have tried to attach a quick gif I made to show this visually.

I currently have the main nav, tab bar and a duplicate of our main nav (which will be the one that displays off the tab click - so that it doesn’t mess with the interactions we have currently on our main nav) - let’s call this the ‘pop-down nav’, these are already built out. I have been able to create the interactions where the main nav hides and the tab displays on 2% scroll and also the functionality with the tab click displaying the pop-down nav. However I am having trouble with:

  1. Hiding the pop-down nav when the user scrolls. I cannot use the page trigger interaction as this seems to work by percentage. I have tried using the legacy interactions - scroll hidden. But this doesn’t seem to do anything (I have attached screenshots of this).
  2. Displaying the tab bar once again when the user has scrolled and the pop-down nav has disappeared.

Does anyone have any great ideas on how to create this functionality?

Any insights on how to do this would be great.

Here is my public share link: LINK
(how to access public share link)

52%20AM
52%20AM277×697 16.1 KB
38%20AM
38%20AM311×608 17.3 KB

2

Thank you so much for posting this @kiwijen!

We actually have a new interaction trigger available in Interactions 2.0 which will make it much easier to implement this solution. Here is a tutorial on creating interactions based upon the scroll direction:

Please let me know if you have any questions, I’m here to help :man_bowing:

1 Like