Multi-Animation .lottie Files in the dotLottie Web Player

A single .lottie file can package several animations. To switch between them at runtime, load the file, read its manifest, and call loadAnimation() with the ID you want.

Load a multi-animation file

CodePen↗

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "multi-animations.lottie",
  autoplay: true,
});

To start on a specific animation instead of the first one, pass its ID as animationId in the constructor. See the configuration reference.

List the available animations

The manifest describes every animation in the file. Wait for the load event before reading it:

dotLottie.addEventListener("load", () => {
  // Get list of all animations
  const animations = dotLottie.manifest.animations;

  // Log animation details
  animations.forEach((animation) => {
    console.log("Animation ID:", animation.id);
  });
});

Switch to another animation

Load a specific animation by its ID:

// Load animation by ID
dotLottie.loadAnimation("animation-id");

Check that the ID exists in the manifest before loading it, and keep track of the currently active animation (dotLottie.activeAnimationId) if your UI needs it.

Build an animation switcher

Generate one control per animation from the manifest:

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "animations.lottie",
  autoplay: true,
});

dotLottie.addEventListener("load", () => {
  const animations = dotLottie.manifest.animations;

  // Create buttons for each animation
  animations.forEach((animation) => {
    const button = document.createElement("button");
    button.textContent = animation.id;
    button.onclick = () => dotLottie.loadAnimation(animation.id);
    document.body.appendChild(button);
  });
});

Avoid rapid switching — each switch loads a new animation into the renderer.

Play animations in sequence

Advance to the next animation whenever the current one completes:

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "animations.lottie",
  autoplay: true,
});

let currentIndex = 0;
const playNextAnimation = () => {
  const animations = dotLottie.manifest.animations;
  if (currentIndex >= animations.length) {
    currentIndex = 0;
  }
  dotLottie.loadAnimation(animations[currentIndex].id);
  currentIndex++;
};

dotLottie.addEventListener("complete", playNextAnimation);

Handle loading events

Each switch triggers a fresh load, so handle both success and failure:

// Listen for animation loading
dotLottie.addEventListener("load", () => {
  console.log("Animation loaded");
});

// Handle loading errors
dotLottie.addEventListener("loadError", (error) => {
  console.error("Failed to load animation:", error);
});

Remove event listeners you no longer need with removeEventListener().

How the web player works — the .lottie format and the manifest
Load animations for the other loading methods
API Reference for the manifest object structure

Work with multi-animation files