Svelte Player Examples

This page provides practical examples for using the @lottiefiles/dotlottie-svelte component.

Basic Playback Controls

This example shows how to use the dotLottieRefCallback to get the player instance and control playback with buttons.

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

  let dotLottie: DotLottie | null = null;
  let isPlaying = false; // Track state locally based on events if needed

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

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

  // --- Event listeners to update local isPlaying state ---
  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 instance changes
    if (currentInstance) {
      removeListeners(currentInstance);
    }
    dotLottie = ref;
    currentInstance = ref;
    if (currentInstance) {
      setupListeners(currentInstance);
      // Initialize local state based on actual player state 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>

Event Handling Example

Demonstrates attaching various event listeners using dotLottieRefCallback.

<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.detail);
    status = `Error: ${event.detail?.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 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);
  }}
/>

Custom Styling

Use the standard style attribute for basic styling.

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

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

Segment Playback

Play only a specific portion of the animation using 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;"
/>

Next Steps

Go back to Getting Started
Explore available options in the Props Reference
Learn about Advanced Usage