Fade out Full Screen Hamburger Menu

Design help Animations & Interactions
1

I’m trying to do a hamburger menu in all views that takes the entire screen when open. My idea is to have the background fade in from 0 opacity to 100 when opening and vice-versa when closing. I figure out the fade-in part by having the open menu duration on 0s (all the other options don’t matter) and having an interaction when clicking to go from 0 opacity to 100.

My problem is that since the duration is 0, when you close the menu I can’t animate the other elements because the menu is closing instantly. Is there any way I can delay the menu closing when clicking so the other elements can finish their interactions and then the bg fades out?

Thank you

Read-Only link:
https://preview.webflow.com/preview/menu-try?utm_medium=preview_link&utm_source=designer&utm_content=menu-try&preview=49bf299ffa544414c2e98b421f2b3bcb&mode=preview

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

2

Hello.
I see that many of your interactions have no class.
screenshot-empty
Maybe that’s the problem?

3

Hi,

Thanks for answering. I think this is because I copy past my menu on another project and other elements didn’t make it (I have images appearing when you hover on the items)

On my real project, these do have a class. Any other ideas?