dotLottie Web Player Animation Loading

The dotLottie Web Player supports multiple ways to load animations, accommodating both .lottie and .json formats.

Loading Methods

From URL

Load animations directly from a URL:

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

From JSON Data

Load animations from a JSON string:

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

Dynamic Loading

CodePen↗

You can also load new animations after initialization:

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

Multi-Animation Support

When working with .lottie files that contain multiple animations:

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

Loading Configuration

The loading configuration supports these options:

Option	Type	Description
`src`	string	URL to the animation file (`.lottie` or `.json`)
`data`	string \| ArrayBuffer	Animation data as string or ArrayBuffer
`autoplay`	boolean	Whether to start playing immediately after load
`loop`	boolean	Whether to loop the animation
`speed`	number	Initial playback speed
`mode`	string	Playback mode ("forward", "reverse", "bounce", "bounce-reverse")
`segment`	[number, number]	Frame range to play
`marker`	string	Named marker to play
`themeId`	string	ID of the dotLottie theme to initially use

Error Handling

Handle loading errors using the event listener:

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

Loading States

Monitor loading state through these properties:

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

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

Loading Animations with dotLottie Web Player