Rive

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 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 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 and the help guide for embedding Rive animations.

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.

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 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.

Build with the Rive web runtime and Webflow Data API

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 data. You'll need JavaScript for this path, and CMS-driven pipelines need server-side development against the Data API. Rive's integration is runtime and SDK based, so there's no Rive REST API to call.

The Rive web runtime loads and controls .riv files on the page. Use the @rive-app/webgl2 package for Webflow projects. Pair it with the Data API for CMS collections and script registration, plus webhooks 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.

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:

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 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 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.
• Interactive brand guidelines: Assemble a documentation site with click-reactive graphics, like Dropbox's interactive brand guidelines site 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.