# Animation with multiple layers

**URL:** <https://community.plotly.com/t/animation-with-multiple-layers/40529>\
**Category:** 📊 Plotly Python\
**Created:** [June 3, 2020, 6:41pm UTC](https://community.plotly.com/t/animation-with-multiple-layers/40529 "2020-06-03T18:41:20Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![unicornsneversleep](https://avatars.discourse-cdn.com/v4/letter/u/48db29/32.png) [@unicornsneversleep](https://community.plotly.com/u/unicornsneversleep)\
**Post date:** [June 3, 2020, 6:41pm UTC](https://community.plotly.com/t/animation-with-multiple-layers/40529/1 "2020-06-03T18:41:20Z")

</div>

```auto
import plotly.graph_objects as go

fig = go.Figure(
    data=[go.Scatter(x=[0, 1], y=[0, 1])],
    layout=go.Layout(
        xaxis=dict(range=[0, 5], autorange=False),
        yaxis=dict(range=[0, 5], autorange=False),
        title="Start Title",
        updatemenus=[dict(
            type="buttons",
            buttons=[dict(label="Play",
                          method="animate",
                          args=[None])])]
    ),
    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"))]
)

fig.show()

```

Hey, Could any one help me if i want to add a time line and a toggle based on this example, how can I do it?  
Or if I want to use

```auto
px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country",
           log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])

```

Can I add another layer of animation, how? Say I want to show the connection between two scatter with a line connecting them.  
To simplify my thoughts, I want the time-line version animation, but multiple layers, because I want to create an effect of showing connection(with a line) between 2 scatters. Either those 2 methods above seem like lacking a bit but I don’t know how to combine them.  
Im thinking maybe something like this

```auto
## base layer of scatters, animation, by time
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country",
           log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])

## second layer of lines that connect the scatters, by animation by time
frames = 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"))]
)
fig_combined= [fig + frames]
fig_combined.show()

```

This code block above is no where near correct, but is what I think it will look like, hope someone can understand my idea of what I want to do here

Thank you!