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!
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).
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…