Skip to main content
Actions
Updated over a month ago

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

Native Device Actions

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