Methods

DotLottie instances expose the following methods that can be used to control the animation:

Playback Control

play(): void

Starts or resumes animation playback.

dotLottie.play();

pause(): void

Pauses animation playback.

dotLottie.pause();

stop(): void

Stops animation and returns to the first frame.

dotLottie.stop();

setFrame(frame: number): void

Jumps to a specific frame.

dotLottie.setFrame(30); // Jump to frame 30

setSpeed(speed: number): void

Sets the animation playback speed.

dotLottie.setSpeed(2.0); // 2x speed
dotLottie.setSpeed(0.5); // Half speed

setLoop(loop: boolean): void

Sets whether the animation should loop.

dotLottie.setLoop(true);

setLoopCount(loopCount: number): void

Sets the number of loops (0 for infinite).

dotLottie.setLoopCount(3); // Loop 3 times
dotLottie.setLoopCount(0); // Loop infinitely

setMode(mode: Mode): void

Sets the animation playback mode.

dotLottie.setMode('reverse');
dotLottie.setMode('bounce');

setSegment(startFrame: number, endFrame: number): void

Sets the frame segment to play.

dotLottie.setSegment(10, 50); // Play frames 10-50

setUseFrameInterpolation(useFrameInterpolation: boolean): void

Sets whether to use frame interpolation.

dotLottie.setUseFrameInterpolation(false); // Use original AE frame rate

Animation Management

load(config: Omit<Config, 'canvas'>): void

Loads a new animation with the specified configuration.

dotLottie.load({
  src: 'new-animation.lottie',
  autoplay: true,
  loop: true
});

loadAnimation(animationId: string): void

Loads a specific animation by ID (for .lottie files with multiple animations).

dotLottie.loadAnimation('animation-1');

setMarker(marker: string): void

Sets the current marker to play from.

dotLottie.setMarker('intro');

markers(): Marker[]

Returns all available markers in the animation.

const markers = dotLottie.markers();
console.log(markers); // [{ name: 'intro', time: 0, duration: 1000 }, ...]

Canvas & Rendering

resize(): void

Resizes the canvas and updates the animation to fit.

dotLottie.resize();

freeze(): void

Freezes rendering to save resources.

dotLottie.freeze();

unfreeze(): void

Resumes rendering.

dotLottie.unfreeze();

setBackgroundColor(color: string): void

Sets the canvas background color.

dotLottie.setBackgroundColor('#ff0000');
dotLottie.setBackgroundColor('rgba(255, 0, 0, 0.5)');

setLayout(layout: Layout): void

Sets the animation layout configuration.

dotLottie.setLayout({
  fit: 'cover',
  align: [0.5, 0.5] // Center align
});

setRenderConfig(config: RenderConfig): void

Sets the rendering configuration.

dotLottie.setRenderConfig({
  autoResize: true,
  devicePixelRatio: 2
});

animationSize(): { height: number; width: number }

Returns the original animation size.

const { width, height } = dotLottie.animationSize();

setTransform(transform: Transform): boolean

Sets a transformation matrix for the animation.

// Transform is a 9-element array representing a 3x3 transformation matrix
const transform = [1, 0, 0, 0, 1, 0, 100, 100, 1]; // Translate by (100, 100)
dotLottie.setTransform(transform);

setViewport(x: number, y: number, width: number, height: number): boolean

Sets the viewport for rendering.

dotLottie.setViewport(0, 0, 800, 600);

Theme Management

setTheme(themeId: string): boolean

Applies a theme by ID.

const success = dotLottie.setTheme('dark-theme');

resetTheme(): boolean

Resets to the default theme.

const success = dotLottie.resetTheme();

setThemeData(themeData: string): boolean

Applies theme from raw theme data.

const themeJson = JSON.stringify({ /* theme data */ });
const success = dotLottie.setThemeData(themeJson);

State Machine (Experimental)

stateMachineLoad(stateMachineId: string): boolean

Loads a state machine by ID.

const success = dotLottie.stateMachineLoad('interactive-sm');

stateMachineStart(): boolean

Starts the state machine.

const success = dotLottie.stateMachineStart();

stateMachineStop(): boolean

Stops the state machine.

const success = dotLottie.stateMachineStop();

stateMachineGetStatus(): string

Returns the current state machine status.

const status = dotLottie.stateMachineGetStatus();

stateMachineGetCurrentState(): string

Returns the current state name.

const currentState = dotLottie.stateMachineGetCurrentState();

stateMachineSetBooleanInput(name: string, value: boolean): boolean

Sets a boolean input value.

dotLottie.stateMachineSetBooleanInput('isHovered', true);

stateMachineSetNumericInput(name: string, value: number): boolean

Sets a numeric input value.

dotLottie.stateMachineSetNumericInput('progress', 0.75);

stateMachineSetStringInput(name: string, value: string): boolean

Sets a string input value.

dotLottie.stateMachineSetStringInput('currentSection', 'intro');

stateMachinePostClickEvent(x: number, y: number): void

Posts a click event at the specified coordinates.

dotLottie.stateMachinePostClickEvent(100, 200);

Event System

addEventListener<T>(type: T, listener: EventListener<T>): void

Adds an event listener for the specified event type.

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

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

removeEventListener<T>(type: T, listener?: EventListener<T>): void

Removes an event listener. If no listener is provided, removes all listeners for that event type.

const frameHandler = ({ currentFrame }) => console.log(currentFrame);
dotLottie.addEventListener('frame', frameHandler);
dotLottie.removeEventListener('frame', frameHandler);

// Remove all frame listeners
dotLottie.removeEventListener('frame');

destroy(): void

Destroys the DotLottie instance and cleans up all resources.

dotLottie.destroy();

Static Methods

The DotLottie class exposes the following static methods: