Hi @mimfox,
Yes it’s a bit counter intuitive but I have a work around.
Basically for this kind of interaction that can come from multiple triggers, it is better not to use the second click as it is the reason things are out of sync.
The idea is to use an extra div for triggering the close interaction.
Here is how :
Layout:
- Wrap your button into another div (button wrapper for example)
- Position and size this div the way you did with you animated button
- Add an extra div inside this wrapper (close trigger)
- Set your animated button and the close trigger to position absolute and pin to 4 sides
- Make sure the close trigger have a higher z-index than the animated button
Interaction:
- The open interaction should include the showing of the close trigger (add an initial state of hidden as well)
- The close interaction should include the hiding of the close trigger
- Set your button animated to have the first click set on open menu (no second click)
- Set your links and the close trigger first click interaction to close menu (no second click)
- Now everytime the menu icon open, it will display (but transparent) the close trigger on top of the button animated and therefore be on sync
I join some screenshots to further illustrate but it’s not so hard to grasp
I hope it will help you where I struggled for a while 
Max