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.
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.
Artboard
Enter the artboard name for the selected Rive file. If this field is empty, we'll default to the main Artboard in the Rive file.
You must enter the exact Artboard name from Rive. Once we're able to access Rive packages, we'll allow you to select Artboard rather than type them.
You can only select the Artboard in Design Mode. You cannot change the selected Artboard with interactions at this time.
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
Links