---

Rive turns static graphics into interactive vector animations that react to hover, click, and scroll in real time. Drag a `.riv` file onto the canvas, connect its state machine to Interactions triggers, and skip the custom canvas code or JavaScript animation libraries you'd normally wire up by hand.

Motion designers build the animation logic, no-code builders place and wire it visually, and front-end developers reach for the web runtime when they need state machine control or data binding — so marketing teams and agencies can ship interactive hero sections and animated brand assets without long development cycles.

## **How to integrate Rive with Webflow**

**What is Rive?** [Rive](https://rive.app/) is an interactive experience engine that combines design and animation with code in one environment. Animations export as `.riv` files and run through open-source runtimes on the web and in apps. Rive uses state machines to connect animations and define the logic that drives transitions between them.

Reach for Rive and Webflow together when a page needs animation that reacts to the visitor. Think scroll-driven product storytelling or a hero animation that responds to hover. Rive is a native format in the Designer, so most of this works without leaving the canvas.

The Rive-Webflow integration supports three approaches:

- The **native Rive element** lets you drag `.riv` files onto the canvas and connect them to Interactions without code.
- The **Rive iframe embed** lets you paste a generated embed snippet into a [Code Embed](https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed) element.
- The **Rive web runtime** gives you full control over playback and data binding, but you'll need JavaScript.

Most implementations combine two or more of these methods depending on the complexity of the setup.

### **Use the native Rive element**

The native Rive element is the recommended path and needs zero code. Because Rive is native to the Designer, you upload a `.riv` file to the Assets panel and drag it onto the canvas like any other media element. Configure the artboard and state machine in the element settings, then connect the animation to Interactions for visitor-driven responses. Full details are in [Rive's native Webflow support announcement](https://rive.app/blog/rive-is-natively-supported-in-webflow) and the [help guide for embedding Rive animations](https://help.webflow.com/hc/en-us/articles/33961216978451-Embed-Rive-animations-with-Classic-Interactions).

This method covers layout properties, autoplay settings, touch scroll, event handling, and Interactions triggers.

To set up the integration:

1. Open the Assets panel, click the upload icon, and select your `.riv` file.
2. In the Add panel, go to Media and drag the Rive element onto the canvas.
3. Click **Replace Rive sequence** and choose your `.riv` file.
4. In element settings, choose the artboard and state machine.
5. Connect the state machine to Interactions for hover, click, or scroll.

Uploaded `.riv` files auto-host on the CDN at a public URL, so free Rive plan users can still use this path. The April 2026 Rive Interactions GSAP update lets you bind interaction data directly into Rive scene data through GSAP-powered Interactions, so scroll and click values drive the animation in real time without custom JavaScript. Documented outcomes from that update include a 67% decrease in dev ticketing, a 56% increase in form fills, and a 20% increase in site-wide conversion, per the [Rive Interactions GSAP update](/content/updates/rive-interactions-gsap/index.html).

### **Add Rive animations with Code Embed elements**

Use the iframe embed method when you want to drop a finished Rive file onto a page without wiring up the native element or writing runtime code. Rive generates an iframe snippet you paste into a [Code Embed](https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed) element. This is a paste-only path. You need a Rive Voyager or Enterprise plan to generate embed URLs, and a paid Site or Workspace plan to use Code Embed elements.

To generate and place the embed:

1. In the Rive editor, click the **hamburger menu** in the top-left corner.
2. Select **Generate Embed URL** and copy the Embed code iframe snippet.
3. In the Designer, add a Code Embed element from the Add panel and paste the iframe.

To make the iframe responsive, change its attributes to `width="100%"` and `height="100%"`, then select the Code Embed element on the canvas and set explicit width and height values in the Style panel. Embed URLs are snapshots, so any change to the Rive file means you need to generate a new link. Details are in the [Rive HTML embed docs](https://rive.app/docs/integrations/html-embed).

### **Build with the Rive web runtime and** [**Webflow Data API**](https://developers.webflow.com/data/reference/rest-introduction)

The Rive web runtime gives you programmatic control over playback and data-bound layouts. Reach for it when the native element or iframe cannot do what you need, such as swapping artboards at runtime or driving animation from [CMS](https://help.webflow.com/hc/en-us/articles/33961307099027-Intro-to-the-Webflow-CMS) data. You'll need JavaScript for this path, and CMS-driven pipelines need server-side development against the [Data API](https://developers.webflow.com/data/reference/rest-introduction). Rive's integration is runtime and SDK based, so there's no Rive REST API to call.

The [Rive web runtime](https://rive.app/docs/runtimes/web/web-js) loads and controls `.riv` files on the page. Use the `@rive-app/webgl2` package for Webflow projects. Pair it with the [Data API](https://developers.webflow.com/data/reference) for [CMS collections](https://help.webflow.com/hc/en-us/articles/33961307099027-Intro-to-the-Webflow-CMS) and script registration, plus [webhooks](https://developers.webflow.com/data/reference/all-events) for real-time events when CMS items change.

#### **Load the Rive runtime with custom code**

Add the runtime script in your site head, then render the animation into a canvas element. This gives you access to runtime methods, layout control, and data-bound properties. First, add the script tag through [custom code in the head and body tags](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags).

To set up the runtime:

1. Go to **Site Settings** \> **Custom code** \> **Head** and add the runtime: `<script src="https://unpkg.com/@rive-app/webgl2@2"></script>`
2. Add a canvas through a Code Embed element on the canvas: `<canvas id="canvas" width="500" height="500"></canvas>`
3. Initialize Rive in a script that points at your `.riv` URL, canvas, and state machine:
   
```js
const r = new rive.Rive({
  src: "https://cdn.rive.app/animations/vehicles.riv",
  canvas: document.getElementById("canvas"),
  autoplay: true,
  autoBind: true,
  stateMachines: "bumpy",
  onLoad: () => { r.resizeDrawingSurfaceToCanvas(); },
});
```

Two habits keep runtime animations clean. Call `r.resizeDrawingSurfaceToCanvas()` inside `onLoad` and on `window.resize` to avoid blurry rendering on retina displays. Call `r.cleanup()` when you remove an animation from the DOM, for example on modal close, to free memory. For runtime interaction, use the [Data Binding API](https://rive.app/docs/runtimes/web/data-binding) with `autoBind: true` rather than the deprecated State Machine Inputs pattern.

#### **Drive Rive content from the CMS**

Bind CMS data to Rive properties when each collection item needs its own animation, such as per-product or per-article graphics. Use the `riveAsset` CMS field type to bind Rive assets to elements on the canvas. For programmatic updates, the Data API and webhooks keep animation content in sync with your content.

To wire up CMS-driven content:

1. Update items with `PATCH /v2/collections/{collection_id}/items/live` when content driving the animation changes.
2. Register a webhook for `collection_item_changed` or `collection_item_published` to fire on updates.
3. Bind CMS values to Rive properties at runtime through `autoBind: true` and `r.viewModelInstance`.

Custom code locations have a 50,000-character limit; reference external scripts with a `src` URL when your code runs long. You can also register the Rive runtime site-wide through the API with `POST /v2/sites/{site_id}/registered_scripts/hosted`.

## **What can you build with the Rive Webflow integration?**

Integrating Rive with Webflow lets you ship interactive vector animation that reacts to visitors without hand-coding canvas logic or exporting heavy video.

- **Interactive hero animations:** Build a full-screen hero that responds to hover and scroll, like Jasper's award-winning [Webflow site](/content/webflowconf/2025/webflow-awards-recipient/jasper/index.html) with its interactive Canvas page.
- **Scroll-driven storytelling:** Bind scroll position to Rive scene data through GSAP-powered Interactions, so an animation advances as visitors move down a product overview page like Frontify's [OFF+BRAND build](/content/blog/frotify-rive-offbrand/index.html).
- **Interactive brand guidelines:** Assemble a documentation site with click-reactive graphics, like Dropbox's [interactive brand guidelines site](https://rive.app/blog/dropbox-launches-interactive-brand-guidelines-site-using-rive) and its playful iconography carousel.
- **CMS-driven animated content:** Attach a unique `.riv` animation to each collection item using the `riveAsset` field, so every product or article page renders its own animated graphic from one template.

If you need more control over runtime playback or CMS-driven content updates, the API integration path covers those cases with full flexibility.

## Frequently asked questions

- Does Webflow natively support Rive files?  
  Yes. Rive is a native format in Webflow, so you upload `.riv` files to the Assets panel and drag them onto the canvas like any other media element. From there you choose the artboard and state machine in the element settings.

- Can Rive animations respond to Webflow Interactions?  
  Yes, and without code. The native integration connects a Rive state machine to Webflow Interaction triggers. The April 2026 Rive Interactions GSAP update lets scroll and click data flow directly into Rive scene data in real time.

- Where do I add the Rive web runtime script in Webflow?  
  Add it in **Site Settings** \> **Custom code** \> **Head** for site-wide scope. For a single page, use **Page Settings**. For element-level placement, use a Code Embed element.

- Are there character limits on custom code in Webflow?  
  Yes. Custom code in a Code Embed element cannot exceed 50,000 characters, and each other custom code location shares the same limit. If your code runs longer, store it on an external server and reference it with a `<script src="...">` tag, or split it across multiple Code Embed elements. The Code Embed documentation also notes that these elements support `<script>` and `<style>` tags but not `<html>`, `<body>`, or `<head>`.

- Is there a Rive connector for Zapier or Make?  
  No. Rive has no connector on Zapier, Make, n8n, or viaSocket, because the integration lives natively inside Webflow rather than exposing an external API surface. Webflow itself does have connectors on those platforms for CMS content, which is useful when Webflow CMS data drives Rive animations. Typical Webflow connector trigger and action names include **Webflow: New Form Submission**, **Webflow: New Order**, **Webflow: Create CMS Item**, **Webflow: Update CMS Item**, **Webflow: Delete CMS Item**, and **Webflow: Publish**. For API-based CMS sync, register a webhook on events like `collection_item_changed` using the [Webflow webhook events reference](https://developers.webflow.com/data/reference/all-events).