Getting Started

Introduction

DotLottieSvelte is a Svelte component that allows you to easily embed Lottie animations in your Svelte applications. It is a wrapper around the dotLottie-web library.

Installation

npm install @lottiefiles/dotlottie-svelte

Usage

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

<DotLottieSvelte
  src="path/to/animation.lottie"
  loop
  autoplay
/>

Custom Playback Controls

DotLottieSvelte component makes it easy to build custom playback controls for the animation. It exposes a dotLottieRefCallback prop that can be used to get a reference to the dotLottie web player instance.

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

  let dotLottie: DotLottie | null = null;

  function play() {
    dotLottie?.play();
  }

  function pause() {
    dotLottie?.pause();
  }

  function stop() {
    dotLottie?.stop();
  }
</script>

<DotLottieSvelte
  src="path/to/your/animation.lottie"
  loop={true}
  autoplay={true}
  dotLottieRefCallback={(ref) => dotLottie = ref}
/>

<button on:click={play}>Play</button>
<button on:click={pause}>Pause</button>
<button on:click={stop}>Stop</button>

Listening to Events

You can listen to player events using the dotLottieRefCallback prop:

<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;

    function onLoaded() {
        console.log("Animation loaded");
    }

    function onPlay() {
        console.log("Animation started");
    }

    function onPause() {
        console.log("Animation paused");
    }

    function onComplete() {
        console.log("Animation completed");
    }

    function setupListeners(dotLottieInstance) {
        dotLottieInstance.addEventListener('load', onLoaded);
        dotLottieInstance.addEventListener('play', onPlay);
        dotLottieInstance.addEventListener('pause', onPause);
        dotLottieInstance.addEventListener('complete', onComplete);
    }

    function removeListeners(dotLottieInstance) {
        dotLottieInstance.removeEventListener('load', onLoaded);
        dotLottieInstance.removeEventListener('play', onPlay);
        dotLottieInstance.removeEventListener('pause', onPause);
        dotLottieInstance.removeEventListener('complete', onComplete);
    }

     onDestroy(() => {
        if (dotLottie) {
            removeListeners(dotLottie);
        }
    });
</script>

<DotLottieSvelte
  src="path/to/animation.lottie"
  loop
  autoplay
  dotLottieRefCallback={(ref) => {
    dotLottie = ref;
    if (ref) {
      setupListeners(ref);
    }
  }}
/>

Getting Started

Introduction

Installation

Usage

Custom Playback Controls

Listening to Events

Properties

Usage