CODEWITHSUNDEEP
reactjslottie
jasper
jasper

Reputation: 945

Lottie animations starts playing when layer that contains it is clicked, how to stop this?

I've got a lottie animation that I trigger from a parent component, the problem is that for some reason the entire lottie component layer is clickable and initiates the animation.

This is the code code that I'm using: 

constructor(props) {
    super(props);
    this.state = {
      isStopped: true,
      isPaused: false,
      Animated: 0,
    };
    this.defaultOptions = {
      loop: false,
      autoplay: false,
      animationData: animationData
    };
  }

  clickHandler = () => {
    this.setState({ 
        isStopped: false,
        Animated: 0
    });
    console.log("clicked");
  };

  render() {
    return (
      <div id="ethdrop">
        <Lottie
          className='animation-class'
          options={this.defaultOptions}
          isStopped={this.state.isStopped}
          isPaused={this.state.isPaused}
          Animated={this.state.Animated}  
        />
    </div>
    );
  }

This is how the dom looks like: screenshot of my element inspector

I can't find anything that might be triggering this if any of you have any idea please let me know.

Upvotes: 4

Views: 6426

Answers (2)

Ignacio Segura
Ignacio Segura

Reputation: 698

There is an undocumented property: isClickToPauseDisabled. When this is set to false (which is the default value), you can pause and resume your animation by clicking on it. If you don't want this to happen, set this property to true.

Example: 

<Lottie options={this.defaultOptions}
    ...
    isClickToPauseDisabled={true} 
/>

Reference: https://github.com/chenqingspring/react-lottie/pull/54

Upvotes: 15

vitomadio
vitomadio

Reputation: 1140

Do this change in your clickHandler:

clickHandler = (e) => {
    e.preventDefault()
     this.setState({ 
        isStopped: false,
        Animated: 0
     }); 
    console.log("clicked"); 
};

Hope it helps.

Upvotes: 0

Related Questions