Advanced Usage

For anything beyond what the component's props cover, drive the player directly through the underlying DotLottie instance. The instance exposes the full core player API — every property, method, and event documented in the core player API reference.

Control the Animation Through the Instance

To apply settings programmatically, attach a template ref to the component and call getDotLottieInstance() once it has mounted:

<template>
  <DotLottieVue ref="playerRef" src="path/to/animation.lottie" autoplay />
</template>

<script setup>
import { DotLottieVue } from "@lottiefiles/dotlottie-vue";
import { ref, onMounted } from "vue";

const playerRef = ref(null);

onMounted(() => {
  const dotLottie = playerRef.value?.getDotLottieInstance();
  if (!dotLottie) return;

  // Play frames 10 to 50 at double speed
  dotLottie.setSpeed(2);
  dotLottie.setSegment(10, 50);
});
</script>

From here, use any core method the task needs — setFrame() to jump to a frame, setMode() to reverse or bounce playback, tween() for smooth frame transitions, and so on. See the core player Methods reference for the complete list.

You don't need to destroy the player yourself: the component handles calling destroy() on the instance when it unmounts.

Switch Animations in a Multi-Animation File

A single .lottie file can contain several animations. To choose which one loads initially, set the animationId prop. To switch at runtime, call loadAnimation() on the instance with the target animation's ID:

<template>
  <div>
    <DotLottieVue ref="playerRef" src="path/to/multi.lottie" autoplay loop />
    <button @click="switchTo('scene-2')">Play scene 2</button>
  </div>
</template>

<script setup>
import { DotLottieVue } from "@lottiefiles/dotlottie-vue";
import { ref } from "vue";

const playerRef = ref(null);

const switchTo = (animationId) => {
  playerRef.value?.getDotLottieInstance()?.loadAnimation(animationId);
};
</script>

If you need the list of animation IDs available in the file, read manifest.animations on the instance — see the Manifest object reference.

If your animations live in separate files rather than one multi-animation file, swap the src prop instead — see Switch Between Animation Files.

Related

• Examples — playback controls, event handling, and file switching

• Props Reference — all component props with types and defaults

• API Reference — setWasmUrl and instance access

• Core player API — every property, method, and event