Skip to main content

Web — State Machine Playback

A state machine (a logic graph that decides which animation plays based on conditions) in Rive can be driven directly from JavaScript. Think of it like a traffic light controller — it sits in the background, watches for signals, and switches between states automatically. This page covers the most common control patterns.

Autoplay a State Machine​

Set autoplay: true to start the state machine as soon as the file loads.

tip

Note: this page uses the CDN global (rive.Rive). If you installed via npm and used import Rive from '@rive-app/webgl2', use new Rive({...}) instead.

const r = new rive.Rive({
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  canvas: document.getElementById('canvas'),
  autoplay: true,
  stateMachines: 'bumpy',
  onLoad: () => {},
});

Play, Pause, and Stop​

Use the play, pause, and stop methods to control playback by hand.

const r = new rive.Rive({
  src: 'https://cdn.rive.app/animations/vehicles.riv',
  canvas: document.getElementById('canvas'),
  stateMachines: 'bumpy',
});

// Later, trigger these however you like:
r.play();
r.pause();
r.stop();

Reset the State Machine​

Call reset() to tear down the current artboard and state machine and start over from scratch. Pass the same options you would give the constructor.

r.reset({
  stateMachines: 'bumpy',
  autoplay: true,
});

See Rive Parameters for all available RiveResetParameters fields.

Inputs​

State machine inputs are values your code sets to drive transitions — like dials on a control panel that tell the animation what to do next. Common types:

  • Boolean — a true/false flag, e.g., isHovered
  • Number — a numeric value, e.g., speed
  • Trigger — fires once and resets automatically
onLoad: () => {
  const inputs = r.stateMachineInputs('bumpy');
  const speedInput = inputs.find(i => i.name === 'Speed');
  speedInput.value = 5;
}

Listening to Events​

Rive can emit named events from a state machine (signals the animation sends back to your code). Subscribe with onEvent to react to them.

r.on(rive.EventType.RiveEvent, (event) => {
  console.log('Rive event:', event.data.name);
});