Load a file

1. Load a Rive file

With the Rive engine instantiated, we can load in our Rive (.riv) animation file

const req = new Request('./rive/loader.riv');
fetch(req).then((res) => {
  return res.arrayBuffer();
}).then((buf) => {
  // we've got the raw bytes of the animation,
  // let's load them into a Rive file
  const file = rive.load(new Uint8Array(buf));
  // ...
})

2. Grab an artboard

In Rive, animations are tied to artboards. A Rive file can have multiple artboards, but if you're just working with one you can grab it via defaultArtboard

const artboard = file.defaultArtboard();

Alternatively, you can reference a specific artboard

const artboard = file.artboard('my_artboard');

3. Reference an animation

Artboards hold references to animations. Reference a particular animation via its name set within the editor.

const myAnim = artboard.animation('animation_name');

Its good practice to create an instance of your animation

const myAnimInstance = new rive.LinearAnimationInstance(myAnim);

An animation instance is useful if you want Rive to manage state, which holds its time and direction. Rive manages looping via the instance. If you want to control the animation's time manually, then an instance isn't necessary; you can do this directly with the animation object.

We’re now ready to display and run the animation...