Skip to main content
Actions
Updated this week

Actions are responses to a fired trigger. Together, triggers and actions create interactions in Play.

Below are Play’s actions and what will happen when each action is triggered.

Set Property

A Set Property action sets the value of one of an object's properties, like height, rotation, or gap.

  • Target: Select the element that this action will affect

  • Property: Select the property that this action will change. Options include: Width, Height, Scale, Scale X, Scale Y, Offset X, Offset Y, Radius, Rotation X, Rotation Y, Rotation Z, Translate X, Translate Y, Translate Z, Order, Depth, Gap, Hidden

  • Value: Set the object’s resulting property (note, you can use the Expression Editor for advanced actions)

  • Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)

Set State

A Set State action changes the state of a given component.

  • Target: Select the component that this action will affect

  • State: Select the state the component should be in at the end of the interaction (note, you can use the Expression Editor for advanced Set State actions)

  • Animate: Choose to add action-specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)

Tween State

A Tween State action animates a component between two states based on a percent value. Tween State actions

  • Target: Select the component that this action will affect

  • State: Select the state the component should be in at the end of the interaction (note, you can use the Expression Editor for advanced State actions)

  • Percent: Set the percent, typically done with a custom expression

Set Scroll X & Y

Set Scroll X and Set Scroll Y actions scroll a stack or page horizontally or vertically, respectively, by a given amount.

  • Target: Select the stack or page that will scroll

  • Type: Select how the stack or page will scroll. Options include:

    • Scroll to PT: the page scrolls to a given point value. The value will always be in PT.

    • Scroll to Percent: the page scrolls to a given percent value. The value will always be a percentage.

    • Scroll to Index: the page scrolls to a selected child of the stack or page. The value will be the index of the desired child (i.e. index=0 to scroll to the first child)

      • Alignment: Choose how the scroll should align the selected child. Options include: Start, Center, End

  • Value: Set the scroll amount or index (note, you can use the Expression Editor for advanced actions)

  • Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)

Set Event

A Set Event action fires an event that a Custom Event trigger listens for.

  • Event: Select (or create) the event that this action will fire

  • Delay: Set the number of seconds between the trigger firing and the action beginning

Start Timer

A Start Timer action starts a selected Timer trigger.

  • Target: Select the Object the desired Timer trigger is on

  • Timer: Select the Timer trigger to start

Stop Timer

A Stop Timer action stops a selected Timer trigger.

  • Target: Select the Object the desired Timer trigger is on

  • Timer: Select the Timer trigger to stop

Reset All Properties

A Reset All Properties action resets every changed property back to their original value.

  • Target: Select the element that this action will affect

  • Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)

Set User Interaction

A Set User Interaction action lets you specify whether users can interact with a given object or not.

  • Target: Select the element that this action will affect

  • Interaction: Choose to enable or disable user interaction on the Target

Set Gyroscope

A Set Gyroscope action enables or disables the device’s gyroscope, thus controlling whether a gyroscope trigger fires.

  • Type: Choose to start the gyroscope or stop the gyroscope

Set Padding

A Set Padding action changes the padding on one or more sides of an object.

  • Target: Select the element that this action will affect

  • Padding: Flip the switch of the sides where the padding should change, and enter a padding value. Options include: All, Top, Left, Bottom, and Right. Selecting “All” will flip all other switches to allow you to set a consistent value around all sides (note, you can use the Expression Editor for advanced order actions)

  • Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)

Set Safe Area

A Set Padding action adds Safe Area padding or margin to an object.

  • Target: Select the element that this action will affect

  • Type: Choose to add Padding safe area as the Padding or the Margin

  • Top Safe Area: Choose to turn on the top safe area for the selected type

  • Bottom Safe Area: Choose to turn on the bottom safe area for the selected type

  • Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)

Navigation Actions

Open Sheet

An Open Sheet action opens another page as a sheet/modal on top of the user's current page.

  • Page: Select the page to open as a modal

  • Style: Choose if the modal is a Page Sheet or Form Sheet (only for iPad designs—coming soon!)

    • Page Sheet

      • Detents: Choose up to four possible modal heights. Options include:

        • Medium: use the native iOS medium detent size

        • Large: use the native iOS medium detent size

        • Custom: set a custom height in points or percent

        • None: set unused detents to none

      • Start Detent: Choose the sheet’s initial detent when opened

      • Corner Radius: Set the sheet’s corner radius (top two corners only)

      • Grabber: Choose if the sheet’s grabber is displayed

      • Prevent Dismissal: Choose if the user is able to dismiss the sheet by swiping down

      • Always Scrollable: Choose if the sheet’s content can be scrolled

      • Interaction Beneath: Choose if the user is able to interact with content beneath the sheet

Open Page

An Open Page action takes the user from the current page to a destination page.

  • Page: Select the destination page

  • Style: Choose how to open the page. Options include:

    • Default: the page opens natively

      • Without a navigation bar present, the page will enter from the bottom and will look like a modal sheet but without sheet properties

      • With a navigation bar present, the page will enter from the right and the nav bar will transition natively

    • Full Screen: the page will enter from the bottom, fill the full screen, and will need a Dismiss Page action to be dismissed

    • Custom: the page opens with custom animation

      • Animation: Choose how the destination page animates into view. Options include: None, Move In, Scale In, Push In, Fade In, or Scale Up

      • Move In From: Choose the direction that the destination page animates into view from. Options include: Top, Left, Bottom, or Right

      • Load on Root Level: Choose if the new page should load on top of all page containers

      • Animate: Choose to add action specific animation (note, this will override values in animate blocks)

Dismiss Sheet

A Dismiss Sheet action closes an open sheet/modal.

  • Animate: Choose if the modal animates as it closes

  • Close All Sheets: Choose to close all open sheets or just the top sheet

Dismiss Page

A Dismiss Page action takes the user back to the previous page. Dismiss Page actions inherit the action settings of the Open Page action that took the user to that page.

  • Duration: Set the number of seconds the action will take to complete

  • Easing: Choose the action's easing curve. Options include: Default, Linear, Ease In, Ease Out, Ease In & Out, Spring, or Custom.

Toggle Nav Bar

A Toggle Nav Bar action lets you show or hide a nav bar.

  • Visibility: Choose whether to show or hide the nav bar

Toggle Tab Bar

A Toggle Tab Bar action lets you show or hide a tab bar.

  • Visibility: Choose whether to show or hide the nav bar

  • Animated: Choose if the tab bar animates as it leaves view/comes into view

Go To URL

A Go To URL action takes the user to a set URL in their browser of choice. Note, this is different from a web view element.

  • URL: Enter the full URL for the destination

Set Page Loader

  • Target: Select the page loader that the action will affect

  • Select Page: Select the page that is loaded into the page loader

  • Remove Page: Choose if the previously loaded page should be removed

Effects Actions

Set Layer Blur

A Set Layer Blur action increases or decreases the blur on a layer.

  • Target: Select the element that this action will affect

  • Value: Set the object’s resulting layer blur radius (note, you can use the Expression Editor for advanced blur actions)

  • Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)

Set Progressive Blur

A Set Progressive Blur action increases or decreases the progressive blur on a layer.

  • Target: Select the element that this action will affect

  • Value: Set the object’s resulting progressive blur (note, you can use the Expression Editor for advanced blur actions)

  • Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)

Set SF Symbol Effect

A Set Symbol Effect action adds motion to an SF Symbol in one of six animation types.

  • Target: Select the SF Symbol that this action will affect

  • Animation: Choose the animation type (note, you can use the Expression Editor for advanced blur actions). Options include:

    • None: "Turns off any animation effects"

    • Appear: "Causes a symbol to gradually emerge into view"

      • Direction: Specify how the icon is animated into view. Options include:

        • Up: the icon scales up as it fades into view

        • Down: the icon scales down as it fades into view

    • Disappear: "Causes a symbol to gradually recede out of view"

      • Direction: Specify how the icon is animated out of view. Options include:

        • Up: the icon scales up as it fades out of view

        • Down: the icon scales down as it fades out of view

    • Pulse: "Varies the opacity of a symbol over time"

      • By Layer: Choose whether to animate the full icon at once or each layer sequentially (only applicable to some icons)

      • Speed: Choose how fast or slow the animation should be. Options include: 0.25x, 0.5x, 1x, 1.5x, and 2x

      • Repeat: Choose how many times the animation should repeat before ending. Select "continuous" to repeat indefinitely by sliding the slider all the way right

    • Bounce: "Briefly scales a symbol with an elastic-like movement that goes either up or down and then returns to the symbol’s initial state"

      • Direction: Specify whether the icon scales up or down from its original size as it bounces. Options include: Up and Down

      • By Layer: Choose whether to animate the full icon at once or each layer sequentially (only applicable to some icons)

      • Speed: Choose how fast or slow the animation should be. Options include: 0.25x, 0.5x, 1x, 1.5x, and 2x

      • Repeat: Choose how many times the animation should repeat before ending. Select "continuous" to repeat indefinitely by sliding the slider all the way right

    • Scale: "Changes the size of a symbol, increasing or decreasing its scale"

      • Direction: Specify whether the icon scales up or down from its original size as it bounces. Options include: Up and Down

      • By Layer: Choose whether to animate the full icon at once or each layer sequentially (only applicable to some icons)

      • Speed: Choose how fast or slow the animation should be. Options include: 0.25x, 0.5x, 1x, 1.5x, and 2x

    • Variable Color: "Incrementally varies the opacity of layers within a symbol"

      • Layer Style: Choose which layers are visible as they animate in. Options include:

        • Cumulative: layers animate in and stay visible until all layers are visible

        • Iterative: layers animate in one at a time, with each layer disappearing as the next layer comes into view

      • Hide Inactive Layers: Choose to show a lower opacity version of all layers at all times (on) or only show the active layer

      • Auto-Reverse: Choose whether to ping pong (on) or loop (off) the layers' opacity

      • Speed: Choose how fast or slow the animation should be. Options include: 0.25x, 0.5x, 1x, 1.5x, and 2x

      • Repeat: Choose how many times the animation should repeat before ending. Select "continuous" to repeat indefinitely by sliding the slider all the way right

Content Actions

Set Text

A Set Text action adds copy to a text element.

  • Target: Select the text element that this action will affect

  • Text: Set the text that will be added to the text element (note, you can use the Expression Editor for advanced data actions, like setting a variable to a text element)

  • Delay: Set the number of seconds between the trigger firing and the text updating

Set Image

A Set Image action sets a photo to an image element.

  • Target: Select the image element that this action will affect

  • Image: Set the photo that will be added to the image element

  • Remove Current Image: Choose if the current image data is removed

  • Transition: Choose how the new image will transition into view

Set Video

A Set Video action adds video content to a video element.

  • Target: Select the video element that this action will affect

  • Video: Set the video that will be added to the video element

  • Remove Current Video: Choose if the current video data is removed

  • Delay: Set the number of seconds between the trigger firing and the video being added

Set SF Symbol

A Set SF Symbol action replaces one SF Symbol with another.

  • Target: Select the SF symbol element that this action will affect

  • SF Symbol: Select the new icon

  • Variable Progress: Turn on your new icon's variable color (if applicable) and choose its progress

  • Replace Animation: Choose whether or not to animate the new icon into view

    • By Layer: Choose whether to animate in the full icon at once or each layer sequentially (only applicable to some icons)

    • Direction: Specify how the icon is animated. Options include:

      • Down Up: the existing icon scales down and fades out; the new icon scales up and fades in

      • None Up: the existing icon fades out; the new icon scales up and fades in

      • Up Up: the existing icon scales up and fades out; the new icon also scales up and fades in

Format Number

A Format Number action lets you format a number variable when it’s displayed in a text element.

  • Variable: Select the number variable that this action will format

  • Format: Choose the format for the variable. Options include:

    • Decimal: Add correctly placed commas and decimal points

    • Time: Calculate and display a number’s value in different units

      • From: Choose the original unit. Options include: Milliseconds, Seconds, Minutes, Hours

      • To: Choose the new unit or style. Options include:

        • hh:mm:ss—Hours, Minutes, Seconds

        • mm:ss:ms—Minutes, Seconds, Milliseconds

        • hh:mm—Hours and minutes, like a clock

        • mm:ss—Minutes and seconds, like a stop watch

        • mm—Minutes

        • ss—Seconds

        • hh—Hours

    • Percent: Turn a decimal number into a percent with a % sign.

    • Scientific: Write the number in scientific notation (ex. 5 → 5e0)

    • Spelled Out: Spell the number in English (ex. 5 → Five)

    • Ordinal: Turn the number into a rank (ex. 5 → 5th)

    • Currency: Turn the number into a currency value

      • Code: Choose a currency

      • Style: Choose a financial style. Options include:

        • Default

        • Accounting ($200.00)

        • ISO (USD 200.00)

        • Plural (200.00 US dollars)

  • Target: Select the text element that this action will affect

Round Number

A Round Number action lets you round a number variable to a certain decimal place when it’s displayed in a text element.

  • Variable: Select the number variable that this action will format

  • Before Decimal: Choose the number of decimal places should be rounded before the decimal point. The more zeros, the more the number is rounded. Options include:

    • None (ex. 2732)

    • 0. (2730)

    • 00. (2700)

    • 000. (3000)

  • After Decimal: Choose the number of decimal places should be rounded after the decimal point. The more zeros, the less the number is rounded. Options include:

    • None (ex. 3.193722)

    • .0 (3.2)

    • .00 (3.19)

    • .000 (3.194)

  • Target: Select the text element that this action will affect

Native Device Actions

Set Appearance

A Set Appearance action changes the UI Appearance to Light or Dark Mode.

  • Type: Set the appearance of the whole project or a specific object (and its children) only. Options include: Project (full project) and Target

  • Target: Select the object that this action will affect

  • UI Appearance: Set the appearance style. Options include: Auto, Light, and Dark

Set Haptic

A Set Haptic action plays haptic feedback.

  • Type: Select the type of haptic feedback. Options include: Notification haptics, Impact haptics, and Selection haptics

  • Notification / Impact: When the type is Notification or Impact, this property will appear with options

    • Notification options include: Success, Warning, or Error

    • Impact options include: Light, Medium, Heavy, Rigid, or Soft

  • Delay: Set the number of seconds after the trigger fires that the haptic should play

Set Status Bar

A Set Status Bar action changes the appearance of your device's status bar.

  • Appearance: Set the status bar's style. Options include: Auto, Light, and Dark

  • Show Status Bar: Choose if the status bar is visible or not

  • Animation: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)

Native iOS Control Actions

Set Segment

A Set Segment action selects a certain segment of a segmented control.

  • Target: Select the segmented control that this action will affect

  • Segment: Choose the segment to select

  • Delay: Set the number of seconds after the trigger fires before the chosen segment is selected

Dismiss Keyboard

A Dismiss Keyboard action dismisses any open keyboard.

  • Delay: Set the number of seconds after the trigger fires before the keyboard should dismiss

Set Focus

A Set Focus action focuses on a text field and opens the keyboard.

  • Direction: Choose to focus on a specific text field or cycle through all text fields. Options include:

    • Select Target: Focus on a specific text field

      • Target: Select the text field to focus

    • Forward: Cycle forward through all text fields on the page

      • Start Tag: Select the tag of the text field that should focus first

      • Wrap: Choose if the focus should cycle through all text fields again once they've all been focused

    • Backward: Cycle backward through all text fields on the page

      • Start Tag: Select the tag of the text field that should focus first

      • Wrap: Choose if the focus should cycle through all text fields again once they've all been focused

  • Delay: Set the number of seconds after the trigger fires before the text field focuses

Native Camera Actions

Open Camera

An Open Camera action opens the device's camera above the UI.

  • Output: Select the image element that the captured photo will fill

  • Camera: Choose if the camera should open as a front or back camera

  • Allow Editing: Choose if the user can crop their photo

  • Flash: Choose if the camera should have flash. Options include: Auto, On, or Off.

  • Delay: Set the number of seconds after the trigger fires that the camera should open

Open Library

An Open Library action opens the device's photo library.

  • Output: Select the image element that the selected photo will fill

  • Allow Editing: Choose if the user can crop their selected photo

  • Delay: Set the number of seconds after the trigger fires that the library should open

Capture

A Capture action takes a photo using the device's camera.

  • Mode: Choose to capture a photo or a video

  • Target: Select the camera view element that will preview the camera

  • Output: Select the image element that the selected photo will fill

  • Save to Library: Choose if the captured image or video should be saved to the device

Set Lens

A Set Lens action changes a camera view element's lens.

  • Mode: Choose to capture a photo or a video

  • Target: Select the camera view element that will preview the camera

  • Lens: Choose the resulting lens type. Options include: Ultra Wide, Wide, Telephoto, and Front

  • Digital Zoom: Set the level of zoom on the camera from 1x to 8x

  • Animate Zoom: Choose if the camera zoom should animate in

Set Preview

A Set Preview action sets the appearance of a camera view element's preview.

  • Target: Select the camera view element that will preview the camera

  • Preview: Choose if the camera view should or should not preview the camera's subject

  • Preview Quality: Choose the quality of the camera view element's preview

  • Preview FPS: Choose the frames per second of the camera view element's preview

Native Video Actions

Play / Pause

A Play/Pause action pauses, plays, or stops a targeted video.

  • Target: Select the video element that this action will affect

  • Playback: Choose if the video should play, pause, toggle between play & pause, or stop when the action is triggered

  • Delay: Set the number of seconds between the trigger firing and the action beginning

Seek

A Seek action unselects a currently selected map pin.

  • Target: Select the video element that this action will affect

  • Type: Choose if the video should seek to a certain point in the video or seek by a certain number of seconds

    • Seek To: Seek to a particular second in the video

      • Time: Choose the time mark in seconds

    • Seek Percent: Seek to a particular percentage in the video

      • Seek Percent: Choose the percent

    • Seek By: Seek forward or backward by a set number of seconds

      • Direction: Choose if the video should rewind or go forward

      • Seek Amount: Choose the number of seconds to seek

Loop Video

A Loop action will turn loop (continuously reply of the video) on or off.

  • Target: Select the video element that this action will affect

  • Loop: Choose to turn loop on or off

  • Delay: Set the number of seconds between the trigger firing and the action beginning

Native Audio Actions

Waveform / Set Input

A Waveform / Set Input action lets you change a waveform element’s input.

  • Target: Select the waveform element that this action will affect

  • Input: Select the audio input that the waveform will visualize. Options include: device microphone or any uploaded audio file

Waveform / Toggle Live

A Waveform / Toggle Live action lets you control the playback of a waveform with Live Mode.

  • Target: Select the waveform element that this action will affect

  • Listening: Select the waveform's behavior related to the audio file. Options include: Toggle, On, and Off

Set Audio

A Set Audio action controls the playback of an audio file.

  • Audio: Select the audio input that the action will control

  • Playback: Select the waveform's behavior. Options include:

    • Play: Play the selected audio file

      • Return to Start on End: Choose if the audio file should restart when it’s finished playing

    • Play At: Play the selected audio file from a selected timestamp

      • Time: Select the timestamp in seconds

    • Pause: Pause the selected audio file

    • Toggle: Toggle between playing and pausing the selected audio file

    • Stop: Stop the selected audio file. When played again, it will restart

    • Seek: Change the current playback location. Options include:

      • Seek To Start: Restart the audio file from the beginning

      • Seek To End: Skip to the end of the audio file

      • Seek To Percent: Change the playback location to a given percent progress

        • Percent: Choose the percent value

      • Seek To Time: Change the playback location to a given timestamp

        • Time: Select the timestamp in seconds

      • Seek By: Rewind or skip forward by X seconds

        • Direction: Choose to skip forward or backwards

        • Time: Select the distance in seconds

    • Rate: Change the speed of the selected audio file

      • Rate: Choose the speed multiplier

    • Pan: Change the stereo field position

      • Pan: Choose the value from -1.0 (full left) to 1.0 (full right) with 0 as center

    • Repeat: Repeat the selected audio file

      • Repeat: Choose the number of repetitions

Set Audio Mute

A Set Audio Mute action lets you mute the sound of an audio file.

  • Audio: Select the audio input that the action will control

  • Mute: Choose whether the audio is muted or unmuted

Set Audio Volume

A Set Audio Volume action lets you adjust the volume of an audio file.

  • Audio: Select the audio input that the action will control

  • Volume: Select the desired volume. Options range from 0-1

Native Map Actions

Set Map Pin

A Set Map Pin action selects or unselects a pin on a map.

  • Type: Choose to select or unselect a pin

  • Map: Select the map that this action will affect

  • Pin: Choose the index of the selected pin

  • Move to Pin: Choose if the map should move to the selected pin

  • Altitude: Choose how zoomed in the map appears (the Z distance)

  • Offset X: Offset the pin horizontally from the center of the map

  • Offset Y: Offset the pin vertically from the center of the map

  • Animate: Choose to add action specific animation with properties like Delay, Duration, and Easing (note, this will override values in animate blocks)

Rive Actions

Play / Pause Rive

A Play / Pause Rive action controls the playback of a Rive animation.

  • Target: Select the Rive element that this action will affect

  • Playback: Choose if the action should play, stop, pause, or restart the Lottie (please note, pause and stop Rive will have the same effect)

  • Delay: Set the number of seconds between the trigger firing and the video being added

Rive / Set Text

A Rive / Set Text action controls the playback of a Rive animation.

  • Target: Select the Rive element that this action will affect

  • Text Name: Enter the Text Name

  • Value: Enter the Rive text's value

Set Rive Input

A Set Rive Input action lets you control Rive's interactive values, like states and inputs. To read more, check out Rive's State Machine support page.

Please note Rive inputs only work if the animation is playing, so you'll often want Autoplay turned on in the Element Settings.

  • Target: Select the Rive element that this action will affect

  • State: Set the Rive's state, which can be created in Rive

  • Input: Set the input type, which you'll create in Rive as a Boolean (on/off), Trigger (specific animation with a start and end), and Numeric (a number associated with a value).

    • If your trigger is distinct (like tap or press), you'll set the input's value

    • If your trigger is continuous (like pan or scroll), you can set a range of input values to move through

Logic and Other Nodes

Set Variable

A Set Variable action assigns a new value to a variable. You can set multiple variables in the same action by clicking the + button.

  • Select Variable: Choose the variable to update. If no variables exist, you can define one in the Variables Panel.

  • Enter Value: Set the variable’s resulting value (note, you can *and should* use the Expression Editor for advanced variable actions)

Print

A Print action lets you debug your interactions by displaying a value on your device, outside of the UI. You can print multiple values in the same action by clicking the + button.

  • Title: Choose a title for each printed value

  • Value: Set the value you’d like to display

Duplicate

A Duplicate action lets you duplicate any object on your page within the prototype. This action will not affect your design file's layers.

  • Target: Select the object to duplicate

  • Duplicate to: Select the location of the duplicated object. Options include:

    • Same Parent: make the original and duplicated objects siblings

    • Page: make the duplicated object a parent of the page

    • Custom: choose a stack to place the duplicated object

  • Insert to: Choose if the duplicated object should be the first sibling or last sibling

  • Animate In: Choose whether or not to animate the duplicated object into view. Options include: Fade, Scale and Fade, and Blur and Fade.

Remove

A Remove action lets you remove any object from your page within the prototype. This action will not affect your design file's layers.

  • Target: Select the object to remove

  • Animate Out: Choose whether or not to animate the object out of view. Options include: Fade, Scale and Fade, and Blur and Fade.

  • Remove Child: Choose to remove one of the target's children, selected with the Index property

Condition

Conditions are the primary way to use logic in Play. They let you use a trigger to fire different actions in different circumstances.

Animate

An Animate block lets you add a delay, duration, and easing curve to multiple actions at once.

Delay

A Delay block allows you to add a delay without animating the resulting action.

Timer

Timers fires repeatedly at a given interval for a given number of repetitions.

Loop & Loop Children

Loop Children lets you target each of a selected container’s children using a single action. Loop iterates through a range of numeric values (from Start to End) that can be used in an action.

Group

A Group helper groups triggers, actions, and helpers together so they can be easily moved or collapsed.

Did this answer your question?