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>

enterInteractiveMode: (stateId) => void

Activate the passed state machine.

Argument	Type	Description
stateId	string	The state machine to activate.

playOnScroll: (scrollOptions) => void

Sync the animation to the scrolling of the page.

Argument	Type	Description
scrollOptions (Optional)	{ positionCallback?: (position: number) => void; segments?: [number, number]; threshold?: [number, number]; }	positionCallback: Receive the position of the animation relative to the view port. segments: The frame segments to play threshold: Animation position threshold relative to the viewport. Example: [0.5,1] would start playing the animation from the middle of the page to the bottom.

stopPlayOnScroll() => void

Stop playing on scroll.

playOnShow(playOnShowOptions) => void

Play the animation when it appears on screen.

Argument	Type	Description
playOnShowOptions (Optional)	{ threshold: number[] }	Visiblity threshold for when to start playing the animation. Example: [0.25] will start playback when the animation container is a quarter visible.

stopPlayOnShow() => void

Stop play on show.

getCurrentAnimationId() => string | undefined

Returns

Type: string | undefined

The current playing animation's id.

animationCount() => number

Returns

Type: number

The number of animations contained in the .lottie file.

getState() => DotLottiePlayerState

Returns

Type: DotLottiePlayerState

The current state of the player as well as the current frame position.

getManifest() => Manifest | undefined

Returns

Type: Manifest | undefined

The .lottie file's manifest.

pause() => void

Pause animation play.

Returns

Type: void

play(getOptions?: (currPlaybackOptions: PlaybackOptions, manifestPlaybackOptions: PlaybackOptions) => PlaybackOptions) => void

Play the current or target animation. If the getOptions callback is defined and playbackOptions are returned, it will override the playback settings defined for the animation in the manifest as well as the props defined on the component. You can access the currently defined player settings with currPlaybackOptions or the defined manifest settings for the next animation with manifestPlaybackOptions.

Parameters

Name	Type	Description
targetAnimation	string | number	(Optional) Animation id to play, or the animation's index inside the animation array of the manifest.
getOptions	(currPlaybackOptions: PlaybackOptions, manifestPlaybackOptions: PlaybackOptions) => PlaybackOptions	(Optional) Override playback settings from the ones defined in the manifest and props.

Returns

Type: void

next(getOptions?: (currPlaybackOptions: PlaybackOptions, manifestPlaybackOptions: PlaybackOptions) => PlaybackOptions) => void

Start playing the next animation. If the getOptions callback is defined and playbackOptions are returned, it will override the playback settings defined for the animation in the manifest as well as the props defined on the component. You can access the currently defined player settings with currPlaybackOptions or the defined manifest settings for the next animation with manifestPlaybackOptions.

Parameters

Name	Type	Description
getOptions	(currPlaybackOptions: PlaybackOptions, manifestPlaybackOptions: PlaybackOptions) => PlaybackOptions	(Optional) Override playback settings from the ones defined in the manifest and props.

Returns

Type: void

previous(getOptions?: (currPlaybackOptions: PlaybackOptions, manifestPlaybackOptions: PlaybackOptions) => PlaybackOptions) => void

Start playing the previous animation. If the getOptions callback is defined and playbackOptions are returned, it will override the playback settings defined for the animation in the manifest as well as the props defined on the component. You can access the currently defined player settings with currPlaybackOptionsor the defined manifest settings for the next animation with manifestPlaybackOptions.

Parameters

Name	Type	Description
getOptions	(currPlaybackOptions: PlaybackOptions, manifestPlaybackOptions: PlaybackOptions) => PlaybackOptions	(Optional) Override playback settings from the ones defined in the manifest and props.

Returns

Type: void

revertToManifestValues(playbackKeys?: Array<keyof PlaybackOptions | 'activeAnimationId'>) => void

Reverts PlaybackOptions to manifest values instead of player props.

Returns

Type: void

Parameters

Name	Type	Description
playbackKeys	Array<keyof PlaybackOptions | 'activeAnimationId'>	Either an array of PlaybackOptions to selectively choose which ones to reset, or the 'activeAnimationId' string to reset that value.

Usage:

// To to use `speed` and `direction` from manifest
dotLottiePlayer.revertToManifestValues(['speed', 'direction']);
// or to reset all PlaybackOptions
dotLottiePlayer.revertToManifestValues([]);

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

setTheme(theme: string) => void

Returns

Type: void getTheme() => string | undefined

Returns the current applied theme.

Returns

Type: string