How to hide the menu and trigger a burger animation at the same time?

Design help Animations & Interactions
1

Hi,
I created a menu that is hidden and appears when you click on the hamburger icon. At the same time, this click triggers the animation on the hamburger, turning it into an X. Clicking the hamburger again hides the menu and animates the hamburger back to its original state. Everything works as it should here.

The problem occurs when clicking on navlink. The page scrolls to the correct section. I set up exactly the same animation as when I click on the hamburger icon (X) again and the menu hides correctly, but the hamburger does not return to its original state.

Does anyone have an idea how to do this to keep the animations on the hamburger icon, but at the same time be able to trigger it correctly by clicking on the navlink?

I’m working on the site all the time, so there may be changes to this menu in the process, but so far I haven’t been able to fix the problem. I will be grateful for your help.

Live: https://go-digy-b911dd.webflow.io/

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

2

In the end, I was able to solve this puzzle. The problem was that on the hamurger item I had both the 1st and 2nd click animations. Eventually I solved this by adding two divs inside the linkblock holding the hamburger which were separate triggers for menu entry and menu exit. At this point it was enough at the end of the animation of the first click to add display none on the first div and display block at the end of the animation 2. :slight_smile: I’m writing because maybe someone else will struggle with a similar problem.

3

hi I am having the same issue you had, but I don’t get very much the solution you wrote. Do you think you can help me ? :slight_smile: