# Advanced Playback Control
Control the dotLottie Svelte player through the DotLottie instance - change speed and segments at runtime and switch animations.

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](/en/runtimes/distributions/svelte/v0.x/examples#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:

```svelte
<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](/en/runtimes/distributions/js/v0.x/api/reference#methods) for the complete list.

## Switch between animations

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

```svelte
<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](/en/runtimes/distributions/svelte/v0.x/props-reference) to choose the initial animation, or call `loadAnimation(animationId)` on the instance to switch at runtime. See [animation loading methods](/en/runtimes/distributions/js/v0.x/api/reference#animation-loading--themes).

## Related

- [Examples](/en/runtimes/distributions/svelte/v0.x/examples) — recipes for playback buttons, events, styling, and segments
- [Props reference](/en/runtimes/distributions/svelte/v0.x/props-reference) — declarative configuration options
- [API reference](/en/runtimes/distributions/svelte/v0.x/api-reference) — package exports and instance access