Can I hide an element with an interaction without setting an initial state?

Hi!

I’ve created a simple overlay menu for on mobile devices. So far I’ve managed to create the overlay, make it hidden by default, and show/hide it whenever a user clicks the hamburger (or close) button (using interactions). See the preview URL and check it on mobile to see what I’m talking about :slight_smile:

Now I’ve run into an issue. I also want the menu overlay to close whenever a user clicks a menu item. However, when I use the same animation I use for the close button, that doesn’t seem to work. I’ve also tried to create a new animation to do this, but then I need to set an initial state to be able to hide the overlay, but that initial state causes the overlay to be visible by default (which it obviously should not be).

I’m probably not using the animations/interaction right, but I seem to be missing how I should do this. Can anyone help me?

Thanks in advance!

Here is my public share link: https://preview.webflow.com/preview/uphere?utm_medium=preview_link&utm_source=dashboard&utm_content=uphere&preview=aa102bacc0fbf6949cd907c41a157a27&workflow=preview

Try and change your animation settings to apply to “All elements with this class”:

Ah, great thanks! Makes a lot of sense actually. Thanks for the quick reply!