Animation blinking when animationData changes

[Muhammad-Ashik]

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]

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

[Muhammad-Ashik]

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]

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

[Muhammad-Ashik]

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

[mifi]

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]

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]

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]

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.

• may use a temporary div and loadAnimation on it before destoyring the old one (kind of like double buffering) but it may complicate the code a bit.
• maybe just defer calling destroy on the old one until the new one has finished loadAnimation, although it may cause other issues

[mifi]

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]

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]

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]

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.