Skip to main content
Rive

An element that embeds a Rive animation in your prototype.

Updated over 2 weeks ago

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.


Resources

Related Triggers & Actions

Links

Did this answer your question?