How to set up a load trigger interaction

Overview

The Load Trigger will set your interaction into motion when the page loads. Because of this, it is best to have the load trigger only on elements that are within view when the page loads (for example, in the hero image at the top of your page).

Example Using Load Trigger to Create a Staggered Effect

Creating a Staggered Load Effect

A common usecase for the load trigger is so space out the interaction time of different elements so that they enter the page at different times. This is what we call creating a Staggered Load Interaction (Notice the example above).

To do this, you need to space out the time each trigger will occur by adding a Wait step prior to any animations taking place. By using a Wait step, you can add a set time period in which no animations will occur. To create a staggered effect, simply increase the wait time of each element in the order you want them to appear.

Learn how to replicate this interactions by watching this tutorial video.

Example Screenshots of a Staggered Load Trigger Interaction

FIRST ELEMENT

SECOND ELEMENT

THIRD ELEMENT

Load Trigger Interaction Best Practice

When using the load trigger, it’s important to keep in mind the location of the element in which you are adding the interaction. Because the load trigger occurs when the page loads, it is best to add to elements that are at the top of the page so that the user can experience the interaction.

If you add a load trigger to an element that is further down the page, they may not see the interaction take place (as it is happening below the monitor’s viewpoint).