DIV opacity with elements from 0 to 100%

Design help Animations & Interactions
1

Sorry for another topic - idk if I should write it in the previous one which was about a different issue or here. On the preview version of my project, I tried to change the way in which I’m displaying menu when we click “Historie” button - instead of changing position I was thinking about changing the opacity from 0 - 100% to make it look nicer. But, when I tried to make that interaction it doesn’t seem to be working - menu is not showing.

  • I tried already removing all other elements animation
  • Changing Z position
  • Redoing whole interaction

Here is my public share link: https://preview.webflow.com/preview/daria-bokowy-370786fefef193f71be2211327?utm_medium=preview_link&utm_source=designer&utm_content=daria-bokowy-370786fefef193f71be2211327&preview=5e6b972da4da61d63786a0ecb2917baf&mode=preview

2

Hi @Kacper_Bieda,

Your current open/close interaction on the Historie button moves the menu from top to bottom. Do you want to try creating the animation/interaction you desire and republish?

1 Like
3

@avivtech Ah sorry, I made that in preview.

I made interaction form 0% opacity to 100% but menu doesn’t show up right now and I can’t figure out why. You can check it now :wink:

4

I am having trouble understanding what you are trying to accomplish :sweat_smile:

Now the “Historie” button sends to a different page. No menu interaction at all.
Also, the Menu button opens the menu like you described - by opacity.

5

@avivtech I just make that work few min ago.

I had to include in the interaction list also Hide/Show action to make that work. With opacity set just to 0% at initial state and 100% in next frame it hasn’t worked.
image

1 Like