Usage

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. This instance can be used to control the playback of the animation using the methods exposed by the dotLottie web player instance.

Here is an example:

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

You can find the list of methods that can be used to control the playback of the animation here.

Listening to Events

DotLottieSvelte component can receive a dotLottieRefCallback prop that can be used to get a reference to the dotLottie web player instance. This reference can be used to listen to player events emitted by the dotLottie web instance.

Here is an example:

<script lang="ts">
    import { DotLottieSvelte } from '@lottiefiles/dotlottie-svelte';
    import type { DotLottie } from '@lottiefiles/dotlottie-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/your/animation.lottie"
    loop={true}
    autoplay={true}
    dotLottieRefCallback={(ref) => {
        dotLottie = ref;
        setupListeners(dotLottie);
    }}
/>

dotLottie instance exposes multiple events that can be listened to. You can find the list of events here.