> ## Documentation Index
> Fetch the complete documentation index at: https://rive-migrating-to-data-binding-fixes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Animation Playback

> ⚠️ DEPRECATED: Use State Machines instead of direct animation playback at runtime

<Warning>
  **DEPRECATION NOTICE:** This entire page documents the legacy Animation
  Playback system. **For new projects:** Use <Link href="state-machines">State Machines</Link> instead. **For existing projects:** Plan
  to migrate from direct animation control to State Machines as soon as
  possible. **This content is provided for legacy support only.**
</Warning>

Rive lets you specify 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.

<Note>
  If you are trying to coordinate multiple animations' playback at runtime,
  consider using a state machine instead to do this for you!
</Note>

## 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.

```javascript theme={null}
// 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 Codesandbox link to try out the below code: [https://codesandbox.io/p/sandbox/adoring-sea-n7m59f](https://codesandbox.io/p/sandbox/adoring-sea-n7m59f)

```javascript theme={null}
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");
```