Ive always used opacity to hide things and Im wondering what the intention of the hidden/visible toggle is for? Im i right in assuming its used more for unclutering the workspace during development?
It's related to CSS…
There is a difference between opacity “0” and visibility: hidden — it can have an affect on Accessibility / Screen Readers.
Thanks, so should I use this method to hide reveal with buttons? It greys out the timeline
That's just a visual cue to let you know that the element is hidden. Since it's visibility: hidden, and Hype is essentially a web project, the element can't be selected by clicking on it in the scene, but it can be selected in the timeline.
I'm not sure if you should use opacity or visibility: hidden. It depends on the situation. Accessibility is the big factor, do you want the text read by screen readers? If the element doesn't contain any text, and it's not an interactive button, then that changes the decision — it might not matter.
You can test the difference with "VoiceOver" in macOS Accessibility…
- Add a tab index value of "1" to two elements
- Make one element visibility: hidden
- Make the other element opacity: 0
- Preview the project
- Turn on VoiceOver
- Click the web page
- Press the tab key
- BEHOLD THE DIFFERENCE!
Now I'm wondering if I should make a video about this on Photics.TV — it probably won't be super popular, and that might hurt how the YouTube channel is ranked, but this is an important issue. 
Do you understand the difference now or would you like a video?
1 Like
To expand a bit on this, we often see folks using the Display:hidden/visible in cases where there might be content underneath that has event handlers. If the opacity is just 0, then items on top will still eat mouse events. If it is hidden, then the mouse events will go through to the elements "below" which are the visible ones.
I think i understand thank you for that detailed explanation and the implications for screen readers
So what is the best practice if I have a couple of buttons and each is showing/hiding text on the screen? To date Ive used opacity but what would be a better way?
There's no hard and fast rules on which to use. To summarize:
Opacity Pros:
- Allows animation
Display Pros:
- Hidden removes it from mouse handling
- Improved accessibility when hidden
- Shows state in timeline (but you still need two keyframes to animate)
You can also technically use both -- animate opacity over time and then also use the display to remove from accessibility. This is usually overkill though.
Personally I just use Opacity a lot, but I think that's more a force of habit since Opacity has been in Hype since v1.0 and Display came later (~v3.6 I think).
1 Like
Excellent , thanks