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.Name | Description |
|---|---|
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 modified 2mo ago