Rive is a real-time interactive design and animation tool that helps you create and run interactive animations. Below, we break down how you can embed your Rive animations into your projects.
Add the Rive Component
Click the “Add” icon on the left-side panel.
Search for “Rive” in the search bar.
Drag the Rive element to any desired location on the canvas.
Select the
.rivfile and upload it (maximum file size: 75MB).
Configure the Settings
Click the Rive element, and you’ll find the Properties tab on the right panel.
Artboards: Choose the default artboard under the Artboard dropdown section.
💡 Tips: Each .riv file has at least one artboard, and it can have multiple artboards depending on how the file was created.
State Machine: Choose the default state machine.
💡 Tips: The default state machine is the one that will play upon view.
Interaction settings for Rive
The Rive component includes custom interactions to make your animation more dynamic and engaging. Learn more about the available triggers in this documentation.
Once the trigger is selected, you can set the following actions to occur.
Action | Description |
Play | Starts playing the Rive animation. |
Pause | Pauses the Rive animation. |
Set state machine | Activates the selected state machine. |
Fire input | Activates the selected fire input. |