Close Menu when Scrolling Down

Design help Animations & Interactions
1

Hi everybody,

I need some help with a nav I made (see public share link).
Is it possible to ‘Close Menu when Scrolling Down’?

Example: Menu icon is clicked and nav opens, scrolling down will close nav and return to normal state.

Can this be achieved by interactions or custom code?
If so, please let me know how to make this work.

Thanks in advance,

Yoerdan

12
121920×894 27.1 KB

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

2

Hey man,

Here is a simple way you could fade out the menu when the user scrolls down, and then fade it back in when they scroll back up. You would need to tweak the settings, and add a close button into your menu and then also into the chain. You could also use this process to change the display settings (Hide/Show) if you want to just hide the element when its scrolled down etc

  1. Add a page trigger on scroll
    image

  2. When the page is scrolled down, we want the object to move away, or change visability, or fade opacity, the choice is up too you. Here’s the settings of a simple move away. (20% offset used)

    image
    image236×774 7.87 KB

  3. Change your scroll up animation to bring it back in so change these settings back to as follows.

image
image247×783 8.03 KB

Hopefully that can get you started.

3

Hi @Thomas_92

Thank you so much for your reply! Really does help me out.

I captured my screen to show you what I mean by closing the menu.

  1. First you click on ‘menu =’ to open the menu. The nav links drop down and ‘menu =’ disappears.
  2. Menu is now active.
  3. When you scroll down I want to ‘reverse’ what happened. So the nav links go back up out of the screen and ‘menu =’ will appear again, so you can open the menu again.
  4. Menu is now deactivated.

Same thing will happen if you click anywhere on the screen if the menu is activated.
So maybe I need a javascript that says: when scrolling down, click anywhere on the screen?

Link to video: https://cl.ly/d729861eba10
(I tried acting the scroll, but clicked instead to show what I mean)

Thank you for your time,

Yoerdan