Events

The DotLottie player emits various events during its lifecycle. You can listen to these events using addEventListener().

Animation Events

`load`

Fired when animation data is successfully loaded.

dotLottie.addEventListener('load', () => {
  console.log('Animation loaded successfully');
});

`loadError`

Fired when animation loading fails.

Event Data: { error: Error }

dotLottie.addEventListener('loadError', ({ error }) => {
  console.error('Failed to load animation:', error);
});

`ready`

Fired when the WASM module is loaded and the player is ready.

dotLottie.addEventListener('ready', () => {
  console.log('Player is ready');
});

`play`

Fired when animation starts playing.

dotLottie.addEventListener('play', () => {
  console.log('Animation started');
});

`pause`

Fired when animation is paused.

dotLottie.addEventListener('pause', () => {
  console.log('Animation paused');
});

`stop`

Fired when animation is stopped.

dotLottie.addEventListener('stop', () => {
  console.log('Animation stopped');
});

`complete`

Fired when animation completes (reaches the end).

dotLottie.addEventListener('complete', () => {
  console.log('Animation completed');
});

`loop`

Fired when animation loops.

Event Data: { loopCount: number }

dotLottie.addEventListener('loop', ({ loopCount }) => {
  console.log('Animation looped', loopCount, 'times');
});

`frame`

Fired when the current frame changes.

Event Data: { currentFrame: number }

dotLottie.addEventListener('frame', ({ currentFrame }) => {
  console.log('Current frame:', currentFrame);
});

`render`

Fired when a frame is rendered.

Event Data: { currentFrame: number }

dotLottie.addEventListener('render', ({ currentFrame }) => {
  console.log('Rendered frame:', currentFrame);
});

Lifecycle Events

`destroy`

Fired when the instance is destroyed.

dotLottie.addEventListener('destroy', () => {
  console.log('Instance destroyed');
});

`freeze`

Fired when rendering is frozen.

dotLottie.addEventListener('freeze', () => {
  console.log('Rendering frozen');
});

`unfreeze`

Fired when rendering is resumed.

dotLottie.addEventListener('unfreeze', () => {
  console.log('Rendering resumed');
});

State Machine Events

`stateMachineStart`

Fired when a state machine starts.

dotLottie.addEventListener('stateMachineStart', () => {
  console.log('State machine started');
});

`stateMachineStop`

Fired when a state machine stops.

dotLottie.addEventListener('stateMachineStop', () => {
  console.log('State machine stopped');
});

`stateMachineTransition`

Fired when transitioning between states.

Event Data: { fromState: string, toState: string }

dotLottie.addEventListener('stateMachineTransition', ({ fromState, toState }) => {
  console.log(`Transitioning from ${fromState} to ${toState}`);
});

`stateMachineStateEntered`

Fired when entering a new state.

Event Data: { state: string }

dotLottie.addEventListener('stateMachineStateEntered', ({ state }) => {
  console.log('Entered state:', state);
});

Input Change Events

`stateMachineBooleanInputValueChange`

Fired when a boolean input value changes.

Event Data: { inputName: string, oldValue: boolean, newValue: boolean }

dotLottie.addEventListener('stateMachineBooleanInputValueChange', ({ inputName, oldValue, newValue }) => {
  console.log(`Boolean input ${inputName} changed from ${oldValue} to ${newValue}`);
});

`stateMachineNumericInputValueChange`

Fired when a numeric input value changes.

Event Data: { inputName: string, oldValue: number, newValue: number }

dotLottie.addEventListener('stateMachineNumericInputValueChange', ({ inputName, oldValue, newValue }) => {
  console.log(`Numeric input ${inputName} changed from ${oldValue} to ${newValue}`);
});

Complete Event Handling Example

const dotLottie = new DotLottie({
  canvas: document.querySelector('#canvas'),
  src: 'animation.lottie',
  autoplay: true,
  loop: true
});

// Basic lifecycle events
dotLottie.addEventListener('ready', () => console.log('Ready'));
dotLottie.addEventListener('load', () => console.log('Loaded'));
dotLottie.addEventListener('play', () => console.log('Playing'));
dotLottie.addEventListener('pause', () => console.log('Paused'));
dotLottie.addEventListener('complete', () => console.log('Complete'));

// Frame tracking
dotLottie.addEventListener('frame', ({ currentFrame }) => {
  const progress = (currentFrame / dotLottie.totalFrames) * 100;
  console.log(`Progress: ${progress.toFixed(1)}%`);
});

// Error handling
dotLottie.addEventListener('loadError', ({ error }) => {
  console.error('Load error:', error.message);
});

// Loop tracking
dotLottie.addEventListener('loop', ({ loopCount }) => {
  console.log(`Completed loop #${loopCount}`);
});

Event Reference Table

Event	Description	Event Data
`load`	Animation data loaded successfully	None
`loadError`	Animation loading failed	`{ error: Error }`
`ready`	WASM module loaded and ready	None
`play`	Animation started playing	None
`pause`	Animation paused	None
`stop`	Animation stopped	None
`complete`	Animation completed	None
`loop`	Animation looped	`{ loopCount: number }`
`frame`	Frame changed	`{ currentFrame: number }`
`render`	Frame rendered	`{ currentFrame: number }`
`destroy`	Instance destroyed	None
`freeze`	Rendering frozen	None
`unfreeze`	Rendering resumed	None
`stateMachineStart`	State machine started	None
`stateMachineStop`	State machine stopped	None
`stateMachineTransition`	State transition	`{ fromState: string, toState: string }`
`stateMachineStateEntered`	Entered new state	`{ state: string }`
`stateMachineBooleanInputValueChange`	Boolean input changed	`{ inputName, oldValue, newValue: boolean }`
`stateMachineNumericInputValueChange`	Numeric input changed	`{ inputName, oldValue, newValue: number }`