# Animation options in Dash

**URL:** <https://community.plotly.com/t/animation-options-in-dash/6555>\
**Category:** Dash Python\
**Created:** [October 29, 2017, 10:05pm UTC](https://community.plotly.com/t/animation-options-in-dash/6555 "2017-10-29T22:05:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kefeng](https://avatars.discourse-cdn.com/v4/letter/k/9fc348/32.png) [@Kefeng](https://community.plotly.com/u/Kefeng)\
**Post date:** [October 29, 2017, 10:05pm UTC](https://community.plotly.com/t/animation-options-in-dash/6555/1 "2017-10-29T22:05:35Z")

</div>

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](https://plot.ly/javascript/animations/). 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](https://stochopy.herokuapp.com) and animations are waaaaaaaaaaay sluggish than locally…do you have any idea why is that?

Thank you for your answers!

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [November 3, 2017, 9:03pm UTC](https://community.plotly.com/t/animation-options-in-dash/6555/2 "2017-11-03T21:03:56Z")

</div>

See [https://plot.ly/javascript/animations/](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](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.

---

<div class="post-metadata">

**Author:** ![mbkupfer](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mbkupfer/32/4334_2.png) [@mbkupfer](https://community.plotly.com/u/mbkupfer)\
**Post date:** [November 14, 2018, 10:52pm UTC](https://community.plotly.com/t/animation-options-in-dash/6555/3 "2018-11-14T22:52:25Z")

</div>

EDIT: Never mind, I was able to get a ton of help from this documentation page: [https://plot.ly/python/animations/](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.

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [November 14, 2018, 11:09pm UTC](https://community.plotly.com/t/animation-options-in-dash/6555/4 "2018-11-14T23:09:43Z")

</div>

Also see [📣 Exploring a "Transitions" API for dcc.Graph](https://community.plotly.com/t/exploring-a-transitions-api-for-dcc-graph/15468)

---

<div class="post-metadata">

**Author:** ![mbkupfer](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mbkupfer/32/4334_2.png) [@mbkupfer](https://community.plotly.com/u/mbkupfer)\
**Post date:** [November 15, 2018, 12:30am UTC](https://community.plotly.com/t/animation-options-in-dash/6555/5 "2018-11-15T00:30:34Z")

</div>

Very cool! Thanks for the update.