Usage

Basic Usage

import { DotLottie } from 'dotlottie-web';

const canvas = document.querySelector("canvas");

const dotLottie = new DotLottie({
  canvas,
  src: "https://lottie.host/example.lottie",
  loop: true,
  autoplay: true
});

Controlling Animation Playback

import { DotLottie } from "@lottiefiles/dotlottie-web";

const dotLottie = new DotLottie({
  autoplay: true,
  loop: true,
  canvas: document.querySelector("canvas"),
  src: "https://lottie.host/path/to/your/lottie.file"
});

// Basic playback control
document.getElementById("play-btn").addEventListener("click", () => dotLottie.play());
document.getElementById("pause-btn").addEventListener("click", () => dotLottie.pause());
document.getElementById("stop-btn").addEventListener("click", () => dotLottie.stop());

Please refer to the Methods for more details on the available methods.

Dynamic Loading

import { DotLottie } from "@lottiefiles/dotlottie-web";

const dotLottie = new DotLottie({ canvas: document.getElementById("dotlottie-canvas") });

document.getElementById("animation1-btn").addEventListener("click", () => {
  dotLottie.load({
    loop: true,
    autoplay: true,
    src: "https://lottie.host/path/to/animation1.lottie"
  });
});

document.getElementById("animation2-btn").addEventListener("click", () => {
  dotLottie.load({
    loop: true,
    autoplay: true,
    speed: 0.5,
    mode: "bounce-reverse",
    src: "https://lottie.host/path/to/animation2.json"
  });
});

Multi Animations .lottie file

import { DotLottie } from "@lottiefiles/dotlottie-web";

const dotLottie = new DotLottie({
  canvas: document.querySelector("#dotLottie-canvas"),
  src: "https://lottie.host/path/to/multi-animation.lottie",
  loop: true,
  autoplay: true
});

// Populate a list with animations from the .lottie file once loaded
dotLottie.addEventListener("load", () => {
  const animationList = document.querySelector("#animation-list");
  dotLottie.manifest.animations.forEach(({ id }) => {
    const button = document.createElement("button");
    button.textContent = id;
    button.onclick = () => dotLottie.loadAnimation(id); // Load animation on click
    animationList.appendChild(button);
  });
});

Advanced Animation Layout

import { DotLottie } from "@lottiefiles/dotlottie-web";

const dotLottie = new DotLottie({
  canvas: document.querySelector("#dotLottie-canvas"),
  src: "https://lottie.host/path/to/your/animation.lottie",
  loop: true,
  autoplay: true
});

// Adjust animation 'fit' based on selection
document.querySelector("#fit-selector").addEventListener("change", (event) => {
  dotLottie.setLayout({
    ...dotLottie.layout,
    fit: event.target.value
  });
});

// Adjust animation 'align' based on selection
document.querySelector("#align-selector").addEventListener("change", (event) => {
  const [x, y] = event.target.value.split(",");
  dotLottie.setLayout({
    ...dotLottie.layout,
    align: [x, y]
  });
});

Please refer to the Layout for more details on the available layout options.

Applying Themes

import { DotLottie } from "@lottiefiles/dotlottie-web";

const dotLottie = new DotLottie({
  canvas: document.querySelector("#dotLottie-canvas"),
  src: "/url/to/your/dotlottie-file.lottie",
  loop: true,
  autoplay: true
});

document.querySelector("#apply-theme").addEventListener("click", () => {
  // Apply theme with its ID as configured in the dotLottie file
  dotLottie.loadTheme("theme1");
});

document.querySelector("#remove-theme").addEventListener("click", () => {
  dotLottie.loadTheme("");
});