Control Rive animations with Interactions with GSAP

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:

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

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 Rive animations with Interactions with GSAP

You can drive Rive animations based on site visitor actions like clicks, hovers, scrolls, and more. Instead of treating Rive elements as static embeds, you can bind directly to the ViewModel data inside your Rive file — changing numbers, text, colors, booleans, enums, and even switching artboards, all from the Webflow interactions timeline.

What is ViewModel data?

ViewModels are the data layer inside a Rive file. They expose properties — like numbers, colors, and booleans — that can be read and changed from outside the file. When you use Interactions with GSAP to control a Rive element, you're setting those ViewModel properties directly, letting your interaction timeline drive what's happening inside the animation.

Action types

There are two action types for controlling Rive elements in Interactions with GSAP:

• Set Rive — sets a ViewModel property to a specific value at a point in the timeline. Use this for non-animatable properties like text, artboards, enums, booleans, and triggers
• Animate Rive — smoothly animates a ViewModel property from one value to another over a duration. Use this for animatable properties like numbers and colors

Property types

There are seven property types you can control on a Rive element:

• Number — animate numeric values (e.g., a progress percentage, opacity, or rotation)
• Boolean — toggle true/false states (e.g., on/off, open/close, active/inactive)
• String — change text content (e.g., a label, heading, or status message)
• Color — set color values in any standard format: hex, RGB, HSL, or named colors (e.g., #FF5733, rgb(255, 87, 51), red)
• Enum — switch between predefined options exposed by your Rive file (e.g., small/medium/large)
• Trigger — fire a state machine trigger at a specific point in the timeline (e.g., on click, on scroll into view)
• Artboard — switch the active artboard within a single Rive component, enabling multi-scene transitions without multiple embeds

Example: Change a Rive artboard, color, and number on hover

You can add multiple properties to a single Set Rive action to coordinate changes across your Rive file in one step.

To animate a Rive element on hover:

1. Select your Rive element on the canvas
2. Go to the Interactions panel
3. Click New interaction
4. Choose Hover as the trigger
5. Click Add an action and select Set Rive
6. Give your animation a name (e.g., "Hover in")
7. Click Add property and choose the properties you want to animate (e.g., an artboard property called "characterArt", a color property called "fillColor", and a number property called "scale")
8. Set the target values for each property (e.g., "characterRed" for the artboard, #FF5733 for the color, 1.5 for the number)
9. Add a second trigger for Hover out and repeat the steps above to restore the original values

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.