Black Lives Matter. Please consider donating to Black Girls Code today.

How to slow down animation in plotly express

Hi everyone,

I am desperately trying to slow down p. express animation speed,

Is there a way to achive that in figure.layout.update menu?

any help would be appreciated

Yes you can change the duration of the transition in the layout as follows

fig.update_layout(transition = {'duration': 1000})

See for example

Thank you very much for answering.

But unfortunately, I can’t get the result.
Let me share my codes with you.
I could’nt slow animation even with great numbers with transiton like ten thousand :frowning:

fig=px.scatter_geo(terör.sort_values(by='Year'), locations="Code", scope='asia', color="Unnamed: 2", hover_name="Unnamed: 2",  animation_frame="Year", text="Unnamed: 2",         
               size='Terrorism fatalities (GTD, 2018) (deaths)',             

fig.update_traces(textposition='middle center',marker={'symbol':"circle-x"}, textfont={'color':'black','family':'Helvetica','size':17},mode="text+markers")

fig.layout.update( title_text="Asya'da Can Kaybıyla Sonuçlanan Terör Faaliyetleri (1970-2017)",title_font_size=30, showlegend=False,  transition= {'duration':8000 })

Oh no, you’re right, other parameters need to be updated for example in the updatemenus. You can take a look at the examples in but I’m afraid it’s a bit advanced to do this…

1 Like

For example the code below has the right frame duration (4s) but I can’t get this working with px

import plotly.graph_objects as go

fig = go.Figure(
    data=[go.Scatter(x=[0, 1], y=[0, 1])],
        xaxis=dict(range=[0, 5], autorange=False),
        yaxis=dict(range=[0, 5], autorange=False),
        title="Start Title",
                          args=[None, {"frame": {"duration": 4000, "redraw": False},}])])]
    frames=[go.Frame(data=[go.Scatter(x=[1, 2], y=[1, 2])]),
            go.Frame(data=[go.Scatter(x=[1, 4], y=[1, 4])]),
            go.Frame(data=[go.Scatter(x=[3, 4], y=[3, 4])],
                     layout=go.Layout(title_text="End Title"))]
1 Like

This works for me with a px figure… you have to reach pretty deep into the configuration of the “play” button :slight_smile:

fig.layout.updatemenus[0].buttons[0].args[1]["frame"]["duration"] = 2000

wuhuuu, you are hero, thank you so much, it work like a dream.

actually you both (@Emmanuelle and @nicolaskruchten) are my hero, your helps are appreciated a lot.:smiley::smiley:

greetings from Turkey…



@TOM_CAO I’m sorry, but I’m not sure what you’re asking…

sorry: pls kindly see following,my english is poor…

i want to express:
After this kind of graphics will not be adaptive to adjust the width and height, how can you only adjust the speed, the rest remain, thank you very much

Hi there! For me, this would correctly stop the animation at each frame for the given duration. However, I can’t find a way to slow the animation transition itself.

I’m working with yearly data, so the above pauses the animation at a given year at the given duration before it moves to the next year. The issue is that the transition from one year to the next is still pretty fast…

I tried accessing one of the args to no avail:

fig.layout.updatemenus[0].buttons[0].args[1]["transition"]["duration"] = 2000

Do you have a similar line that would with in Plotly Express?

Hi @linolinlin
This tutorial on animated scatter plot shows how to slow down or quicken the animation transition, using Plotly Express. Of course, @nicolaskruchten is right, but the video will show you why and how. The code that I use for the tutorial is in the description below the video.

1 Like