Streaming live at 10am (PST)

Help with opacity fade with display hide/show interaction


#1

Hi,

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: https://www.youtube.com/watch?v=fAWt2SOwmBI

*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:

https://preview.webflow.com/preview/russell-prowse?preview=ee06c2098d3415a1714b370827995f35

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!
Russell


Here is my public share link: https://preview.webflow.com/preview/russell-prowse?preview=ee06c2098d3415a1714b370827995f35
(how to access public share link)


#2

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


#3

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


#4

You are welcome! Keep on designing!