How to let menu animation play before being able to close the menu

Design help Animations & Interactions
1

Hi,

Me and my coworker have been trying to fix this issue all afternoon. We’ve tried putting a div on top of the menu button while the animation is playing out, but it seems you can still click on the menu button even if it’s behind the covering div. Something we really don’t want.

See, I’d like to let my menu interaction play completely before the menu can be closed again, as it currently creates weird issues. Like the menu not working anymore and such. It also happens when clicking on the links inside the menu. Maybe because they currently don’t lead to anywhere, but were they to link to sections of the page it’d be problematic. I’ve tried putting my closing menu interaction on them. But it doesn’t work as intended. I’m guessing it’s because the menu button element works in specific ways.

I hope this is clear enough, I’m not too entirely sure of how to explain the problem.

Here’s the webflow link : https://preview.webflow.com/preview/bauhem-2018?preview=c9fe7951800a69479f27eeb8b7906793

Thanks in advance,
Vincent

2

Hi @elecks441

Nice work there!

Have you tried adding a hide/show after the hamburger has changed to an X - so give it enough time to morph from burger to X, then quickly hide, then appear again once the menu animation has finished?

3

Hello @StuM

Thank you!

This seems to work just fine. If no one quickly double clicks there shouldn’t be any problem haha. Kind of sketchy of a solution, but whatever works!

About the navlinks causing the menu to bug, do you have any idea? With the hidden menu button, I don’t have the same issue as I did yesterday with them. Now the menu is just completely unresponsive apart from the button which behaves weirdly.

4

Hmm…paging interactions wizard @PixelGeek