Svelte Player Props Reference

This document provides a comprehensive reference for all available props in the dotLottie Svelte player.

src*: string

(Required) The source URL or path to the .lottie or .json file.

<DotLottieSvelte src={"https://example.com/animation.lottie"} />

data: string | ArrayBuffer

Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.

autoplay: boolean

(Default: false)

Whether the animation should play automatically when loaded.

<DotLottieSvelte src={"animation.lottie"} autoplay={true} />

loop: boolean

(Default: false)

Whether the animation should loop.

<DotLottieSvelte src={"animation.lottie"} loop={true} />

speed: number

(Default: 1)

The playback speed of the animation.

<DotLottieSvelte src={"animation.lottie"} speed={2} />

mode: "forward" | "reverse" | "bounce" | "reverse-bounce"

(Default: "forward")

Animation play mode.

<DotLottieSvelte src={"animation.lottie"} mode={"bounce"} />

themeId: string

The ID of the dotLottie theme to initially use.

backgroundColor: string

Background color of the animation container. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF").

<DotLottieSvelte src={"animation.lottie"} backgroundColor={"#f0f0f0"} />

renderConfig: object

Configuration for rendering the animation. Refer to the RenderConfig API for details.

useFrameInterpolation: boolean

(Default: true)

Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained, potentially improving performance if subframe accuracy isn't critical. If set to true, it will refresh at each requestAnimationFrame, including intermediate values.

<DotLottieSvelte src={"animation.lottie"} useFrameInterpolation={false} />

segment: [number, number]

(Default: undefined)

Animation segment. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame.

<DotLottieSvelte src={"animation.lottie"} segment={[10, 20]} />

dotLottieRefCallback: (dotLottie: DotLottie | null) => void

Callback function that receives a reference to the underlying dotLottie web player instance once instantiated.

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

  let dotLottie: DotLottie | null = null;
</script>

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

marker: string

Named lottie marker to play.

<DotLottieSvelte src={"animation.lottie"} marker={"intro"} />

animationId: string

ID of the animation to load from a multi-animation .lottie file.

<DotLottieSvelte src={"multi.lottie"} animationId={"scene-2"} />

themeData: string

Raw theme JSON string to apply directly, as an alternative to themeId.

layout: object

Layout configuration with fit and align properties. See Layout Configuration.

<DotLottieSvelte src={"animation.lottie"} layout={{ fit: 'contain', align: [0.5, 0.5] }} />

stateMachineId: string

ID of the state machine to load on animation load.

<DotLottieSvelte src={"interactive.lottie"} stateMachineId={"myFSM"} />

stateMachineConfig: object

Security configuration for the state machine. See StateMachineConfig.

playOnHover: boolean

(Default: false)

Plays the animation when the cursor hovers over it, and pauses when it leaves.

<DotLottieSvelte src={"animation.lottie"} playOnHover={true} />

loopCount: number

(Default: 0)

Number of times the animation loops before stopping. A value of 0 loops infinitely when loop is true.

<DotLottieSvelte src={"animation.lottie"} loop loopCount={3} />

Next Steps

• Check out Examples

• Learn about Advanced Usage