Load Animations with the dotLottie Web Player

The web player loads animations in both .lottie and .json formats, from a URL or from data you already have in memory. Use src for URLs, data for in-memory content, and load() to replace the animation later.

Load from a URL

Pass the file's URL as src:

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "https://lottie.host/animation.lottie", // or .json file
  autoplay: true,
});

Load from data

If you already have the animation in memory — a Lottie JSON string, a pre-parsed JSON object, or an ArrayBuffer of a .lottie file — pass it as data instead of src:

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  data: '{"v":"4.8.0","meta":{"g":"LottieFiles AE..."}',
  autoplay: true,
});

Load a new animation after initialization

CodePen↗

Call load() on an existing instance to replace the current animation and its configuration:

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
});

// Load a new animation
dotLottie.load({
  src: "https://lottie.host/new-animation.lottie",
  loop: true,
  autoplay: true,
});

The load() config also accepts playback options such as speed, mode, segment, marker, and themeId. See the configuration reference for the full list.

Load from a multi-animation file

If a .lottie file contains several animations, wait for the load event, read the manifest, then load an animation by ID:

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

// Once loaded, you can access the manifest
dotLottie.addEventListener("load", () => {
  // Get list of available animations
  const animations = dotLottie.manifest.animations;

  // Load a specific animation by ID
  dotLottie.loadAnimation(animations[0].id);
});

For switcher patterns and sequential playback, see Work with multi-animation files.

Handle loading errors

Listen for loadError to catch failed loads:

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

Check loading state

Use the isLoaded property or the load event to know when the animation is ready:

// Check if animation is loaded
console.log(dotLottie.isLoaded);

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

Control playback once the animation is loaded
How the web player works — the .lottie format and the manifest
API Reference for all configuration options

Load animations