Rive lets you specify what artboard to use, what animations and state machines to mix and play and control the play/pause state of each animation.

The term animations may collectively refer to both animations and state machines. In this section, we explore how to deal with specific animation playback, rather than state machines.

If you are trying to coordinate multiple animations’ playback at runtime, consider using a state machine instead to do this for you!

​
Choosing an artboard

When a Rive object is instantiated, the artboard to use can be specified. If no artboard is given, the default artboard is used. Only one artboard can be used at a time.

new rive.Rive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    canvas: document.getElementById('canvas'),
    artboard: 'Truck',
    autoplay: true
});

​
Choosing starting animations

Starting animations can also be chosen when Rive is instantiated. The first animation on the artboard may play if one is not provided, or a state machine is not set.

// Play the idle animation
new rive.Rive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    canvas: document.getElementById('canvas'),
    animations: 'idle',
    autoplay: true
});

​
Controlling playback

Playback of each animation and state machine can be separately controlled. You can play and pause playback using the play , pause and stop methods, either passing in the names of the animations you want to affect or passing in nothing which will affect all instanced animations.

Invoking Playback Controls

With the web runtime, you can provide callback functions to receive notification when certain animation events have occurred:

  • onLoad when a rive file has been loaded and initialized; it’s now ready for playback
  • onPlay when one or more animations play; provides a list of animations
  • onPause when one or more animations pause; provides a list of animations
  • onStop when one or more animations are stopped; provides a list of animations
  • onLoop when an animation loops; provides the animation name

See the following codepen link to try out the below code: https://codepen.io/zplata/pen/yLPqLRa

const idleButton = document.getElementById("idle");
const wipersButton = document.getElementById("wipers");
const loopDiv = document.getElementById("loop");

const truck = new rive.Rive({
  src: "https://cdn.rive.app/animations/vehicles.riv",
  artboard: "Jeep",
  canvas: document.getElementById("canvas"),
  layout: new rive.Layout({ fit: "fill" }),
  // Listen for play events to update button text
  onPlay: (event) => {
    const names = event.data;
    names.forEach((name) => {
      if (name === "idle") {
        idleButton.innerHTML = "Stop Truck";
      } else if (name === "windshield_wipers") {
        wipersButton.innerHTML = "Stop Wipers";
      }
    });
  },
  // Listen for pause events to update button text
  onPause: (event) => {
    const names = event.data;
    names.forEach((name) => {
      if (name === "idle") {
        idleButton.innerHTML = "Start Truck";
      } else if (name === "windshield_wipers") {
        wipersButton.innerHTML = "Start Wipers";
      }
    });
  },
  onLoop: (event) => {
    loopDiv.innerHTML = `Looped Animation: ${event.data.animation}`;
  }
});

idleButton.onclick = (_) =>
  truck.playingAnimationNames.includes("idle")
    ? truck.pause("idle")
    : truck.play("idle");

wipersButton.onclick = (_) =>
  truck.playingAnimationNames.includes("windshield_wipers")
    ? truck.pause("windshield_wipers")
    : truck.play("windshield_wipers");

Was this page helpful?

Suggest editsRaise issue
Getting StartedLayout