Methods
Explains how to call the methods that the Lottie-React component supports.
To call methods on the instance of the Player component, get a reference to the component and call the methods on
ref.current. This is essentially Reacts equivalent of document.getElementById(). You may then use this reference to call methods that are described in the React documentation.The following example demonstrates obtaining the instance of the Player and playing an animation.
import React from 'react';
import { Player } from '@lottiefiles/react-lottie-player';
class App extends React.Component {
constructor(props) {
super(props);
this.player = React.createRef(); // initialize your ref
}
render() {
return (
<Player
ref={this.player} // set the ref to your class instance
autoplay={false}
loop={true}
controls={true}
src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
style={{ height: '300px', width: '300px' }}
></Player>
);
}
}
export default App;
The
lottieRef property returns the Lottie animation instance that you can use to set data and call methods as described in the bodymovin documentation.The following example demonstrates retrieving a Lottie instance and playing an animation using the instance.
import React from 'react';
import { Player } from '@lottiefiles/react-lottie-player';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { lottie: null }; // initialize your state
}
render() {
return (
<Player
lottieRef={instance => {
this.setState({ lottie: instance }); // the lottie instance is returned in the argument of this prop. set it to your local state
}}
autoplay={false}
loop={true}
controls={true}
src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
style={{ height: '300px', width: '300px' }}
></Player>
);
}
}
export default App;
The Lottie-React component supports the following methods:
Method:
pause()Purpose: Pauses animation play.
Return Type:
void-----------------------------------------------Method:
play()Purpose: Plays the animation.
Return Type:
void-----------------------------------------------Method:
setPlayerDirection(direction: 1 | -1 )Purpose: Sets the direction of play.
Parameters:
Name | Type | Description |
|---|---|---|
direction | 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:
setPlayerSpeed(speed?: number)Purpose: Sets the animation playback speed.
Parameters:
Name | Type | Description |
|---|---|---|
speed | 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:
getVersions()Purpose: Returns the version of lottie-web used, as well as the current player's version.
Return Type:
{ lottieWebVersion: string, lottiePlayerVersion: string }----------------------------------------------------------Method:
setSeeker(frame: number | string, play: boolean)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.Last modified 3mo ago