Methods

load(src: string | AnimationItem, overrideRendererSettings?: Record<string, unknown>, playbackOptions?: PlaybackOptions) => Promise<void>

Load (and play) a given Lottie animation.

Parameters

Name	Type	Description
src	string	URL to a .lottie / .json file or a JSON animation data object.
overrideRendererSettings	Record<string, unknown>	Allows override of renderer settings, full list of options is available here: https://github.com/airbnb/lottie-web/wiki/Renderer-Settings
playbackOptions	PlaybackOptions	Allows you to override the playback settings defined in the manifest.

Returns

Type: Promise<void>

pause() => void

Pause animation play.

Returns

Type: void

play(targetAnimation?: string | number, playbackOptions? PlaybackOptions) => void

Play the current or target animation. If playbackOptions are passed, they will override the playback settings defined for the animation in the manifest.

Parameters

Name	Type	Description
targetAnimation	string | number	(Optional) Animation id to play, or the animation's index inside the animation array of the manifest.
playbackOptions	PlaybackOptions	(Optional) Override playback settings from the ones defined in the manifest.

Returns

Type: void

next(playbackOptions?: PlaybackOptions) => void

Start playing next animation. If playbackOptions are passed, they will override the playback settings defined for the animation in the manifest.

Parameters

Name	Type	Description
playbackOptions	PlaybackOptions	(Optional) Override playback settings from the ones defined in the manifest.

Returns

Type: void

previous(playbackOptions?: PlaybackOptions) => void

Start playing the previous animation. If playbackOptions are passed, they will override the playback settings defined for the animation in the manifest.

Parameters

Name	Type	Description
playbackOptions	PlaybackOptions	(Optional) Override playback settings from the ones defined in the manifest.

Returns

Type: void

reset() => void

Revert to default animation, 'activeAnimationId' is used from the manifest. If this setting is not present, this method will revert to playing the first animation defined in the manifest.

If playbackOptions are passed, they will override the playback settings defined for the animation in the manifest.

Returns

Type: void

setDirection(value: number) => void

Animation play direction.

Parameters

Name	Type	Description
value	number	Direction values.

Returns

Type: void

getLottie() => AnimationItem

Returns the lottie-web instance used in the component.

Returns

Type: AnimationItem

getVersions() => { lottieWebVersion: string, dotLottiePlayerVersion: string }

Returns the version of lottie-web and the dotlottie player.

Returns

Type: Versions

setLooping(value: boolean) => void

Sets the looping of the animation.

Parameters

Name	Type	Description
value	boolean	Whether to enable looping. Boolean true enables looping.

Returns

Type: void

setSpeed(value?: number) => void

Sets animation play speed.

Parameters

Name	Type	Description
value	number	Playback speed.

Returns

Type: void

stop() => void

Stops animation play.

Returns

Type: void

seek(value: number | string) => void

Seek to a given frame. Frame value can be a number or a percent string (e.g. 50%).

Returns

Type: void

snapshot(download?: boolean) => string

Snapshot the current frame as SVG. If ‘download’ argument is boolean true, then a download is triggered in browser.

Returns

Type: string

toggleLooping() => void

Toggles animation looping.

Returns

Type: void

togglePlay() => void

Toggle playing state.

Returns

Type: void

getManifest() => Manifest

Returns

Type: Manifest