Place Show at start on elements that need to be displayed when page loads so that you can hide them with interactions.
A typical use case for Show at start is displaying a page loader.
Show at start avoids this problem.
How it works
Show at start uses inline CSS rules in the page head to show the element by setting its visibility to visible, display to block and opacity to 1.
Note that display property is set to block. If you need a different layout, like grid or flex, create a wrapper around that element and place Show at start action there.
The recommended way to create accessible interactions that hide elements is:
- Use CSS to hide the element, but set all the styling for initial position and appearance.
- Add Show at start action to show the element if animations are available.
- Use Auto opacity 0 in the animation if you need to hide the element at the end of the animation.
Use the Enable on setting to show 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.