Advanced dotLottie Svelte Player Techniques

Props cover declarative configuration, but some tasks need the player itself: changing speed or segments while an animation runs, or swapping animations in response to user input. For those, get the underlying DotLottie instance through the dotLottieRefCallback prop and call its methods directly.

For basic play, pause, and stop buttons, see control playback with buttons — this guide focuses on control beyond basic playback.

Change speed and segments at runtime

Store the instance from dotLottieRefCallback, then call setter methods such as setSpeed() and setSegment() from your event handlers:

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

  let dotLottie: DotLottie | null = null;

  function setSpeed(speed: number) {
    dotLottie?.setSpeed(speed);
  }

  function setSegment(start: number, end: number) {
    dotLottie?.setSegment(start, end);
  }
</script>

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

<div class="controls">
  <button on:click={() => setSpeed(2)}>2x Speed</button>
  <button on:click={() => setSegment(10, 50)}>Set Segment [10, 50]</button>
</div>

The instance exposes the full core player API — setFrame(), setMode(), setTheme(), freeze(), and more. See the dotLottie web player methods reference for the complete list.

Switch between animations

To swap the animation a player shows, bind the src prop to component state and update it:

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

  let currentAnimation = 'animation1.lottie';
  const animations = {
    animation1: 'animation1.lottie',
    animation2: 'animation2.lottie',
    animation3: 'animation3.lottie'
  };
</script>

<DotLottieSvelte
  src={currentAnimation}
  key={currentAnimation}
  autoplay
  loop
/>

<div class="animation-selector">
  {#each Object.entries(animations) as [name, src] (name)}
    <button
      class:active={currentAnimation === src}
      on:click={() => currentAnimation = src}
    >
      {name}
    </button>
  {/each}
</div>

<style>
  .animation-selector {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
  }

  .active {
    background-color: #007bff;
    color: white;
  }
</style>

If a single .lottie file contains multiple animations, you can instead load one by ID: set the animationId prop to choose the initial animation, or call loadAnimation(animationId) on the instance to switch at runtime. See animation loading methods.

Examples — recipes for playback buttons, events, styling, and segments
Props reference — declarative configuration options
API reference — package exports and instance access

Advanced Playback Control

Change speed and segments at runtime

Switch between animations

Related