Animation options in Dash

Dash Python
1

Hello Dash community,

I have been working on my web app and it finally works pretty well…locally. As I understand, animations are not yet supported by Dash, therefore I found a workaround by using an Interval that updates the figure attribute of a Graph. However, transitions are not very smooth. I found an option animate and animate_options for Graph objects but I don’t know what keywords are accepted for animate_options to obtain smooth transitions. Ideally, I would like to obtain something as smooth as the Lorentz attractor example here. I tried

animation_options = dict(
    transition = dict(duration = 0),
    frame = dict(duration = 0, redraw = False),
)

but it doesn’t change anything…do you guys have any idea of what keywords I should use?

Also, I uploaded my app on Heroku and animations are waaaaaaaaaaay sluggish than locally…do you have any idea why is that?

Thank you for your answers!

2 Likes
2

See https://plot.ly/javascript/animations/ for a more detailed explanation of how animations work in plotly.js. Then, see https://github.com/plotly/dash-core-components/blob/40a0d87479064e0f56286adac1c0493cf903d2b7/src/components/Graph.react.js#L71 to see how the Dash Graph component invokes the underlying plotly.js .animate method.

3

EDIT: Never mind, I was able to get a ton of help from this documentation page: https://plot.ly/python/animations/

@Kefeng, I know it’s been over a year, but curious if you were able to get this done using @chriddyp’s answer?

If so, could you share your code? I’m a bit fuzzy on how this would be implemented with more than one transition as the plotly.js example only shows one randomized transition.

4

Also see 📣 Exploring a "Transitions" API for dcc.Graph

5

Very cool! Thanks for the update.