stevysmith Rive Web Runtime
Embed and control Rive animations on the web with JavaScript/TypeScript.
Installation
# Canvas renderer (smaller, good for most cases)
npm install @rive-app/canvas
# WebGL renderer (better for complex animations)
npm install @rive-app/webgl
Quick Start
import { Rive } from '@rive-app/canvas';
const rive = new Rive({
src: 'animation.riv',
canvas: document.getElementById('canvas') as HTMLCanvasElement,
autoplay: true,
onLoad: () => {
console.log('Animation loaded');
},
});
Key Concepts
| Concept | Description |
|---|---|
| Rive Instance | Main controller for the animation |
| State Machine | Interactive logic built in Rive editor |
| Inputs | Variables to control state machine (Boolean, Number, Trigger) |
| Events | Signals fired by the state machine |
| Artboard | Container for animation content |
Common Patterns
Loading Animation
const rive = new Rive({
src: 'animation.riv', // URL or path
canvas: canvasElement,
stateMachines: 'State Machine', // Name from Rive editor
autoplay: true,
onLoad: () => {
// Animation ready
},
onStateChange: (event) => {
// State changed
},
});
Controlling Inputs
// Get inputs
const inputs = rive.stateMachineInputs('State Machine');
// Set boolean
const toggle = inputs.find(i => i.name === 'isActive');
toggle.value = true;
// Set number
const progress = inputs.find(i => i.name === 'progress');
progress.value = 0.75;
// Fire trigger
const click = inputs.find(i => i.name === 'onClick');
click.fire();
Handling Events
rive.on('riveevent', (event) => {
console.log('Event:', event.data.name);
// Access custom properties
const data = event.data.properties;
});
Cleanup
// Always cleanup when done
rive.cleanup();
Rules
@file rules/loading.md @file rules/state-machines.md @file rules/inputs.md