Animation issue in graph

[khalidahmed1101]

Hi, I'm trying to build and render video of a Linegraph, it shows good locally in reactapp, but after building or rendering the video, the animation stops, can you please help or tell any work around to fix this? thanks

Reactapp video:

reactvideo.mp4

Render video:

rendervideo.mp4

[JonnyBurger]

Hi there!

You are most likely facing an issue as described here: https://remotion.dev/docs/flickering

Unfortunately I can not give any more advice without knowing more information about the project, such as which framework you used.

[khalidahmed1101]

Hi @JonnyBurger I'm using recharts Line graph in reactjs, please help what should I do to fix this? Thanks

[JonnyBurger]

As the document above explains, all animation values can only be driven by useCurrentFrame(). It looks like there is a default animation in Recharts (see recharts/recharts#1728 to disable) that will lead to flickering in Remotion.

You need to disable the default animation and make one that is based on useCurrentFrame() to get a proper render.

[khalidahmed1101]

Hi @JonnyBurger ,
Ok I will disable the animation, but can you help how can I achieve animation of the line as it is shown in the first video aka reactapp video, from left to right?
I will be thankful

[JonnyBurger]

We have some demo code at https://github.com/remotion-dev/d3-example
Also here is a similar issue: #924

As I've mentioned in that one, I don't have time to help everyone individually anymore :( but I hope you can find these resources helpful!