Glitchy behavior of an Hamburger Menu Interaction. How do I fix this? (Video & Images)

Design help Animations & Interactions
1

I created an interaction for the Hamburger Menu, where upon clicking on a menu item, the menu collapses.

When I open and close the menu using the hamburger icon, it takes place seamlessly.

But the problem arises when I click on a menu item, which scrolls to the section and collapses the menu. But if I click on the hamburger icon again, it replays the animation of the menu collapsing quickly. How do I fix this?

Here’s a video explaining the issue - Imgur: The magic of the Internet

I am using the same interaction for the hamburger icon and the menu links.

Thank you!

Link to Project: Link

*Edit - updated read only project link.

2

Hey @neelshenoy !

Your read-only link doesn’t seem to be working for me. Could you try sending it again?

3

Hi @clarksaxby

Thank you for the response! Apologies, the link might have expired.

I have updated the link. Here you go: Read Only Link

4

Hey @clarksaxby

I figured out the problem. The reason the glitch happens is because the behavior on “second click” for the hamburger menu icon is to close the menu (so that when I first click the icon, it opens, when I click on the icon again, it closes)

But the behavior I have set when I click on a menu item, is for the menu to close again. Hence, the menu has closed due to first click on a menu item, and not second click on the hamburger icon again.

So the subsequent click on the hamburger icon to open it, plays the “second click” animation.

Now that I have figured this out, can you help me with how I can solve this problem?

Thank you!

5

Hey @neelshenoy !

I was literally just about to send a video explaining just that :joy: I’m glad you were able to figure that out, though!

Give me a few minutes and I’ll show you what you could do to fix it :slight_smile:

6

@neelshenoy

Here’s a video of me walking through how I would get this interaction functioning the way you want it to: CleanShot 2022-07-27 at 10.01.07 · CleanShot Cloud

Hope this helps!

2 Likes
7

Hey @clarksaxby

Thank you so so much for taking out the time to walk me through the entire solution! I really appreciate the effort you put in.

This solves my problem and also teaches me a few more tricks on Webflow! :smiley:

Have a good one!

2 Likes
8

I had this problem too, and built a workaround that could be helpful. If the interactions/ animations aren’t working, toggle preview off and on. Bug :person_shrugging:t2:

>>> Animated hamburger dropdown here <<<