Methods

enterInteractiveMode: (stateId) => void

Activate the passed state machine.

ArgumentTypeDescription
stateIdstringThe state machine to activate.

getContainer: () => HTMLDivElement | undefined

Returns the div element containing the Lottie animation.

getCurrentAnimationId: () => string | undefined

Returns the currently playing animation Id.

getLottie: () => AnimationItem | undefined

Return the AnimationItem instance.

getManifest: () => Manifest | undefined

Returns the .lottie Manifest.

next: (getOptions) => void

Plays the next animation.

ArgumentTypeDescription
getOptions (Optional)(currPlaybackOptions?: PlaybackOptions, manifestPlaybackOptions?: PlaybackOptions) => PlaybackOptionsPlaybackOptions returned from this function will be used for the next animation.

Usage:

// Go to next animation
lottieRef.current?.next();
// Or go to next animation and use speed=3 and direction=-1
lottieRef.current?.next((curr, manifest) => {
return {
...curr,
speed: 3,
direction: -1,
}
});

play: (indexOrId, getOptions) => void

Starts playing. Or you can pass indexOrId to switch and play another animation.

ArgumentTypeDescription
getOptions (Optional)(prevPlaybackOptions?: PlaybackOptions, manifestPlaybackOptions?: PlaybackOptions) => PlaybackOptionsPlaybackOptions returned from this function will be used for the next animation.
indexOrId (Optional)`stringnumber`

Usage:

// Plays currently stopped or paused animation
lottieRef.current?.play();
// Or plays animationId `wifi` and applies speed=3 and direction=-1
lottieRef.current?.play('wifi', (curr, manifest) => {
return {
...curr,
speed: 3,
direction: -1,
}
});x

previous: (getOptions) => void

Plays the previous animation from the .lottie manifest.

ArgumentTypeDescription
getOptions (Optional)(currPlaybackOptions?: PlaybackOptions, manifestPlaybackOptions?: PlaybackOptions) => PlaybackOptionsPlaybackOptions returned from this function will be used for the next animation.
// Go to previous animation
lottieRef.current?.previous();
// Or go to previous animation and use speed=3 and direction=-1
lottieRef.current?.previous((curr, manifest) => {
return {
...curr,
speed: 3,
direction: -1,
}
});

playOnScroll: (scrollOptions) => void

Sync the animation to the scrolling of the page.

ArgumentTypeDescription
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.

ArgumentTypeDescription
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.

reset: () => void

Goes back to initial animation. activeAnimationId or index 0 .

resize: () => void

Resize the animation.

getCurrentAnimationId: () => string | undefined

Returns the currently active animation Id.

getState: () => DotLottiePlayerState

Returns the current player states.

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

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

Returns

Type: Versions

setAutoplay: (autoplay: boolean) => void

Sets autoplay

setBackground: (background: string) => void

Sets background

setDefaultTheme: (defaultTheme: string) => void

Applies theme

setDirection: (direction: AnimationDirection) => void

Sets play direction direction

setHover: (hover: boolean) => void

Sets play on hover

setIntermission: (intermission: number) => void

Sets the pause between loops

setLoop: (loop: number | boolean) => void

Sets loop

setPlayMode: (mode: PlayMode) => void

Sets play mode.

setSpeed: (speed: number) => void

Sets speed

seek: (frame: number) => void

Seek to a frame.

revertToManifestValues: (playbackKeys) => void

It ignores the props sets by the player and uses manifest.

ArgumentTypeDescription
playbackKeys (Optional)`playbackKeys?: Array<keyof PlaybackOptions‘activeAnimationId’>`

Usage:

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