All Collections
The Design Editor
Interaction triggers, conditions, and actions (Beta)
Interaction triggers, conditions, and actions (Beta)

Overview of the triggers, conditions and actions you can use for interactions

Iselin Ekornes avatar
Written by Iselin Ekornes
Updated over a week ago

Interactions is currently in Beta and can be accessed by following these steps:

  1. From the Dashboard, click on your user name at the top of the left panel, or click this link to get there.

  2. Navigate to the bottom-right of your profile page and find "Experimental features".

  3. Toggle on Interactions & Slider to turn the feature on for your user

Note: Features in beta are still being actively worked on, so you might experience unexpected behaviors or errors when using them. If you ever come across this, please send our friendly Support team a message so we can improve the feature. Just click the chat bubble in the bottom-right corner of your screen to send feedback.

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

Upon entering view

Component appear on the users screen

Upon leaving view

Component disappear from the users screen

On key down (key pressed)

User pressing and holding a keyboard button

On key up (key released)

User releasing a keyboard button

On scroll

User scrolls a page up or down

On timer

Time hits 0

List of conditions

Overview of which conditions you can use, what their definition are, 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
On key up

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.

Did this answer your question?