# Smooth animation in Dash for Julia with dcc\_interval

**URL:** <https://discourse.julialang.org/t/smooth-animation-in-dash-for-julia-with-dcc-interval/70126>\
**Category:** Community\
**Tags:** plotting, visualization, plotlyjs, dash, animations\
**Created:** [October 21, 2021, 5:14am UTC](https://discourse.julialang.org/t/smooth-animation-in-dash-for-julia-with-dcc-interval/70126 "2021-10-21T05:14:34Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![valeroc](https://avatars.discourse-cdn.com/v4/letter/v/7c8e57/32.png) [@valeroc](https://discourse.julialang.org/u/valeroc)\
**Post date:** [October 21, 2021, 5:14am UTC](https://discourse.julialang.org/t/smooth-animation-in-dash-for-julia-with-dcc-interval/70126/1 "2021-10-21T05:14:34Z")

</div>

Hi, I have been exploring how to do smooth animations in Dash for Julia and found a way of doing it using dcc\_interval. I am not sure this is the best way to proceed but it seems to work fine when running in the local server in my computer. I need to explore how it will work when running on a remote server.

![DashSmoothAnimation](https://global.discourse-cdn.com/julialang/original/3X/8/3/83830657529265814e83ac730121fd92f57eae8b.gif)

```julia
using Pkg
Pkg.activate(".")
using Dash, DashHtmlComponents, DashCoreComponents, PlotlyJS

app = dash()

layout = Layout(;
    title = "Interval animation", 
    xaxis_title="x",
    yaxis_title="y",
    xaxis_range=[-2, 2],
    yaxis_range=[-2, 2], width=550,height=500
)

t = LinRange(0,2*pi,300)

function anim_frame(λ)
    x = cos.(λ*t)
    y = sin.(3*t)
    sc = scatter(;x=x, y=y, mode="lines", name="graphics")
    plot(sc,layout)
end

gr = dcc_graph(id="graph", figure=anim_frame(1.0))
app.layout = html_div(
    [
        gr,
        dcc_interval(
            id="interval-component",
            interval=50, # in milliseconds
            n_intervals=0
        ),
        html_div(id="counter",[1])
    ]
)

time = 0.0
Δt = .01

callback!(app,Output("counter","children"), Output("graph","figure"), Input("interval-component", "n_intervals")) do n
    global time
    time = time + Δt
    return ["time=$time"], anim_frame(2+3*sin(time))
end

run_server(app, "0.0.0.0", debug = true)

```