Methods

Explains how to call the methods that the Lottie-React component supports.

Get Player instance

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;

Get Lottie instance

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;

Lottie-React Methods

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: 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: 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.
Last modified 8mo ago