For more information on designing and building state machines in Rive, please refer to: State Machine. Rive’s state machines provide a way to combine a set of animation states and manage the transition between them that can be programmatically controlled with Data Binding.

​
Playing state machines

State machines are instantiated by providing a state machine name to the Rive object when instantiated.

​
Autoplay the State Machine

To autoplay a state machine immediately after it loads, simply set autoplay to true.
const r = new rive.Rive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    canvas: document.getElementById('canvas'),
    autoplay: true,
    stateMachines: 'bumpy',
    onLoad: () => {}
});

​
Controlling State Machine Playback

You can manually play and pause the State Machine using the play, pause, and stop methods.
const r = new rive.Rive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    canvas: document.getElementById('canvas'),
    stateMachines: 'bumpy',
    onLoad: () => {}
});

const handlePlay = () => {
  r.play()
}

const handlePause = () => {
  r.pause()
}

const handleStop = () => {
  r.stop()
}