This article gives an overview of the triggers, conditions, and actions you can utilize when working with interactions.
List of 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 |
List of conditions
Overview of which conditions you can use, their definition, and with what trigger you can use them.
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, what their definition are, and when they are compatible.
If target is any component
Action name | Action definition |
Show | Component becomes visible. |
Hide | Component becomes invisible. |
Toggle visbility | Component becomes visible if it is invisible and vice versa. |
Scroll to element | Component scrolls the view to the target component. |
If target is a Link
Action name | Action definition |
Go to URL | Component goes to an URL either in the same or a new tab. |
Send email | Component opens email service. |
Call phone number | Component opens service to call a phone number. |
Download file | Component downloads a file. |
Send SMS | Component opens service to send a SMS. |
If target is a Slider component
Action name | Action definition |
Go to next slide | Component goes to the next slide. |
Go to previous slide | Component goes to the previous slide. |
Go to a specific slide | Component goes only to a specific slide number. |
If target is a Page
Action name | Action definition |
Open page | Component opens a page. |