Rive

How to integrate Rive with Webflow

Webflow supports Rive natively, meaning .riv files work directly in Webflow without marketplace apps or complex embedding. Upload animation files to your Assets panel and add them as elements that respond to hover, click, and scroll interactions through Webflow's Interactions system.

This native approach handles three integration patterns: direct .riv file uploads for standard animations, Webflow Interactions connections for state-driven behaviors, and custom code implementations when you need direct runtime control through JavaScript APIs.

Use native Rive elements

Upload .riv files directly to Webflow and control animation states through Webflow. This method works for interactive graphics that respond to user actions, loading animations, and state-driven UI components.

Add Rive animations by uploading .riv files through the Assets panel, then dragging the Rive element from Add panel > Media > Rive into your canvas. Configure animation properties including artboard selection, state machine assignment, fit modes (cover, contain, fill, fit width, fit height), and alignment options.

Configure the following animation properties:

• Autoplay settings — Set animations to start automatically on page load
• Layout controls — Configure how animations scale within containers using fit modes
• Artboard selection — Choose which artboard to display when .riv files contain multiple compositions
• State machine assignment — Connect specific state machines defined in your Rive file

Connect Rive state machines to Webflow Interactions for user-triggered behaviors. Set up interaction triggers on the Rive element itself or parent containers to control animation states based on hover, click, scroll position, or page load events.

Control Rive animations with Webflow Interactions

Connect Rive state machines to Webflow's Interactions system to trigger animation states based on user actions. This method enables hover effects, click interactions, and scroll-driven animations without custom code.

Webflow Interactions access Rive state machine inputs through three input types. Create interaction triggers on Rive elements or parent containers, then map them to state machine properties defined in your .riv file.

Use these state machine input types:

• Boolean toggles — Use Set Rive input actions to switch states on/off for binary animation behaviors like menu open/closed
• Trigger events — Fire one-time animation sequences on click, hover, or scroll events
• Number inputs — Pass percentage values or progress indicators to control animations dynamically, like scroll-driven progress bars

Set up interactions by selecting a Rive element, opening the Interactions panel, and creating new triggers. Choose Set Rive input from the animation actions menu and map specific state machine properties to interaction events.

Build with custom code and Rive runtimes

Access Rive's JavaScript runtime directly for programmatic animation control beyond Webflow Interactions capabilities. This method enables complex state logic, data-driven animations, and integration with third-party libraries.

Add the Rive Web Runtime through custom code blocks in page settings or embed elements. The runtime provides direct API access to animation playback, state machine variables, and event listeners that respond to animation state changes.

Use these implementation patterns:

• Direct state control — Use stateMachineInputs to set boolean, number, or trigger values through JavaScript
• Event handling — Listen for Rive events like onLoad, onPlay, and onPause to coordinate animations with other page behaviors
• Canvas vs WebGL2 rendering — Choose renderer types based on performance requirements, switching to WebGL2 for better frame rates
• Lite runtime — Use @rive-app/canvas-lite to reduce bundle size when your Rive files don't include text rendering (canvas-lite doesn't support Rive Text)

For high-performance implementations, the WebGL2 renderer provides better frame rates than the default Canvas renderer. Include the appropriate runtime package and configure the renderer option when initializing Rive instances.

Add custom code through Site settings > Custom code > Before tag for site-wide implementations, or use embed elements for page-specific controls. Access Rive elements through DOM queries and initialize runtimes with configuration objects that specify .riv file sources, artboards, and state machines.

What you can build

Integrating Rive with Webflow lets you add state-driven graphics that respond to user interactions with precise animation control.

• Interactive product showcases: Build product pages where hover interactions reveal features through animated callouts, and clicks trigger detailed view transitions that highlight specifications
• Animated navigation systems: Create menu interfaces with smooth state transitions between open/closed states, icon morphing on selection, and scroll-driven header animations
• Onboarding flows: Design multi-step user onboarding with animated progress indicators, interactive tutorials that respond to user actions, and character animations guiding through setup processes
• Dashboard visualizations: Build data dashboards with animated charts that update smoothly when values change, interactive toggles for filtering views, and status indicators with state-driven animations