Methods

The following methods are accessible using the player instance.

pageGetting Player Instances

enterInteractiveMode: (stateId) => void

Activate the passed state machine.

Argument	Type	Description
stateId	string	The 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.

Argument	Type	Description
getOptions (Optional)	(currPlaybackOptions?: PlaybackOptions, manifestPlaybackOptions?: PlaybackOptions) => PlaybackOptions	PlaybackOptions 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.

Argument	Type	Description
indexOrId (Optional)	string | number	Index or Id of an animation from the .lottie manifest.
getOptions (Optional)	(prevPlaybackOptions?: PlaybackOptions, manifestPlaybackOptions?: PlaybackOptions) => PlaybackOptions	PlaybackOptions returned from this function will be used for the next animation.

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.

Argument	Type	Description
getOptions (Optional)	(currPlaybackOptions?: PlaybackOptions, manifestPlaybackOptions?: PlaybackOptions) => PlaybackOptions	PlaybackOptions 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.

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.

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.

Argument	Type	Description
playbackKeys (Optional)	playbackKeys?: Array<keyof PlaybackOptions | 'activeAnimationId'>	Pass empty array to reset all the options to Manifest props. Or pass specific options to reset.

Usage:

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