Streaming live at 10am (PST)

Help with opacity fade with display hide/show interaction


Apologies if this is a simple issue, but I’ve tried for hours to get this to work and am struggling! I want a display hide/show interaction to also have an opacity fade - similar to in this tutorial video:

*Edit: The element in question is the bio paragraph that switches language.

Right now I have got everything to work fine except the opacity - no matter what I seem to do it either breaks it or just hide/shows immediately still. Here is my preview link:

Would love any help! I’m also finding using class names in interactions confusing as I have combo classes that only show the class name in interactions panel - pretty sure I should be changing my workflow somehow but would love to hear what others recommend.

Thanks so much!

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

The hide/show is simply switches elements off and on with the display parameter. To make things change opacity you need to think about this as follows:

  1. you click
  2. element changes its opacity from 100 to 0 in, say, 0.2 sec
  3. THEN you make it to hide with the display property that you’ve used

and vice versa:

  1. click
  2. show the element
  3. slowly change opacity from 0 to 100

that’s it

1 Like

@dram, thank you very much - not sure why but that was hard for me to get my head around. Your break-down really helped!

You are welcome! Keep on designing!