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

play()Begins playback from the current animation position.
pause()Pauses the animation without resetting its position.
stop()Halts playback and returns the animation to its initial frame.
setSpeed(speed: number)Sets the playback speed with the given multiplier.
setLoop(loop: boolean)Configures whether the animation should loop continuously.
setFrame(frame: number)Directly navigates the animation to a specified frame.
addEventListener(event: string, listener: Function)Registers a function to respond to a specific animation event.
removeEventListener(event: string, listener?: Function)Removes a previously registered function from responding to a specific animation event.
destroy()Destroys the renderer instance and unregisters all event listeners. This method should be called when the canvas is removed from the DOM to prevent memory leaks.
load(config: Config)Loads a new configuration or a new animation.
setMode(mode: string)Sets the animation play mode.
setSegments(startFrame: number, endFrame: number)Sets the start and end frame of the animation.
freeze()Freezes the animation by stopping the animation loop.
unfreeze()Unfreezes the animation by resuming the animation loop.
setBackgroundColor(color: string)Sets the background color of the canvas.
resize()This method adjusts the canvas size to match its bounding box dimensions, considering the device’s pixel ratio. This prevents the canvas from appearing blurry on high-resolution screens. Call this method when the window or the canvas element is resized.
setUseFrameInterpolation(useFrameInterpolation: boolean)Sets whether the animation should update on subframes.
setRenderConfig(renderConfig: RenderConfig)Sets the render configuration. check RenderConfig for more details.
loadAnimation(animationId: string)Loads a new animation from the .lottie file, using its ID as specified in the manifest.json file of the .lottie file.
setMarker(marker: string)Sets the lottie named marker to play.
setLayout(layout: Layout)Sets the animation layout configuration.
loadTheme(themeId: string)Loads a new theme from the .lottie file, using its ID as specified in the manifest.json file of the .lottie file.
loadThemeData(themeData: string)Loads a new theme from the provided theme data.

Static Methods

The DotLottie class exposes the following static methods:

setWasmUrl(url: string)Sets the URL to the renderer.wasm binary.