Hello there. I am just getting around to seeing this. Thank you all for helping solve the interactions problem.
@lamisilva.studio - There is no easy way to reset interactions to their initial state without actually creating another interaction to do so. Which means every time you change a state in one interaction, you have to account for that state change in other interactions that might affect the same elements.
In this case, when you set the nav link function to close the menu (in order to allow the screen below to be viewed by the user) you do not account for resetting the initial menu-lines position. What you need to do is create a seperate “close menu” interaction. (I suggest duplicating the original one) and then customize that interaction for the menu buttons but add the steps needed to reset the menu-lines to their initial position.
This will not however fix the fact that you will still end up having to double click the menu button to get your menu to close/open as intended again at some point because there is a second click trigger on the menu button which will not reset dynamically. To do something like this, I typically set up two (identical) trigger elements, and then toggle their visibility/position inside of the interactions in order to only use a first click trigger on each element. This way no matter what the user does, each trigger can only do one thing. Either open or close the menu.
You can find a cloneable element like the one I just described here - Responsive Sidebar
The sidebar contains some pretty complex interactions too, so be careful if you go clicking around in there.
As you can see by this simple menu instance, even changing a menu bar width by a few pixels can change the nuance of the animation.
Feel free to reach out directly with any other questions.