dotLottie Svelte Player Usage Examples

Recipes for common tasks with the DotLottieSvelte component. Each snippet is self-contained — copy it into your app and adapt it as needed. For the full list of props, see the props reference.

Control playback with buttons

To play, pause, and stop an animation from your own UI, get the player instance through the dotLottieRefCallback prop and call its playback methods. Listen to player events to keep your local state in sync:

<script lang="ts">
  import { DotLottieSvelte } from "@lottiefiles/dotlottie-svelte";
  import type { DotLottie } from "@lottiefiles/dotlottie-svelte";

  let dotLottie: DotLottie | null = null;
  let isPlaying = false;

  function togglePlayback() {
    if (!dotLottie) return;
    // Check player state directly for reliability
    if (dotLottie.isPlaying) {
      dotLottie.pause();
    } else {
      dotLottie.play();
    }
  }

  function stopPlayback() {
    dotLottie?.stop();
  }

  // Event listeners keep the local isPlaying state in sync
  function handlePlay() {
    isPlaying = true;
  }
  function handlePause() {
    isPlaying = false;
  }
  function handleStop() {
    isPlaying = false;
  }
  function handleComplete() {
    if (!dotLottie?.loop) {
      isPlaying = false;
    }
  }

  function setupListeners(instance: DotLottie | null) {
    if (!instance) return;
    instance.addEventListener('play', handlePlay);
    instance.addEventListener('pause', handlePause);
    instance.addEventListener('stop', handleStop);
    instance.addEventListener('complete', handleComplete);
  }

  function removeListeners(instance: DotLottie | null) {
    if (!instance) return;
    instance.removeEventListener('play', handlePlay);
    instance.removeEventListener('pause', handlePause);
    instance.removeEventListener('stop', handleStop);
    instance.removeEventListener('complete', handleComplete);
  }

  let currentInstance: DotLottie | null = null;
  function refCallback(ref: DotLottie | null) {
    // Clean up previous listeners if the instance changes
    if (currentInstance) {
      removeListeners(currentInstance);
    }
    dotLottie = ref;
    currentInstance = ref;
    if (currentInstance) {
      setupListeners(currentInstance);
      // Initialize local state from the player after load
      currentInstance.addEventListener('load', () => {
        isPlaying = currentInstance?.isPlaying ?? false;
      })
    }
  }
</script>

<div>
  <DotLottieSvelte
    src="https://lottie.host/your-animation-id.lottie"
    dotLottieRefCallback={refCallback}
    autoplay={false}
    loop={true}
    style="width: 300px; height: 300px; border: 1px solid #eee;"
  />
  <button on:click={togglePlayback}>
    {isPlaying ? "Pause" : "Play"}
  </button>
  <button on:click={stopPlayback}>
    Stop
  </button>
</div>

If you need methods beyond play(), pause(), and stop() — such as changing speed or segments at runtime — see advanced playback control.

React to player events

To respond to lifecycle events such as load, play, or errors, attach listeners to the instance received through dotLottieRefCallback, and remove them when your component is destroyed:

<script lang="ts">
  import { DotLottieSvelte } from "@lottiefiles/dotlottie-svelte";
  import type { DotLottie } from "@lottiefiles/dotlottie-svelte";
  import { onDestroy } from "svelte";

  let dotLottie: DotLottie | null = null;
  let status = 'Idle';

  function handleLoad() {
    console.log("Svelte: Animation loaded");
    status = 'Loaded';
  }

  function handlePlay() {
    console.log("Svelte: Animation playing");
    status = 'Playing';
  }

  function handlePause() {
    console.log("Svelte: Animation paused");
    status = 'Paused';
  }

  function handleStop() {
    console.log("Svelte: Animation stopped");
    status = 'Stopped';
  }

  function handleComplete() {
    console.log("Svelte: Animation completed");
    status = 'Completed';
  }

  function handleError(event) {
    console.error("Svelte: Animation error:", event.error);
    status = `Error: ${event.error?.message || 'Unknown'}`;
  }

  function setupListeners(instance: DotLottie | null) {
    if (!instance) return;
    instance.addEventListener('load', handleLoad);
    instance.addEventListener('play', handlePlay);
    instance.addEventListener('pause', handlePause);
    instance.addEventListener('stop', handleStop);
    instance.addEventListener('complete', handleComplete);
    instance.addEventListener('loadError', handleError);
  }

  function removeListeners(instance: DotLottie | null) {
    if (!instance) return;
    instance.removeEventListener('load', handleLoad);
    instance.removeEventListener('play', handlePlay);
    instance.removeEventListener('pause', handlePause);
    instance.removeEventListener('stop', handleStop);
    instance.removeEventListener('complete', handleComplete);
    instance.removeEventListener('loadError', handleError);
  }

  onDestroy(() => {
    // Clean up listeners when the component is destroyed
    if (dotLottie) {
      removeListeners(dotLottie);
    }
  });

</script>

<p>Status: {status}</p>
<DotLottieSvelte
  src="https://lottie.host/your-animation-id.lottie"
  autoplay
  loop={false}
  style="width: 300px; height: 300px; border: 1px solid #eee;"
  dotLottieRefCallback={(ref) => {
    dotLottie = ref;
    setupListeners(dotLottie);
  }}
/>

The full list of events and their payloads is in the dotLottie web player events reference.

Style the player

To size or decorate the player, use the standard style attribute:

<script>
  import { DotLottieSvelte } from "@lottiefiles/dotlottie-svelte";
</script>

<DotLottieSvelte
  src="animation.lottie"
  style="width: 200px; height: 200px; background-color: lightblue; border-radius: 10px;"
/>

Play a segment

To play only part of an animation, pass a start and end frame to the segment prop:

<script>
  import { DotLottieSvelte } from "@lottiefiles/dotlottie-svelte";
</script>

<DotLottieSvelte
  src="animation.lottie"
  autoplay
  loop
  segment={[10, 50]} /* Play frames 10 to 50 */
  style="width: 300px; height: 300px; border: 1px solid #eee;"
/>

To change segments at runtime, call setSegment() on the player instance as shown in advanced playback control.

Getting started — install the player and render a first animation
Props reference — all component props with types and defaults
Advanced playback control — drive the player through the DotLottie instance

Examples

Control playback with buttons

React to player events

Style the player

Play a segment

Related