Interaction Initial State Not Working

Design help Animations & Interactions
1

Problem:
The mobile menu is atop the page but transparent, so it’s covering part of the header nav.

Setup:
I’m using an interaction to hide/show the menu. The initial state is set to translate-x: 100% (moves it off screen), and opacity: 0; For some reason, the rendered initial state does in-fact have a 0 opacity, but it’s translate property is set to 0, ignoring the 100% on the initial state.

I’m not sure how to resolve this. Ideas would be appreciated.

Read Only Link
https://preview.webflow.com/preview/ct-consultants-site?utm_medium=preview_link&utm_source=designer&utm_content=ct-consultants-site&preview=1750b220067562bc4981d6ee8a8a0c22&mode=preview

Here is my public share link: LINK
(how to access public share link)

2

Hi,

Do you mean that you put the Hide/Show property in the interaction?
Screenshot_4
If not, that could help since that when Display is on None the object doesn’t take space, instead of just having it on a side.
I use this method for my menus.
Hope this helps.

1 Like
3

@simoneprandini Just wanted to say thanks! That worked :slight_smile:

1 Like