Methods

Describes the JavaScript methods to load and play animation in the Lottie-Player.

Use the following JavaScript methods to load and play animations using the Lottie-Player.

Lottie-Player Methods

Method: getLottie()

Purpose: Returns the instance of the lottie-player component used in playing the animation.

Return Type: Promise<any>

-----------------------------------------------

Method: load(src: string | object)

Purpose: Load (and play) a given Bodymovin animation.

Parameters:

Name	Type	Description
src	string or object	URL, or a JSON string or object representing a Bodymovin JSON animation to play.

Return Type: void

--------------------------------------------------------

Method: pause()

Purpose: Pauses the animation.

Return Type: void

----------------------------------------------------------

Method: getVersions()

Purpose: Returns the version of lottie-web used, as well as the current player's version.

Return Type: { lottieWebVersion: string, lottiePlayerVersion: string }

----------------------------------------------------------

Method: play()

Purpose: Plays the animation.

Return Type: void

----------------------------------------------------------

Method: setDirection(value: number)

Purpose: Sets the direction of play.

Parameters:

Name	Type	Description
value	number	Direction values. Either 1 to play the animation forward or -1 to play it backward. The default value is 1.

Return Type: void

----------------------------------------------------------

Method: setLooping(value: boolean)

Purpose: Enables or disables looping the animation.

Parameters:

Name	Type	Description
value	boolean	true enables looping, while false disables looping. The default value is false.

Returns

Type: void

----------------------------------------------------------

Method: setSpeed(value?: number)

Purpose: Sets the animation playback speed.

Parameters:

Name	Type	Description
value	number	Playback speed. The value must be any positive integer. The default value is 1.

Returns

Type: void

----------------------------------------------------------

Method: stop()

Purpose: Stops animation playback.

Return Type: void

----------------------------------------------------------

Method: seek(value: number | string)

Purpose: Seek to a given frame.

Parameter: The frame value can either be a number or a percent string (for example, 50%).

Return Type: void

To get the total number of frames in the animation, use:

animation.getLottie().totalFrames

Passing an invalid value to seek() causes the animation to be played from the start.

----------------------------------------------------------

Method: snapshot(download?: boolean)

Purpose: Snapshot the current frame as SVG.

Parameter: Either true or false. If the download argument is true, a download of the snapshot is triggered in the browser.

The default value is true.

Return Type: string

--------------------------------------------------------

Method: toggleLooping()

Purpose: Toggles animation looping. If the looping is set to true, toggleLooping() sets it to false, and vice versa.

Parameter: None

Return Type: void

--------------------------------------------------------

Method: togglePlay()

Purpose: Toggles playing state.

Parameter: None

Return Type: void

--------------------------------------------------------

Method: resize()

Purpose: Resizes the animation to the dimensions of the device on which it is being played.

Parameter: None

Return Type: void

Example

The following example demonstrates the use of some Lottie-Player methods to play the animation.