search

mifi / react-lottie-player

Fully declarative React Lottie player
MIT License
505 stars 53 forks source link

Animation blinking when animationData changes #54

Open Muhammad-Ashik opened 2 years ago

Muhammad-Ashik commented 2 years ago

I have a text input. Whatever I type in this input I update the JSON. So whenever I update the JSON the animation is blinking. Is there anyway it will not blink on every typing. Animation will remain as it is only the change I want will effect on the animation?

mifi commented 2 years ago

hi. canyou please provide an example code to reproduce the problem, like codesandbox or similar, then maybe someone can help you out

Muhammad-Ashik commented 2 years ago

Here is the Codesandbox link: https://codesandbox.io/s/flowcode-animation-7md3t?file=/src/videoPlayer/VideoPlayer.tsx

If you type on text input you will see text update but the animation blinking on every input change. I want to update text on every keystroke and on the animation it will effect on the text only not the whole animation

mifi commented 2 years ago

Your code doesn't use react-lottie-player, are you in the wrong project?

Muhammad-Ashik commented 2 years ago

I am using react-lottie-player with remotion. could you please check again?

mifi commented 2 years ago

oops yes i can see it now. can you try to reproduce the problem without remotion? I believe that it could be caused by remotion remounting the component or something like this

Muhammad-Ashik commented 2 years ago

I will try without remotion. Let's if it is a problem with remotion or not. I have another request to you. Your package is really great. I can update the json in it shows real time without the blinking problem. My request is can you integrate your package with remotion? It will be so helpful for me and all the developer who wants to work with remotion and lottie.

Muhammad-Ashik commented 2 years ago

oops yes i can see it now. can you try to reproduce the problem without remotion? I believe that it could be caused by remotion remounting the component or something like this

I have tried without remotion but still it's same

mifi commented 2 years ago

ok i just tested and i think it doesn't have to do with remotion, but it's because the animationData prop changes, which causes destroy() and then loadAnimation() tobe called. this probably causes a visual flash in between when there is no lottie tied to the dom element. I'm not sure how best to solve this.

mifi commented 2 years ago

I will try without remotion. Let's if it is a problem with remotion or not. I have another request to you. Your package is really great. I can update the json in it shows real time without the blinking problem. My request is can you integrate your package with remotion? It will be so helpful for me and all the developer who wants to work with remotion and lottie.

thanks. i'm not sure if I will make an integration with remotion because i don't use it, but if someone wants to do it, I'm happy to look into how to make it work nicely with remotion.

actually i have a similar project to remotion that I have been working on. Because of not being able to use remotion due to its licensing for a project of mine, I created something myself: https://github.com/mifi/reactive-video

I will probably make an integration or examples of how to use react-lottie-player with reactive-video some day, because it's a pretty good fit for this use case (declarative, reactive rendering)

Muhammad-Ashik commented 2 years ago

Oh wow I saw editly when I was searching for a library like remotion. But on that time your package may not had the docs to how to use it. So I took remotion. I hope your library get good impression. I will give a try. But requesting you please resolve the blinking issue. Thank you.

Muhammad-Ashik commented 2 years ago

Hi @mifi ! Hope you are well. I know you are so busy with so many project. Actually my project is blocked for this issue. Could you please tell me when this issue may resolved? Thank you for your support

mifi commented 2 years ago

Hi. I don't have any timeline unfortunately. Feel free to use lottie-web directly instead if that lets you solve the issue more easily. If you find a solution, I would appreciate details on how you solved it.

Muhammad-Ashik commented 2 years ago

@mifi Okay I will try to solve it and will share here. Thank you.

jezmck commented 2 years ago

@Muhammad-Ashik any luck with that?

Muhammad-Ashik commented 2 years ago

I am using another library where I have fixed the issue but didn't try to fix that in this library

Muhammad-Ashik commented 2 years ago

https://github.com/arthurdenner/remotion-lottie-test/blob/main/src/RemotionLottie.tsx