Overview
Rive animations are interactive motion graphics that can be embedded into your native prototypes in Play. Once you've created a Rive animation or found one you like from their community, you can upload it as an asset in Play, adjust its settings, and add Rive-specific interactions.
Interactions in Rive carry over, so if you build a Rive that supports gestures, you’re able to interact with it in Play.
Element Properties
Asset
Select the Rive file. Upload a .riv from the Assets Panel or drag and drop it into the canvas.
Content Mode
Set how the Rive is positioned within the element:
Cover: The Rive will scale up to fill the element’s bounds, preserving the aspect ratio but potentially cropping the Rive.
Contain: The Rive will scale down to fill the element’s bounds, preserving the aspect ratio but potentially leaving some of the element's area unfilled.
Fill: The Rive will stretch to fill the element’s bounds on both axes, changing the aspect ratio if necessary.
Fit Height: The Rive will scale to fill the element’s height, preserving the aspect ratio but potentially leaving some of the element's area unfilled or cropping the element.
Fit Width: The Rive will scale to fill the element’s width, preserving the aspect ratio but potentially leaving some of the element's area unfilled or cropping the element.
Layout: The Rive will align to the top left corner at its original size.
No Fit: The Rive will stay the same size, regardless of the element's size.
Scale Down: The Rive will scale down to fill the element’s bounds, similar to Contain.
Artboard
Select the artboard name for the Rive file. If this field is empty, we'll default to the main artboard in the Rive file.
You can select the artboard in Design Mode and change the selected artboard with interactions.
State Machine
Select the Rive file's state, if applicable.
The state can be changed using interactions.
Auto Start
Choose if the animation should play automatically when a user enters the page.
Expression Editor Properties
Is Playing
Rive.isPlaying
Boolean for if the Rive animation is currently playing (true) or not (false).
Rive Current State
Video.isPlaying
Current state of the Rive.
Date pickers also have access to general object properties.
Resources
Related Triggers & Actions
Rive Event trigger
Set Rive Input action
Set Rive Playback action
Rive / Set Text action
Set Rive Artboard action
Set Rive Volume action
Set Rive Mute action
Links