Animation plays itself when a state changes

[gisellezeitoune]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

First I'm rendering an animation with autoplay set to false. this.options = { loop: false, autoplay: false, animationData: require("./leo_anim.json"), rendererSettings: { preserveAspectRatio: "xMidYMid slice" } };

The animation does not start which is perfect, but then I call setState() function and the animation starts playing

See the behavior here: https://codesandbox.io/s/2wk6nv3pvr

What is the expected behavior?

If the animation has autoplay set to false, then it should only start when the play function is called.

Which versions of Lottie

Both "react-lottie": "1.0.0" & "react-lottie": "1.1.0"

Thank you for your help!

[chenqingspring]

Please set isStopped to true, which will work as you expected.

<Lottie options={this.props.options} isStopped={true}/>

[gisellezeitoune]

Thank you for your prompt response. That works! But then, what is autoplay for? Is it ok to set isStopped to true? It sounds like a hack just to make it work

[chenqingspring]

Yes, I think that is a bug to be fixed. I'll handle the logic in the wrapper.

Thanks for issuing this :)

[gisellezeitoune]

There's another problem when setting isStopped to true. Now, when a state changes, the animation stops playing.

See: https://codesandbox.io/s/xjr104920p

The play button should start the animation on the bottom but, because it also changes a state and the animation has isStopped set to true, the animation stops immediately after playing. Contrary to what happens with the top animation that has isStopped set to false. Even though I never play this animation, it starts because the state changed

[fuchenxu2008]

It is still not fixed

[maccapakka]

@gisellezeitoune I've encountered the same problem - it's still not fixed

However, a workaround is as followed;

Instead of using isStopped as the above post suggests use isPaused as things SEEM to work fine

<Lottie
  options={defaultOptions}
  isPaused={!isStopped}
  style={{
    width: 50,
    height: 50
  }}
/>

[mosesoak]

@chenqingspring

Yes, I think that is a bug to be fixed. I'll handle the logic in the wrapper.

Sorry to bother you about this open issue from 2018 but it's causing our team a lot of pain. Any state change in the component knocks out autoplay: false.

Is there any chance you can look into this or do you need help with it, it's a fairly critical bug. Thanks!