Streaming live at 10am (PST)

Help with Lottie animations for a hamburger icon

Hey guys, so I have a lottie animated hamburguer icon and im having some issues.

I have one animation for the whole mobile “menu opening” (which shows the div contianing the links and triggers the lottie animation: hamburger to X) and one for the “menu closing” (hides the div and reverses the lottie animation: X to hamburger).

I have those interactions applied on first and second click to the hamburger menu icon, and it works perfectly.

The thing is, I also wanted the “menu closing” animation to happen when the user clicks on a link within the nav since its a one pager and those links just scroll, so i applied the “menu closing animation” to the links inside the nav div.
But when I click any of them, the menu hides and the page scrolls, but the lottie animation doesnt trigger and the hamburger icon stays stuck in the “X”, even tho its the same animation im using for the hamburger icon!

I have no idea what im doing wrong.
Here’s my read only link:

Thank you for your help guys!

If you’re using two close close actions, then you can’t use the second click interaction at all, because the menu button will always stay in the state waiting for the second click.

So you need to make a structure where a new invisible trigger appears after the first click, on top of the button. And you affect the same interaction to it than the one for the close button inside of the menu. (and you add an action to make this dummy trigger disappear).

Ohhhh, okay then. Seems kinda complicated but I guess it makes sense.
I will try that, thank you a lot!

Hey @vincent, im just lost.

I have no idea what i’ve done, but now its reversed. Everything works when you click on a nav link (the menu closes and the animation from x to hamburger works).
But now, when you click the menu button when the nav is open, the animation works (from x to hamburger) but the nav wont hide…

I really dont understand.

@vincent can you please elaborate a bit on your answer I’m running into the same problem.

If you have two buttons operating a single open/close interaction, you can’t use the second click event on any of them.

Solution number one: make the first button only open, and disappear when the modal is open, so that there is only one close button

Solution number two: when the modal opens, make another element cover the original button, with a close action bound to it.

I think I got it now, Thank you, you are the best.

1 Like