Methods
DotLottie
instances expose the following methods that can be used to control the animation:
Method | Description |
---|---|
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. |
setsegment(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. |
setTheme(themeId: string) | Loads a new theme from the .lottie file, using its ID as specified in the manifest.json file of the .lottie file. |
setThemeData(themeData: string) | Loads a new theme from the provided theme data. |
resetTheme() | Resets the theme to the default theme. |
Static Methods
The DotLottie
class exposes the following static methods:
Method | Description |
---|---|
setWasmUrl(url: string) | Sets the URL to the renderer.wasm binary. |