dotLottie Web Player Multi-Animation Support

The dotLottie Web Player provides support for working with .lottie files that contain multiple animations. This feature allows you to package multiple animations into a single file and switch between them at runtime.

Loading Multi-Animation Files

CodePen↗

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

Accessing Animations

Reading the Manifest

The manifest contains information about all available animations:

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);
  });
});

Switching Animations

Load a specific animation by its ID:

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

Implementation Examples

Animation Switcher

Example of creating an animation switcher:

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);
  });
});

Sequential Playback

Example of playing animations in sequence:

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);

Best Practices

Loading
- Wait for the 'load' event before accessing the manifest
- Handle potential loading errors
- Check if animations exist before attempting to load them
Animation Management
- Keep track of the currently active animation
- Consider animation state when switching
- Maintain consistent playback settings across switches
Performance
- Avoid rapid animation switching
- Consider preloading frequently used animations
- Clean up event listeners when no longer needed

Event Handling

Monitor animation switching with events:

// 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);
});