# Animation slider in Pluto.jl

**URL:** <https://discourse.julialang.org/t/animation-slider-in-pluto-jl/50580>\
**Category:** General Usage\
**Tags:** pluto\
**Created:** [November 22, 2020, 1:04pm UTC](https://discourse.julialang.org/t/animation-slider-in-pluto-jl/50580 "2020-11-22T13:04:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Skoffer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/skoffer/32/378_2.png) [@Skoffer](https://discourse.julialang.org/u/Skoffer)\
**Post date:** [November 22, 2020, 1:04pm UTC](https://discourse.julialang.org/t/animation-slider-in-pluto-jl/50580/1 "2020-11-22T13:04:51Z")

</div>

I wonder if this functionality already exists, that is why I am asking before trying to reinvent the bicycle.

Is there an existing component to create a visual UI, which can run animation?

What I have in mind, is some setup similar to the usual Slider, so one can write

```julia
@bind param html"<input type='animation_slider'>"

```

and instead of the usual slider one get something like  
 ![flameshot-2020-11-22T14-54-36](https://global.discourse-cdn.com/julialang/original/3X/d/1/d1bcc9994b372d577063b8157972602b75457156.png)

By pressing `play` button, this slider should just auto-update the value of `param` and as a result, the user gets some nice live animation of his plots. It can be useful for example in simulation modeling, where one wants to see how the model evolves over time and it’s more convenient than generating gif for each set of parameters.

---

<div class="post-metadata">

**Author:** ![ericphanson](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ericphanson/32/215186_2.png) [@ericphanson](https://discourse.julialang.org/u/ericphanson)\
**Post date:** [November 22, 2020, 1:57pm UTC](https://discourse.julialang.org/t/animation-slider-in-pluto-jl/50580/2 "2020-11-22T13:57:31Z")

</div>

It’s not exactly with the UI you suggested, but you can use `PlutoUI.Clock()` for this; for example

![image](https://global.discourse-cdn.com/julialang/original/3X/8/c/8c47529247e7d3bab3fa0f4bdb4d136aca1db673.gif)

which is from my work-in-progress notebook [https://github.com/ericphanson/UnbalancedOptimalTransport.jl/blob/305544b877b0fba57bc24329b814c6d216de47e1/scripts/visualize\_pluto.jl](https://github.com/ericphanson/UnbalancedOptimalTransport.jl/blob/305544b877b0fba57bc24329b814c6d216de47e1/scripts/visualize_pluto.jl)

You just use `t` as your timer, which just counts up when you press play, and resets to 1 if you stop and start it. You can use `mod1(t,N)` to loop after `N` steps, etc.

---

<div class="post-metadata">

**Author:** ![Skoffer](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/skoffer/32/378_2.png) [@Skoffer](https://discourse.julialang.org/u/Skoffer)\
**Post date:** [November 23, 2020, 8:32am UTC](https://discourse.julialang.org/t/animation-slider-in-pluto-jl/50580/3 "2020-11-23T08:32:16Z")

</div>

Thank you! After some consideration I understood that this `Clock` is better for my purposes than my initial idea. It worth an issue of adding it to the documentation though, since currently it is [amiss](https://juliahub.com/docs/PlutoUI/abXFp/0.6.3/autodocs/).