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:
- 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).
- 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.