react-plotly.js icon indicating copy to clipboard operation
react-plotly.js copied to clipboard

How to use frames for animation

Open kvedes opened this issue 4 years ago • 4 comments

Hi, I would like to do some simple animations similar to the ones shown in the official Plotly documentation, but it is not clear how to make the in react-plotly.

I cannot seem to find any documentation showing how to use the "frames" argument in the Plot function. Would it be possible to update the documentation with an example?

https://plotly.com/javascript/animations/

//kvedes

kvedes avatar Nov 13 '21 21:11 kvedes

Just faced the same question. Ended up doing this:

<Plot
  data={data}
  layout={layout}
  frames={frames}
/>

artt avatar Nov 23 '21 04:11 artt

@artt Thanks for the reply. Can you share an example of what the frames variable should look like?

kvedes avatar Nov 23 '21 06:11 kvedes

@kvedes Here's a working example: https://codesandbox.io/s/pier-stat-flood-w1ed4?file=/src/Flood.js:287-1152

artt avatar Nov 23 '21 08:11 artt

@artt In the working example you've provided, if you zoom in and then check heatmap, the zoom is not saved. Do you know how to keep the same zoom whenever the state of the checkbox changes?

msimoni18 avatar Sep 29 '22 01:09 msimoni18