# How to obtain 3D plot animation with multiple trajectories

**URL:** <https://community.plotly.com/t/how-to-obtain-3d-plot-animation-with-multiple-trajectories/54222>\
**Category:** 📊 Plotly Python\
**Created:** [June 27, 2021, 3:39pm UTC](https://community.plotly.com/t/how-to-obtain-3d-plot-animation-with-multiple-trajectories/54222 "2021-06-27T15:39:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![harsh](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@harsh](https://community.plotly.com/u/harsh)\
**Post date:** [June 27, 2021, 3:39pm UTC](https://community.plotly.com/t/how-to-obtain-3d-plot-animation-with-multiple-trajectories/54222/1 "2021-06-27T15:39:35Z")

</div>

Hi all,

I am trying to plot a 3D animation which contains two trajectories.

For the first trajectory,

import numpy as np  
import plotly.graph\_objects as go

fig = go.Figure(  
data=[go.Scatter3d(x=env.xsuc, y=env.ysuc, z=env.zsuc,  
mode=“markers”,marker=dict(color=“darkolivegreen”, size=10)),  
])

fig.update\_layout(

```
      scene = dict(
    
    xaxis=dict(range=[0.2, 3.8],title="X-axis", autorange=False),
    yaxis=dict(range=[-0.334,+0.334],title="Y-axis", autorange=False),
    zaxis=dict(range=[0.7, 1.1],title ="Z-axis", autorange=False),
    ))

```

frames = [go.Frame(data= [go.Scatter3d(  
x=env.xsuc[:k+1],  
y=env.ysuc[:k+1],  
z=env.zsuc[:k+1])],

```
               traces= [0],
               name=f'frame{k}'      
              )for k in range(len(env.xsuc))]

```

fig.update(frames=frames)

fig.update\_layout(updatemenus=[dict(type=“buttons”,  
buttons=[dict(label=“Play”,method=“animate”,args=[None, dict(frame=dict(redraw=True,  
fromcurrent=True, mode=‘immediate’)) ])])])

fig.show()

Note: env.xsuc,env,env.ysuc,env.zsuc ,env.x\_par, y=env.y\_par, z=env.z\_par,are taken as lists in the code.

The first trajectory code executes and I have an animation in the following way(JPEG file)

 ![3D_plot](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/b/b06fd590db34f3976c92ea67e14351b79471b4fd.jpeg)

I am able to obtain the animation for second trajectory as like the trajectory one as shown above.

However, I am unable to include the following second trajectory within the same animation plot

For second trajectory

fig = go.Figure(  
data=[go.Scatter3d(x=env.x\_par, y=env.y\_par, z=env.z\_par,  
mode=“markers”,marker=dict(color=“gold”, size=10,symbol=“square”)),  
])

fig.update\_layout(

```
      scene = dict(
    
    xaxis=dict(range=[0.2, 3.8],title="X-axis", autorange=False),
    yaxis=dict(range=[-0.334,+0.334],title="Y-axis", autorange=False),
    zaxis=dict(range=[0.7, 1.1],title ="Z-axis", autorange=False),
    ))

```

frames = [go.Frame(data= [go.Scatter3d(  
x=env.x\_par[:k+1],  
y=env.y\_par[:k+1],  
z=env.z\_par[:k+1])],

```
               traces= [0],
               name=f'frame{k}'      
              )for k in range(len(env.xsuc))]

```

fig.update(frames=frames)

fig.update\_layout(updatemenus=[dict(type=“buttons”,  
buttons=[dict(label=“Play”,  
method=“animate”,  
args=[None, dict(frame=dict(redraw=True,fromcurrent=True, mode=‘immediate’))])])])

fig.show()

I am presently trying to integrate the two trajectory codes and obtain one single animation plot for two trajectories.  
Any help is highly appreciated, Thank you in advance!

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [June 28, 2021, 7:22pm UTC](https://community.plotly.com/t/how-to-obtain-3d-plot-animation-with-multiple-trajectories/54222/2 "2021-06-28T19:22:05Z")

</div>

@harsh  
To get your animation work, I rearranged your code and defined the frames for the two traces animation:

```auto
fig = go.Figure(go.Scatter3d(x=env.xsuc, y=env.ysuc, z=env.zsuc, #this is the trace 0
                        mode='markers',marker=dict(color='darkolivegreen', size=10)))
fig.add_scatter3d(x=env.x_par, y=env.y_par, z=env.z_par, #this is the trace 1
                  mode='markers',marker=dict(color='gold', size=10,symbol='square'))
N = len(env.xsuc)#it must be equal with the len(env.x_par)
frames = [go.Frame(data= [go.Scatter3d(x=env.xsuc[:k+1],
                                 y=env.ysuc[:k+1],
                                 z=env.zsuc[:k+1]),
                          go.Scatter3d(x=env.x_par[:k+1],
                            y=env.y_par[:k+1],
                            z=env.z_par[:k+1])],
                   name=f'frame{k}',
                   traces=[0,1]) for k in range(N)] # traces =[0,1] tells plotly.js that the first element in frame data
                                                     #updates trace 0, while the second the trace 1
fig.update(frames=frames)
fig.update_layout(updatemenus=[dict(type='buttons',
                                    buttons=[dict(label='Play',
                                                  method='animate',
                                                  args=[None, 
                                                        dict(frame=dict(redraw=True,
                                                                        fromcurrent=True, 
                                                                        mode=‘immediate’)) ])])])
fig.update_scenes(xaxis=dict(range=[0.2, 3.8],title="X-axis", autorange=False),
                  yaxis=dict(range=[-0.334,+0.334],title="Y-axis", autorange=False),
                  zaxis=dict(range=[0.7, 1.1],title ="Z-axis", autorange=False))               

```

---

<div class="post-metadata">

**Author:** ![harsh](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@harsh](https://community.plotly.com/u/harsh)\
**Post date:** [June 28, 2021, 7:44pm UTC](https://community.plotly.com/t/how-to-obtain-3d-plot-animation-with-multiple-trajectories/54222/3 "2021-06-28T19:44:48Z")

</div>

Thank you very much!That worked in my implementation.