Skip to main content
Triggers
Updated this week

Triggers are events that cause an action to fire. Together, triggers and actions create interactions in Play.

There are three types of triggers: single, continuous, and event.

  • Single triggers fire their actions once, immediately.

  • Continuous triggers will fire their actions continuously (up to sixty times per second!) as a user interacts, interpolating the action based on the gesture.

  • Event triggers, like Single triggers, fire their actions immediately, but these triggers are only relevant to specific elements.

Below are Play’s triggers and the circumstances that will cause each trigger to fire.

Single Triggers

Tap

A Tap trigger fires when the user taps an object a given number of times with a given number of fingers.

  • Number of Taps: Choose between a single, double, or triple tap

  • Number of Fingers: Choose up to four fingers

Touch

A Touch trigger fires when the user’s finger makes or removes contact with an object.

  • State: Choose what event the trigger should register. Options include:

    • Touch Up: the user removes their finger from an object

    • Touch Down: the user’s finger first touches an object

    • Any Touch Event

  • Number of Finger: Choose up to four fingers

Long Press

A Long Press trigger fires when the user presses an object for an extended time.

  • State: Choose what event the trigger should register. Options include:

    • Press Began: the user touches the object for the exact selected duration

    • While Pressing: the user is actively pressing on an object (action occurs for duration of the press)

    • Press Ended: the user releases their press

  • Duration: Choose how long the user should hold down their finger before the long press begins firing. The default is 0.5 seconds.

Continuous Triggers

Pan

The Pan trigger detects drag gestures across an object.

  • State: Choose which drag behavior the trigger should detect. Options include:

    • Began: the user begins a pan gesture

    • While Panning: the user is actively panning across an object (action occurs for duration of the pan gesture)

    • Ended: the user releases their pan gesture

  • Direction: Choose to limit panning to certain directions, or select Any to detect all. Options include: Up, Down, Left, Right, Up & Down, Right & Left, or Any

Edge Pan

The Edge Pan trigger detects drag gestures starting from the edge of your iPhone.

  • State: Choose which drag behavior the trigger should detect. Options include:

    • Began: the user begins a pan gesture

    • While Panning: the user is actively panning (action occurs for the duration of the pan gesture)

    • Ended: the user releases their pan gesture

  • Edge: Choose which iPhone edge the pan should start. Options include: Top, Bottom, Left, and Right.

Scroll

The Scroll trigger detects scroll behavior within any page or container that scrolls.

  • State: Choose which scroll behavior the trigger should detect. Options include:

    • Scroll Drag Began: the user begins scrolling

    • While Scrolling: the user is actively scrolling (action occurs for duration of the scroll)

    • Scroll Drag Ended: the user lifts their finger after scrolling

    • Scroll Ended: the scroll decelerates to a complete stop

    • Status Bar Tapped: the user taps their device’s status bar

  • Direction: Limit detection to certain directions of scrolling, or select Any to detect all scrolling.

  • Scroll Range: Choose to only detect scrolling between a certain range of the container. Define the range using percent values in the From and To attributes that appear when Scroll Range is turned on.

Timer

A Timer trigger fires repeatedly at a given interval.

  • Interval: Set the number of seconds between each fire

  • Auto Start: Choose if the timer will start automatically when the page is opened. If this is turned off, it will wait for a Start Timer action

  • Repeat: Set the number of times the trigger should fire. Options include:

    • 1 - 100x: set the exact number of repetitions

    • Continuous: run the timer indefinitely, or until a Stop Timer action is fired

Shake

A Shake trigger fires when the user shakes their device.

  • State: Choose whether the trigger should fire when the shake is first detected (Shake Began) or has stopped (Shake Ended)

Gyroscope

A Gyroscope trigger fires continuously as a user tilts their phone along an axis of rotation.

  • Axis: Choose the axis of rotation that will trigger the gyroscope. Options include:

    • X Axis: device is tilted towards or away from the user

    • Y Axis: device is tilted to the left or right

    • Z Axis: device is rotated clockwise or counterclockwise

    • Any Axis

  • From & To: Set the range, in degrees, that the Gyroscope will fire between

  • Auto Start: Choose if the gyroscope will automatically start measuring orientation when the page is opened. If this is turned off, it will wait for a Set Gyroscope action

Event Triggers

These triggers can be added to any object, but they’ll only work when placed on their specific element.

Event

Events trigger fire when a selected event occurs. There are four types of Event triggers: View, Variable, Device, and Custom. These triggers can only be attached to a page.

Type: View

A View Event trigger fires when the user opens or closes a page.

  • Event: Choose whether the trigger should fire when the page loads (On Page Load), the page appears (On Appear), or the page disappears (On Disappear)

Type: Variable

A Variable Event trigger fires when a variable is changed.

  • Variable: Select the variable for this trigger

  • Event: The only option at this time is On Change which will fire every time a variable's value is changed

Type: Device

A Device Event trigger fires when your device's keyboard hides or shows.

  • Event: Choose whether the trigger should fire when the native keyboard comes into view (On Keyboard Show) or when the keyboard closes (On Keyboards Hide)

Type: Custom

A Custom Event trigger fires when a defined event occurs, as triggered by another interaction.

  • Event: Select the Play event that the trigger should register. If no events exist, you can create a new event from the dropdown.

Slider Event

A Slider Event trigger fires when the user changes a slider’s value. This trigger only works when added to a slider element.

  • Event: Choose what event the trigger should register. Options include:

    • Slide Started: the user begins sliding the slider

    • While Sliding: the user is actively sliding the slider (action occurs for duration of the slide)

    • Slide Released: the user removes their finger from the slider

    • Value Changed: the user changes the slider’s value (this can happen multiple times within a slide)

Switch Event

A Switch Event trigger fires when the user toggles a switch on or off. This trigger only works when added to a switch element.

  • Event: Choose what event the trigger should register. Options include:

    • Switched On: the user flips the switch on

    • Switched Off: the user flips the switch off

    • Any Switch Event

Segmented Control Event

A Segmented Control Event trigger fires when the user selects a segment. This trigger only works when added to a segmented control element.

  • Event: Choose what event the trigger should register. Options include:

    • Any Segment Selected: the user selects any segment

    • Segment X Selected: the user selects a specific segment

Stepper Event

A Stepper Event trigger fires when the user changes the stepper value. This trigger only works when added to a stepper element.

  • Event: Choose what event the trigger should register. Options include:

    • Value Increased: the user tap on the stepper’s plus side

    • Value Decreased: the user tap on the stepper’s minus side

    • Any Stepper Event

Text Field Event

A Text Field Event trigger fires when the user interacts with a text field. This trigger only works when added to a text field element.

  • Event: Choose what event the trigger should register. Options include:

    • Focus Started: the user select the text field and opens the keyboard

    • While Typing: the user is actively typing (action occurs the whole time a user types)

    • Value Changed: the user changes the contents of the text field

    • Focus Ended: the user unfocuses the text field and closes the keyboard

    • Clear Pressed: the user presses the keyboard’s clear button

Picker Event

A Picker Event trigger fires when the user selects a value from a picker. This trigger only works when added to a picker element.

  • Event: Choose what event the trigger should register. Options include:

    • Value Selected: the user selects an option from the picker

Date Picker Event

A Date Picker Event trigger fires when the user selects a date or time from a picker. This trigger only works when added to a date picker element.

  • Event: Choose what event the trigger should register. Options include:

    • Day Changed: the user changes the date picker’s day value

    • Month Changed: the user changes the date picker’s month value

    • Time Changed: the user changes the date picker’s time value

    • [Year Changed]: the user changes the date picker’s year value

    • Any Date Picker Event

Map Pin Event

A Map Pin Event trigger fires when the user interacts with a pin on a map. This trigger only works when added to a map element.

  • Event: Choose what event the trigger should register. Options include:

    • Pin Selected: the user selects a pin

    • Pin Unselected: the user unselects a pin

    • Any Pin Event

Page Loader Event

A Page Loader Event trigger fires when a page is loaded into or removed from a page loader. This trigger only works when added to a page loader element.

  • Event: Choose what event the trigger should register. Options include:

    • Page Loaded: a page loader loads a page

    • Page Removed: a page loader removes its loaded page

Image Event

An Image Event trigger fires when an image is loaded (or fails to load) into an image element. This trigger only works when added to an image element.

  • Event: Choose what event the trigger should register. Options include:

    • On Load: an image element loads its contents

    • Load Failed: an image element fails to load its contents

Did this answer your question?