Closed kb-ig closed 1 year ago
Hi @kb-ig, thanks for creating this issue, I'll look in to it.
@kb-ig The problem seems to be coming from your toggle code, I don't have a problem using the animationData like in your first code snippet:
https://codesandbox.io/s/react-play-lottie-on-toggle-s3d6hf
I think the spread operator works because React detected a change (the new object being created) and re-renders the component, but the first method doesn't do that so the component isn't re-rendered
@samuelOsborne Yeah I see what you're saying. I think I was misunderstanding the autoplay
prop. It must only play on the load
event, and that only fires once in my codesandbox above, regardless of pressing the button to toggle the value passed into the autoplay
prop. I was under the impression that changing the value passed into the autoplay
prop would re-render the Player
component, but that doesnt seem to be the case.
It might be handy to have a play
prop, which doesnt only play on the load
event, but plays regardless of the player state. An in my example code, I'd pass the value into play
rather than autoplay
.
I've played around with this react-lottie-player before stumbling upon the lottiefiles one, which has something to that effect.
@kb-ig Yes you're correct, autoplay will play the animation when it has finished loading.
Is there a difference between your idea of a play
prop and calling the play()
method like I did in my codesandbox?
@samuelOsborne No, no difference really, other than taking away some of the visual noise of capturing the instance and calling a function on the instance. It would really just be a convenience prop, that would:
start()
function if the play
prop is true
and the animation is not currently playingstop()
function if the play
prop is false
and the animation is currently playingJust an idea based on very little experience using this or other lottie players.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.
Overview
When using an imported lottie JSON file as the
src
rather than specifying a URL, I have to spread the JSON object into a new object every time the component renders, otherwise the animation doesnt play. I'm not sure if there's a valid reason for it or it's a bug.This doesnt work - the animation doesnt play:
But this does work - the animation plays
Consuming repo
I've reproduced this in a couple of repos, including this codesandbox.
Labels
Type: Bug
label to this issue.