Skip to main content

Rive

An element that embeds a Rive animation in your prototype.

Updated this week

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

Links

Did this answer your question?