This article gives an overview of the triggers, conditions, and actions you can utilize when working with interactions.
Triggers
Overview of which triggers you can use and the definition of when they activate.
Trigger | Triggers when |
On click | User clicks a component |
On mouse down | User holding a click |
On mouse up | User releasing a click |
On mouse enter | User drags cursor on top a component |
On mouse leave | User drags cursor outside of a component |
On double click | User double-clicks a component |
On touch start | User touches a touchscreen |
On touch end | User removes touch on a touchscreen |
Upon entering view | Component appear on the users screen |
Upon leaving view | Component disappear from the users screen |
On swipe | User clicks and drags the mouse or moves the touch in a direction |
On scroll | User scrolls a page up or down |
On timer | Time hits 0 |
On key down (key pressed) | User pressing and holding a keyboard button |
On key up (key released) | User releasing a keyboard button |
Conditions
Overview of which conditions you can use the definition of what they do.
If trigger is | Condition name | Condition definition | Input value |
On scroll | Distance from top (px) | Number of pixels scrolled from the top of the page. | From 0 to your total page height in pixels. |
On scroll | Distance from top (%) | How much of the page scrolled in percentage. | From 0 to 100%. |
On timer | Delay | Countdown in milliseconds from a set time interval. | From 0 and up. |
On key down | Key | A key selected from the keyboard. | Keyboard event key. Read full overview. |
Actions
Overview of which actions you can use and the definition of what they do.
Action name | Action definition |
Show | The target becomes visible. |
Hide | The target becomes invisible. |
Stick | The target sticks to the top of the section when scrolling. |
Unstick | Unstick the target if sticky. |
Toggle visibility | The target becomes visible if it is invisible and vice versa. |
Scroll to element | The trigger scrolls the view to the target component. |
Open page | The trigger opens a page. |
Go to URL | The trigger goes to an external URL in the same or a new tab. |
Send email | The trigger opens the email service. |
Call phone number | The trigger opens the service to call a phone number. |
Download file | The trigger downloads a file. |
Send SMS | The trigger opens the service to send an SMS. |
Set variable | The trigger changes the value of the set variable. |
Reset variable | The trigger resets the value to the variable. |
Share | The trigger opens the native sharing dialog. |
Custom triggers and actions
The list below mentions all components that have custom interaction triggers and actions.
Read more about what they are and how to use them by navigating to their articles.