Add Hide at start to elements that need to be hidden when page loads so that you can reveal them with interactions.
Hide at start hides the element only if Javascript is enabled and interactions can actually run.
A common mistake when designing web animations is to hide elements with CSS and assume that Javascript code that will reveal them can actually run. That makes the page unusable if user disables Javascript execution.
Hide at start avoids this problem.
How it works
Hide at start uses inline CSS rules in the page head to hide the element by setting its visibility to hidden and opacity to 0.
The recommended way to create accessible interactions that reveal elements is:
- Use CSS to style the element as it should appear on the page, in visible form.
- Add Hide at start action to hide the element if animations are available.
- When creating the reveal animation, use the Set at the beginning of the timeline to set the starting position and other properties, while the element is still hidden.
- Then add tweens that will display the element, including setting a positive value for Auto opacity property. Auto opacity controls both the visibility and opacity properties.
Enable on
Use the Enable on setting to hide the element only on mobile or non-mobile devices.
Preview during editing
Use Visual helper “Hidden & Shown by Interactions” to toggle display of this action during editing in Pinegrow.