Add Rive animations to your Webflow site.
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:
- Open the Assets panel
- Click the “cloud” upload icon
- Select a
.riv
file (or multiple files) from your computer
Then, you can add the Rive element to your site from the Assets panel:
- Go to Add panel > Media section
- Drag the Rive element onto the canvas
- Click Replace Rive sequence in the Rive element settings
- Choose your
.riv
file from the Assets panel
ImportantMake 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:
- Select your Rive element on the canvas
- Go to Element settings panel > Rive element settings
- Choose the artboard to display
- 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:
- The Boolean toggle interaction — lets you modify animation states based on a boolean value (e.g., true/false, on/off, open/close, etc.)
- The Trigger interaction — lets you modify animation states based on events without values (e.g., on click, on hover, etc.)
- The Number input interaction — lets you modify animation states based on a number value (e.g., a percentage)
NoteYou 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:
- Select your Rive element on the canvas
- Go to Interactions panel
- Click the “plus” icon next to Element trigger
- Choose “Mouse hover”
- Choose “Start an animation” from the Action dropdown in the On hover section
- Click the “plus” icon next to Timed animations
- Give your animation a name (e.g., “Hover in”)
- Click the “plus” icon next to actions
- Choose “Rive” under Integrations
- Choose a state to run from the Select a state machine dropdown under Rive
- Check the checkbox next to the toggle you want to use in the Boolean section (e.g., “isOpen”)
- Click Save
- Choose “Start an animation” from the Action dropdown in the On hover out section
- Click the “plus” icon
- Choose “Rive” under Integrations
- Choose the same state from the Select a state machine dropdown under Rive
- Check the checkbox next to the same toggle in the Boolean section
- Click Save
Example 2: Trigger an animation on click
You can also trigger a specific state on click:
- Select your Rive element on the canvas
- Go to Interactions panel
- Click the “plus” icon next to Element trigger
- Choose “Mouse click (tap)”
- Choose “Start an animation” from the Action dropdown in the On click section
- Click the “plus” icon next to Timed animations
- Give your animation a name (e.g., “On click”)
- Click the “plus” icon next to actions
- Choose “Rive” under Integrations
- Choose a state to run from the Select a state machine dropdown under Rive
- (Optional) Set another animation on a second click
- 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.