Show at Start

Place Show at start on elements that need to be displayed when page loads so that you can hide them with interactions.

Show at start only shows the element if Javascript is enabled and interactions can actually run.

A typical use case for Show at start is displaying a page loader.

A common mistake when designing page loaders is to display the loader by default and assume that Javascript code that will later hide the loader can actually run. That makes the page unusable if user disables Javascript execution.

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:

  1. Use CSS to hide the element, but set all the styling for initial position and appearance.
  2. Add Show at start action to show the element if animations are available.
  3. Use Auto opacity 0 in the animation if you need to hide the element at the end of the animation.

Enable on

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.

Last updated on December 10, 2019 at 1:12 pm

Print this article