Working with Lottie 05 May 2020  ■ Comments

How to Add User Controls to Your Lottie in React

This article builds on the previous introduction to using Lottie animations in React so that you can control your Lottie. The last article took us as far as implementing a Lottie that would autoplay, and therefore didn't have any user controls. This article will guide you on how to add playback controls to your player.

User Controls

User controls provide user interface buttons to control playback of the Lottie. This article covers controlling your Lottie with buttons that:

  • Stop
  • Start
  • Pause/Play

your animation.

React Development Environment

This walkthrough will use CodeSandbox as the online development environment so that anyone can follow along from any computer that runs a browser. This particular sandbox will render our App so that we can see the HTML output, i.e. our Lottie in action.

If you recall, from the first walkthrough, we tweaked our React App starter project to add a new folder to hold our Lottie JSON assets. We updated the dependencies to include react-lottie to enable playing Lottie in React. We edited the App.js file to import this dependency and our LottieFile's JSON. Finally, we edited the code to set up our page and call the animation.

Apply User Controls

Now you are ready to add user controls to your Lottie.

1. Add a stop and start button to control your Lottie

Currently, our Lottie is in autoplay mode using this code in App.js:

import React from "react";
import "./styles.css";
import Lottie from "react-lottie";
import animationData from "./lotties/kiss-of-the-heart";

export default class LottieControl extends React.Component {

  render() {
    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
      }
    };

    return <div>
      <Lottie options={defaultOptions}
              height={400}
              width={400}/>
    </div>
  }
}

1.1 Set up the initial state of the Lottie

By setting the class variable, we control the initial state of the Lottie and the buttons that we will add.

export default class LottieControl extends React.Component {

  // set initial state property
  state = {isStopped: false};

1.2 Setup the buttons

This means adding and referencing a button style and adding buttons that call onClick events to interact with the state property added above. Notice, we add isStopped to the Lottie component, which reads from the current state property (if you get stuck, see the full JS code).

1.2.1 First the button style
  render() {

    // add button style
    const buttonStyle = {
      display: "block",
      margin: "10px auto"
    };
   
   // ...

  }
1.2.2 Next, edit the Lottie component

(Notice that we open parenthesis here that will only be closed in the next section).

   // ...

    return (
      <div>

        {/* add Lottie component */}
        <Lottie
          options={defaultOptions}
          height={400}
          width={400}
          isStopped={this.state.isStopped}
        />

1.2.3 Finally, add the buttons
        {/* add stop button */}
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isStopped: true })}
        >
          stop
        </button>

        {/* add start button */}
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isStopped: false })}
        >
          start
        </button>

      </div>
    );
  }

Now the user has the ability to stop and start the Lottie animation.

2. Add a Pause Button to Control Your Lottie

Our starting point for this section is the Lottie with stop/start button.

2.1 Repeat step 1.1 to set up the initial state of the Lottie and the button

This time, however, we set the isPaused property:

// set initial state property
state = { isPaused: false };

2.2 Setup the button

We will retain the button style set up for the stop/start example (1.2.1). Then, use one button to call the onClick events that interact with the state property added in 2.1 above.

2.2.1 Edit the Lottie component

This time we apply isPaused to the Lottie component, which reads from the current state property.

  // ...

    return (
      <div>
        {/* add Lottie component */}
        <Lottie
          options={defaultOptions}
          height={400}
          width={400}
          isPaused={ this.state.isPaused }
        />

2.2.1 Edit buttons

We will have just one play/pause button applying the isPaused state.

        {/* add pause/play button */}

        <button
          style={buttonStyle}
          onClick={() => this.setState({ isPaused: !this.state.isPaused })}
        >
          pause/play
        </button>
      </div>
    );

  // ...

Now the user has the ability to pause and play the Lottie animation.

2.3 Improve the user experience

As a last touch, let's consider our user's experience and improve our pause/play button with dynamic naming.

2.3.1 This means adding another method:
  // add a method to determine the button label used
  buttonLabel() {
    if (this.state.isPaused === true) {
      return (<div>Play</div>);
    } else {
      return (<div>Pause</div>)
    }
  }
2.3.2 Edit the onClick event

Finally, change the onClick event to switch the isPaused state property. The method in 2.3.1.above is able to read the current state to determine the new label:

        {/* add play/pause button */}
        <button
          style={buttonStyle}
          onClick={() => this.setState({isPaused: !this.state.isPaused})}
        >
          {this.buttonLabel()}
        </button>

(If you get stuck, see the full JS code) below.

Now your user has a dynamically-labeled button to pause and play the Lottie animation.

You try it

If you are keen to incorporate animations smaller than an average PNG file into your React projects, then feel free to browse our animations, where you will find the best library of Lottie animations available for free.

Troubleshooting?

Full JS Code for Stop and Start Buttons

import React from "react";
import "./styles.css";
import Lottie from "react-lottie";
import animationData from "./lotties/kiss-of-the-heart";

export default class LottieControl extends React.Component {

  // set initial state property
  state = {isStopped: false};

  render() {

    // add button style
    const buttonStyle = {
      display: "block",
      margin: "10px auto"
    };

    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
      }
    };

    return (
      <div>

        {/* add Lottie component */}
        <Lottie
          options={defaultOptions}
          height={400}
          width={400}
          isStopped={this.state.isStopped}
        />

        {/* add stop button */}
        <button
          style={buttonStyle}
          onClick={() => this.setState({isStopped: true})}
        >
          stop
        </button>

        {/* add start button */}
        <button
          style={buttonStyle}
          onClick={() => this.setState({isStopped: false})}
        >
          start
        </button>

      </div>
    );
  }
}

Full JS code for Pause Button

import React from "react";
import "./styles.css";
import Lottie from "react-lottie";
import animationData from "./lotties/kiss-of-the-heart";

export default class LottieControl extends React.Component {

// set initial state property

  state = {isPaused: true};

// add a method to determine the button label used

  buttonLabel() {
    if (this.state.isPaused === true) {
      return (<div>Play</div>);
    } else {
      return (<div>Pause</div>)
    }
  }

  render() {

// add button style
    const buttonStyle = {
      display: "block",
      margin: "10px auto"
    };

// add default lottie options
    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice"
      }
    };

    return (
      <div>

{/* add Lottie component */}
        <Lottie
          options={defaultOptions}
          height={400}
          width={400}
          isPaused={this.state.isPaused}
          
        />

{/* add dynamic button */}
        <button
          style={buttonStyle}
          onClick={() => this.setState({isPaused: !this.state.isPaused})}
        >
          {this.buttonLabel()}
        </button>

      </div>
    );
  }
}
Comments