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.
Asset
Use the Asset property to specify which Rive animation is displayed. You can drag a .riv from your computer into the canvas or upload a .riv file from the Asset property.
Content Mode
The Content Mode property defines how the animation is positioned within the element. There are three different settings for content mode: contain, cover, and fill.
Contain will scale down to fit the element’s bounds. This setting will also preserve the animation's aspect ratio, but it will leave some of the element’s area unfilled by the animation.
Cover will scale up to fill the element’s bounds. This setting will preserve the animation's aspect ratio, but in turn, may cause the animation to appear cropped.
Fill will stretch to fill the element’s bounds on both axes, changing the aspect ratio of the animation if necessary.
Artboard
Enter the name of the Artboard in the selected Rive file that you'd like to show. 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
If your Rive file has multiple states, the State property lets you choose which state should be displayed. This state can be changed using interactions.
Autoplay
The Autoplay property is a binary choice between on and off. When on, it will play the video automatically when a user enters the page.