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.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.Animation
Select the Rive file’s state machine or animation. The state machine or animation can be changed using interactions.Direction
Set the animation’s direction to forward or backward. (Animations, not State Machines, only)Loop
Choose how the animation should repeat (Animations, not State Machines, only):- None: The animation does not repeat.
- Loop: The animation repeats continuously until stopped.
- Ping Pong: The animation plays in the selected direction, reverses, then repeats continuously until stopped.
Auto Start
Choose if the animation should play automatically when a user enters the page.Expression Editor Properties
In addition to the properties below, glass effect containers also have access to general object properties in the Expression Editor.
Is Playing
Boolean for if the Rive animation is currently playing (true) or not (false).booleanValues:
true = playingfalse = not playingCan get or set the value.
Rive Current State
Current state of the Rive."string"Can get or set the value.