Skip to main content
All CollectionsThe Design EditorInteractions and addons
Interaction triggers, conditions, and actions
Interaction triggers, conditions, and actions

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

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

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
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?