Skip to main content
Rive Animations
Updated over 4 months ago

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.

Rive

Use the Rive property to specify which animation is displayed. You can use the upload asset button from the Add Bar or drag a .riv from your computer into the canvas.

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.

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.

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.

Did this answer your question?