dotLottie Svelte Player Props Reference

The DotLottieSvelte component accepts the following props.

Props

Prop	Type	Required	Default	Description
`src`	`string`	✔️	`undefined`	Source URL or path to the `.lottie` or `.json` file
`data`	`string \| ArrayBuffer`		`undefined`	Animation data provided either as a Lottie JSON string or as an ArrayBuffer for `.lottie` animations
`autoplay`	`boolean`		`false`	Whether the animation plays automatically when loaded
`loop`	`boolean`		`false`	Whether the animation loops
`loopCount`	`number`		`0`	Number of times the animation loops before stopping. `0` loops infinitely when `loop` is `true`
`speed`	`number`		`1`	Playback speed of the animation
`mode`	`"forward" \| "reverse" \| "bounce" \| "reverse-bounce"`		`"forward"`	Animation play mode
`segment`	`[number, number]`		`undefined`	Animation segment. An array of two numbers: start frame and end frame
`marker`	`string`		`undefined`	Named lottie marker to play
`animationId`	`string`		`undefined`	ID of the animation to load from a multi-animation `.lottie` file
`themeId`	`string`		`undefined`	ID of the dotLottie theme to initially use
`themeData`	`string`		`undefined`	Raw theme JSON string to apply directly, as an alternative to `themeId`
`backgroundColor`	`string`		`undefined`	Background color of the animation container. Accepts a 6-digit or 8-digit hex color string (e.g., `"#000000"`, `"#000000FF"`)
`layout`	`object`		`undefined`	Layout configuration with `fit` and `align` properties. See Layout configuration
`renderConfig`	`object`		`undefined`	Configuration for rendering the animation. See Render configuration
`useFrameInterpolation`	`boolean`		`true`	Whether the animation updates on subframes. When `false`, the original After Effects frame rate is maintained, which can improve performance when subframe accuracy is not critical. When `true`, the animation refreshes on each `requestAnimationFrame`, including intermediate values
`stateMachineId`	`string`		`undefined`	ID of the state machine to load on animation load
`stateMachineConfig`	`object`		`undefined`	Security configuration for the state machine. See StateMachineConfig
`playOnHover`	`boolean`		`false`	Plays the animation when the cursor hovers over it and pauses when it leaves
`style`	`string`		`undefined`	Standard HTML style attribute applied to the player container
`dotLottieRefCallback`	`(dotLottie: DotLottie \| null) => void`		`undefined`	Callback that receives a reference to the underlying `DotLottie` player instance once instantiated

Example

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

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

<DotLottieSvelte
  src="https://example.com/animation.lottie"
  autoplay
  loop
  speed={2}
  mode="bounce"
  segment={[10, 20]}
  backgroundColor="#f0f0f0"
  style="width: 300px; height: 300px;"
  dotLottieRefCallback={(ref) => dotLottie = ref}
/>

Events

The component does not emit Svelte events. Events are emitted by the underlying DotLottie instance, obtained through dotLottieRefCallback and subscribed to with addEventListener(event, listener).

Event	Description
`ready`	WASM renderer is initialized
`load`	Animation is loaded
`loadError`	Error loading animation
`play`	Animation starts playing
`pause`	Animation is paused
`stop`	Animation is stopped
`loop`	Animation completes a loop
`complete`	Animation completes
`frame`	Animation reaches new frame
`render`	New frame is rendered
`freeze`	Animation is frozen
`unfreeze`	Animation is unfrozen
`destroy`	Animation is destroyed
`renderError`	Rendering error occurred

Event payloads and state machine events are documented in the dotLottie web player events reference.

Examples — recipes that use these props
Advanced playback control — runtime control through the instance
API reference — package exports and instance access

Props Reference

Props

Example

Events

Related