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.
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)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:
voidTo 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:
voidThe following example demonstrates the use of some Lottie-Player methods to play the animation.
Last modified 9mo ago