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: 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: 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.