Examples

Control the dotlottie-wc element with JavaScript — access the core DotLottie instance, wire up playback controls, and handle player events.

Use these recipes to go beyond declarative attributes and drive the <dotlottie-wc> element from JavaScript. Each example is self-contained; replace the src value with your own animation URL.

Access the core DotLottie instance

To control the player programmatically — play, pause, seek, or listen to events — access the underlying DotLottie instance through the element's .dotLottie property. The instance is available after the animation has loaded, so wait for the element's load event before using it:

<dotlottie-wc id="player" src="https://lottie.host/your-animation-id.lottie" autoplay loop></dotlottie-wc>

<script>
  const player = document.getElementById("player");

  player.addEventListener("load", () => {
    const dotLottie = player.dotLottie;
    if (dotLottie) {
      console.log("Total frames:", dotLottie.totalFrames);
    }
  });
</script>

Once you have the instance, the full core player API is available — see the JS API reference for every property, method, and event.

Add playback controls

To wire play, pause, and stop buttons to the player, store the core instance when the element loads, then call its playback methods from the button handlers. Keep the buttons disabled until the instance is ready:

<dotlottie-wc
  id="player-control-example"
  src="https://lottie.host/your-animation-id.lottie"
  style="width: 300px; height: 300px; display: block; margin: 0 auto;"
></dotlottie-wc>
<div style="text-align: center; margin-top: 10px;">
  <button id="playButton" disabled>Play</button>
  <button id="pauseButton" disabled>Pause</button>
  <button id="stopButton" disabled>Stop</button>
</div>

<script>
  const playerElement = document.getElementById("player-control-example");
  const playButton = document.getElementById("playButton");
  const pauseButton = document.getElementById("pauseButton");
  const stopButton = document.getElementById("stopButton");
  let dotLottie = null; // Holds the core instance

  // Wait for the component to load the animation
  playerElement.addEventListener("load", () => {
    dotLottie = playerElement.dotLottie;

    if (!dotLottie) {
      console.error("Failed to get dotLottie instance after load!");
      return;
    }

    // Enable buttons now that the instance is ready
    playButton.disabled = false;
    pauseButton.disabled = false;
    stopButton.disabled = false;
  });

  playerElement.addEventListener("error", (e) => {
    console.error("Player encountered an error:", e);
    playButton.disabled = true;
    pauseButton.disabled = true;
    stopButton.disabled = true;
  });

  // Button click handlers
  playButton.addEventListener("click", () => dotLottie && dotLottie.play());
  pauseButton.addEventListener("click", () => dotLottie && dotLottie.pause());
  stopButton.addEventListener("click", () => dotLottie && dotLottie.stop());
</script>

If you need finer control — seeking with setFrame(), changing setSpeed(), or playing a segment — the same pattern applies: call the method on the stored instance.

Handle player events

To react to playback state — for analytics, syncing UI, or chaining animations — add listeners on the core instance for events such as load, play, pause, complete, loop, stop, and loadError:

<dotlottie-wc
  id="player-event-example"
  src="https://lottie.host/your-animation-id.lottie"
  autoplay
  loop
  style="width: 200px; height: 200px; display: block; margin: 10px auto;"
></dotlottie-wc>
<div id="eventLog" style="border: 1px solid #eee; padding: 10px; height: 100px; overflow-y: scroll;">Event log:</div>

<script>
  const playerEventElement = document.getElementById("player-event-example");
  const eventLog = document.getElementById("eventLog");

  function logEvent(message) {
    const entry = document.createElement("p");
    entry.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
    eventLog.appendChild(entry);
    eventLog.scrollTop = eventLog.scrollHeight; // Scroll to bottom
  }

  // Wait for the element's load event so the instance is ready
  playerEventElement.addEventListener("load", () => {
    const dotLottie = playerEventElement.dotLottie;

    if (!dotLottie) {
      logEvent("dotLottie instance not found after load.");
      return;
    }

    dotLottie.addEventListener("load", () => logEvent("Animation loaded"));
    dotLottie.addEventListener("play", () => logEvent("Playback started"));
    dotLottie.addEventListener("pause", () => logEvent("Playback paused"));
    dotLottie.addEventListener("complete", () => logEvent("Playback completed"));
    dotLottie.addEventListener("loop", () => logEvent("Animation looped"));
    dotLottie.addEventListener("stop", () => logEvent("Playback stopped"));
    dotLottie.addEventListener("loadError", (event) => logEvent(`Error loading animation: ${event}`));

    logEvent(`Listeners attached. Initial state: isPlaying=${dotLottie.isPlaying}`);
  });
</script>

If your page adds and removes players dynamically, remove your listeners with removeEventListener before detaching the element. For the full event list and payloads, see Events in the core player reference.

Last updated: August 6, 2026 at 11:58 AMEdit this page
Next

Attributes and Properties