API Reference

The <dotlottie-wc> element wraps the core dotLottie web player. The player instance is exposed through the element's .dotLottie property, which gives access to the full core API — properties, methods, and events documented in the JS API reference.

Worker element: dotlottie-worker-wc

The <dotlottie-worker-wc> element offloads animation rendering to a Web Worker, keeping the main thread free for UI interactions. It accepts the same attributes as <dotlottie-wc> plus workerId.

<dotlottie-worker-wc src="animation.lottie" autoplay loop workerId="shared-worker"></dotlottie-worker-wc>

All instance methods accessed via the .dotLottie property return Promise values when using <dotlottie-worker-wc>, since calls are proxied to the worker thread.

CDN usage:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-worker-wc.js"
></script>

<dotlottie-worker-wc src="animation.lottie" autoplay loop></dotlottie-worker-wc>

npm usage:

import "@lottiefiles/dotlottie-wc/dotlottie-worker-wc";

setWasmUrl

setWasmUrl(url: string) sets a custom URL for the WASM renderer binary. It must be called before any elements are rendered.

import { setWasmUrl } from "@lottiefiles/dotlottie-wc";

setWasmUrl("https://your-cdn.com/dotlottie-player.wasm");

Player instance access

The .dotLottie property on the element returns the underlying DotLottie instance after the animation loads:

<dotlottie-wc id="my-player" src="animation.lottie" autoplay loop></dotlottie-wc>

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

  player.addEventListener("load", () => {
    const dotLottie = player.dotLottie;
    if (dotLottie) {
      console.log("Total frames:", dotLottie.totalFrames);
      console.log("Duration:", dotLottie.duration);

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

The instance exposes all properties, methods, and events of the core player:

• Properties — currentFrame, duration, totalFrames, isPlaying, isPaused, isStopped, isLoaded, loop, speed, mode, segment, manifest, activeAnimationId, activeThemeId, and more. See Properties.

• Methods — play(), pause(), stop(), setFrame(), setSpeed(), setLoop(), setMode(), setSegment(), setMarker(), freeze(), unfreeze(), tween(), load(), loadAnimation(), setTheme(), setLayout(), slot methods, state machine methods, and more. See Methods.

• Events — ready, load, loadError, play, pause, stop, loop, complete, frame, render, freeze, unfreeze, destroy, renderError, plus all state machine events. See Events.

• Types — Layout, RenderConfig, StateMachineConfig, Transform, Marker, slot value types, and event payload interfaces. See Type definitions.

Related

• Attributes and properties — HTML attributes and JS properties of <dotlottie-wc>.

• Examples — playback control and event handling recipes.

• JS API reference — the complete core player API.