# PlotlyJS.jl animation

**URL:** <https://discourse.julialang.org/t/plotlyjs-jl-animation/70058>\
**Category:** Visualization\
**Tags:** plotlyjs, animations\
**Created:** [October 19, 2021, 6:16pm UTC](https://discourse.julialang.org/t/plotlyjs-jl-animation/70058 "2021-10-19T18:16:13Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![empet](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/empet/32/221303_2.png) [@empet](https://discourse.julialang.org/u/empet)\
**Post date:** [October 20, 2021, 5:58pm UTC](https://discourse.julialang.org/t/plotlyjs-jl-animation/70058/3 "2021-10-20T17:58:56Z")

</div>

This is an example of animation with button and slider. Each frame updates some attributes of the basic trace, as well as the layout (this example is more general than that in the link you posted). Even more general would be an example with two basic traces, each one updated by the animation frames.

```julia
using PlotlyJS

N=300
X = LinRange(0, 10, N)
Y = -3 .+ 7*rand(N)

trace = scatter(x = [X[1]],  
                y = [Y[1]],
                mode="lines",
                line_width=1.5,
                line_color="RoyalBlue")

n_frames = length(X)
frames = Vector{PlotlyFrame}(undef, n_frames)
for k in 1:n_frames
    frames[k] = frame(data=[attr(x=X[1:k], #update x and y
                                 y=Y[1:k],
                                 )],
                      layout=attr(title_text="Test frame $k"), #update title
                      name="fr$k", #frame name; it is passed to slider 
                      traces=[0] # this means that the above data update the first trace (here the unique one) 
                        ) 
end    

updatemenus = [attr(type="buttons", 
                    active=0,
                    y=1, #(x,y) button position 
                    x=1.1,
                    buttons=[attr(label="Play",
                                  method="animate",
                                  args=[nothing,
                                        attr(frame=attr(duration=5, 
                                                        redraw=true),
                                             transition=attr(duration=0),
                                             fromcurrent=true,
                                             mode="immediate"
                                                        )])])];

sliders = [attr(active=0, 
                minorticklen=0,
                
                steps=[attr(label="f$k",
                            method="animate",
                            args=[["fr$k"], # match the frame[:name]
                                  attr(mode="immediate",
                                       transition=attr(duration=0),
                                       frame=attr(duration=5, 
                                                  redraw=true))
                                 ]) for k in 1:n_frames ]
             )];    

ym, yM = extrema(Y)
layout = Layout(title_text="Test", title_x=0.5,
    width=700, height=450,
              xaxis_range=[-0.1, 10.1], 
              yaxis_range=[ym-1, yM+1],
              updatemenus=updatemenus,
              sliders=sliders
    )
pl = Plot(trace, layout, frames)

```

---

_[View the full topic](https://discourse.julialang.org/t/plotlyjs-jl-animation/70058)._