Events

Enumerates the Lottie React events that you can use to capture playback status.

Use the addEventListener calls to listen to the following exposed events.

NameDescription

load

Animation data is loaded.

instanceLoaded

Animation instance has been saved to state inside the react-player. Use this event to call playerRef.current.play(), playerRef.current.pause() etc..

error

An animation source cannot be parsed, fails to load or has format errors.

ready

Animation data is loaded and player is ready.

play

Animation starts playing.

pause

Animation is paused.

stop

Animation is stopped.

freeze

Animation is paused due to player being invisible.

loop

An animation loop is completed.

complete

Animation is complete (all loops completed).

frame

A new frame is entered.

As an example, the following code demonstrates how to capture the load event and play the animation:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.player = React.createRef();
  }

  doSomething() {
    this.player.current.play(); // make use of the player and call methods
  }

  render() {
    return (
      <Player
        onEvent={event => {
          if (event === 'load') this.doSomething(); // check event type and do something
        }}
        ref={this.player}
        autoplay={false}
        loop={true}
        controls={true}
        src="https://assets3.lottiefiles.com/packages/lf20_XZ3pkn.json"
        style={{ height: '300px', width: '300px' }}
      ></Player>
    );
  }
}

export default App;

Last updated