dotLottie Web Player Examples

This page provides practical examples of common use cases for the dotLottie Web Player. Each example demonstrates different features and implementation patterns.

Basic Playback Control

Interactive example showing basic animation controls:

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

Multi-Animation Support

Example showing how to work with multiple animations in a .lottie file:

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

Theming Support

Example demonstrating theme switching:

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

State Machine Interaction

Example showing state machine usage for interactive animations:

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
function handleHover() {
  dotLottie.postEvent("hover");
}

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

Layout Control

Example demonstrating different layout options:

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

Performance Optimization

Example showing performance-optimized configuration:

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

Event Handling

Comprehensive example of event handling:

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

Responsive Animation

Example showing how to handle responsive animations:

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

Next Steps

Explore Advanced Features
Learn about Performance Optimization
Check the API Reference for more options