Embed Rive animations

You can use Rive to build lightweight, interactive motion graphics and animations and add them directly to your Webflow site. Then, you can control the Rive animation from the Designer or with custom code.

How to add a Rive element to your site

To add a Rive element to your site, you’ll first need to add a .riv file to the Assets panel:

1. Open the Assets panel
2. Click the “cloud” upload icon
3. Select a .riv file (or multiple files) from your computer

Then, you can add the Rive element to your site from the Assets panel:

1. Go to Add panel > Media section
2. Drag the Rive element onto the canvas
3. Click Replace Rive sequence in the Rive element settings
4. Choose your .riv file from the Assets panel

Important: Make sure your Rive files are optimized for web use to maintain fast load times.

How to adjust animation settings

Rive settings control how the Rive animation appears on your site.

To adjust animation settings:

1. Select your Rive element on the canvas
2. Go to Element settings panel > Rive element settings
3. Choose the artboard to display
4. Choose the state to run

You can also customize the fit and alignment of your Rive animation in Element settings panel > Rive element settings > Layout, as well as adjust its width and height in the Style panel.

You can preview your Rive animation by clicking Preview animation in Rive element settings. Note that your Rive animation must be playing in order to preview layout changes (e.g., fit, alignment, etc.).

How to control animations with interactions

With interactions, you can trigger Rive animations based on site visitor actions like clicks, hovers, and more. You can also toggle between different animation states using boolean values, trigger specific states with clicks, and manage playback control.

There are three available interaction types for Rive animations:

1. The Boolean toggle interaction — lets you modify animation states based on a boolean value (e.g., true/false, on/off, open/close, etc.)
2. The Trigger interaction — lets you modify animation states based on events without values (e.g., on click, on hover, etc.)
3. The Number input interaction — lets you modify animation states based on a number value (e.g., a percentage)

Note: You can’t set interactions on Rive elements that don’t have a state set in Rive element settings.

Example 1: Play an animation using a boolean toggle on hover and hover out

With interactions, you can toggle between a Rive element’s states on hover and hover out:

1. Select your Rive element on the canvas
2. Go to Interactions panel
3. Click the “plus” icon next to Element trigger
4. Choose “Mouse hover”
5. Choose “Start an animation” from the Action dropdown in the On hover section
6. Click the “plus” icon next to Timed animations
7. Give your animation a name (e.g., “Hover in”)
8. Click the “plus” icon next to actions
9. Choose “Rive” under Integrations
10. Choose a state to run from the Select a state machine dropdown under Rive
11. Check the checkbox next to the toggle you want to use in the Boolean section (e.g., “isOpen”)
12. Click Save
13. Choose “Start an animation” from the Action dropdown in the On hover out section
14. Click the “plus” icon
15. Choose “Rive” under Integrations
16. Choose the same state from the Select a state machine dropdown under Rive
17. Check the checkbox next to the same toggle in the Boolean section
18. Click Save

Example 2: Trigger an animation on click

You can also trigger a specific state on click:

1. Select your Rive element on the canvas
2. Go to Interactions panel
3. Click the “plus” icon next to Element trigger
4. Choose “Mouse click (tap)”
5. Choose “Start an animation” from the Action dropdown in the On click section
6. Click the “plus” icon next to Timed animations
7. Give your animation a name (e.g., “On click”)
8. Click the “plus” icon next to actions
9. Choose “Rive” under Integrations
10. Choose a state to run from the Select a state machine dropdown under Rive
11. (Optional) Set another animation on a second click
12. Click Save

How to control Rive animations with custom code

While you can control Rive animations with interactions natively in Webflow, you can also use Rive runtimes to build complex or non-standard interactions, synchronize animations with external data sources, and create animations that respond to more specific site visitor actions or API events. Rive runtimes let you tie Rive animation states to a wide range of events, such as form submissions, page scroll process, time-based or sequence-based triggers, multiple user inputs, or integrations with external data or APIs.

For example, you could use Rive runtimes to:

• trigger a success animation when a form is submitted to add more personalized feedback for site visitors
• animate elements (e.g., visual progress indicators, background effects, etc.) as a site visitor scrolls down the page
• create dynamic animations that update based on real-time data changes from external APIs (e.g., a live data chart)

For more inspiration and information on using Rive with custom code, check out Riveflow.