dotLottie Web Component Player API Reference

The <dotlottie-wc> element wraps the core dotLottie web player. After obtaining the player instance via the .dotLottie property, you have 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

Configure a custom URL for the WASM renderer binary. Call this before any elements are rendered.

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

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

Accessing the Player Instance

The .dotLottie property on the element gives you 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>

Once you have the instance, you can use all properties, methods, and events from 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 Topics

• Attributes Reference — HTML attributes and JS properties

• Examples — Usage examples

• JS API Reference — Full core player API