Practical Examples for the dotLottie Web Player

Each recipe below is a self-contained snippet for a common task. Adapt the src URLs and element selectors to your project. For every available option and method, see the API Reference.

Add play, pause, and stop buttons

Wire the player's playback methods to buttons on the page:

<canvas id="animation"></canvas>
<div>
  <button onclick="play()">Play</button>
  <button onclick="pause()">Pause</button>
  <button onclick="stop()">Stop</button>
</div>

<script type="module">
  import { DotLottie } from "@lottiefiles/dotlottie-web";

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

  window.play = () => dotLottie.play();
  window.pause = () => dotLottie.pause();
  window.stop = () => dotLottie.stop();
</script>

Switch between animations in a .lottie file

Read the manifest after the load event, then load any animation by its ID:

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

// Once loaded, you can switch between animations
dotLottie.addEventListener("load", () => {
  // Get available animations
  const animations = dotLottie.manifest.animations;

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

Switch themes at runtime

Apply a theme packaged in the .lottie file by ID, and reset to the default when needed:

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

// Switch themes
function setTheme(isDark) {
  if (isDark) {
    dotLottie.setTheme("dark-theme");
  } else {
    dotLottie.setTheme("light-theme");
  }
}

// Reset to default theme
function resetTheme() {
  dotLottie.resetTheme();
}

Drive an interactive animation with a state machine

Load a state machine from the .lottie file, start it, and post events to trigger transitions:

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

// Initialize state machine
dotLottie.stateMachineLoad("button-states");
dotLottie.stateMachineStart();

// Trigger state changes with named event inputs
function handleHover() {
  dotLottie.stateMachineFireEvent("hover");
}

function handleClick() {
  dotLottie.stateMachineFireEvent("click");
}

Control how the animation fits the canvas

Set the layout at construction time or change it dynamically:

const dotLottie = new DotLottie({
  canvas: document.querySelector("#animation"),
  src: "animation.lottie",
  autoplay: true,
  layout: {
    fit: "contain",
    align: [0.5, 0.5],
  },
});

// Change layout dynamically
function updateLayout(fit) {
  dotLottie.setLayout({
    fit: fit,
    align: [0.5, 0.5],
  });
}

Configure rendering for performance

Match the device pixel ratio, freeze offscreen animations, and resize automatically:

const dotLottie = new DotLottie({
  canvas: document.querySelector("#animation"),
  src: "animation.lottie",
  autoplay: true,
  renderConfig: {
    devicePixelRatio: window.devicePixelRatio,
    freezeOnOffscreen: true,
    autoResize: true,
  },
});

Respond to player events

Listen for loading, playback, and frame events on the instance:

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

// Loading events
dotLottie.addEventListener("load", () => {
  console.log("Animation loaded");
});

dotLottie.addEventListener("loadError", (error) => {
  console.error("Loading failed:", error);
});

// Playback events
dotLottie.addEventListener("play", () => {
  console.log("Animation playing");
});

dotLottie.addEventListener("pause", () => {
  console.log("Animation paused");
});

dotLottie.addEventListener("stop", () => {
  console.log("Animation stopped");
});

dotLottie.addEventListener("complete", () => {
  console.log("Animation completed");
});

// Frame events
dotLottie.addEventListener("frame", (frameNo) => {
  console.log("Current frame:", frameNo);
});

dotLottie.addEventListener("loop", (count) => {
  console.log("Loop count:", count);
});

Make an animation responsive

Let the canvas follow its container width and enable automatic resizing:

<div style="width: 100%; max-width: 600px;">
  <canvas id="responsive-animation" style="width: 100%; height: auto;"></canvas>
</div>

<script type="module">
  import { DotLottie } from "@lottiefiles/dotlottie-web";

  const dotLottie = new DotLottie({
    canvas: document.querySelector("#responsive-animation"),
    src: "animation.lottie",
    autoplay: true,
    renderConfig: {
      autoResize: true,
    },
  });

  // Handle manual resize if needed
  window.addEventListener("resize", () => {
    dotLottie.resize();
  });
</script>

State machine recipes for interactive animations
Optimize performance for pages with many or complex animations
API Reference for the complete method list

Web player examples