# dcc.Slider (play/pause) animation Dash app

**URL:** <https://community.plotly.com/t/dcc-slider-play-pause-animation-dash-app/32944>\
**Category:** Dash Python\
**Created:** [December 24, 2019, 10:31pm UTC](https://community.plotly.com/t/dcc-slider-play-pause-animation-dash-app/32944 "2019-12-24T22:31:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![msuths1](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/msuths1/32/8990_2.png) [@msuths1](https://community.plotly.com/u/msuths1)\
**Post date:** [December 24, 2019, 10:31pm UTC](https://community.plotly.com/t/dcc-slider-play-pause-animation-dash-app/32944/1 "2019-12-24T22:31:01Z")

</div>

@chriddyp, @nicolaskruchten and all.  
Hi,  
Im a newbie to Dash and Plotly and have an issue regarding animations on Dash app.  
I am having some issues with my slider animation. I have managed to create animations successfully on plotly using the “intro to animations” examples, however, I am having issues making a dash app animation. I couldn’t find any working examples of this. Is there perhaps a Gapminder example that could also be constructed using Dash App? So far I have used dcc. Interval (below), but there is serious lagging in animation.

I have attached my WIP code below, and the dataset is accessible on google drive:

> **[MOF\_trans\_data\_bad\_edit2.csv](https://drive.google.com/file/d/1VB_FoVWOPr-tdTTi85zuly5ieZi3BgeV/view?usp=sharing)**
>
> Google Drive file.

Any help on how to add a play pause button to dcc.Slider/ any tips on how to better approach this would be much appreciated!  
Thank you in advance and happy holidays!!

```auto
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
import flask

df = pd.read_csv(See google drive link)

server = flask.Flask( __name__ )
app = dash.Dash( __name__ , server=server)
features = df.columns

tabs_styles = {}
tab_style = {}

tab_selected_style = {}
app.layout = html.Div([
    html.H1('',
            style={}),
    html.Div([
        dcc.Tabs([
            dcc.Tab(label='MOF explorer', style=tab_style, selected_style=tab_selected_style,
                    children=[
                        html.Div([dcc.Graph(id='HTS-plot', animate=False)], style={'height': '70vh'}),
                        html.Div([
                            html.Label(["Select X variable:",
                                        dcc.Dropdown(id='xaxis', options=[{'label': i, 'value': i} for i in features],
                                                     value='Uptake (Grav.)', )])
                        ], style={}),
                        html.Div([
                            html.Label(["Select Y variable:",
                                        dcc.Dropdown(id='yaxis', options=[{'label': i, 'value': i} for i in features],
                                                     value='Uptake (Vol.)')])
                        ], style={}),
                        html.Div([
                            html.Label(
                                ["Select S variable:",
                                 dcc.Dropdown(id='marker_size', options=[{'label': i, 'value': i} for i in features],
                                              value='Pore Limiting Diameter')])
                        ], style={}),
                        html.Div([
                            html.Label(
                                ["Select C variable:",
                                 dcc.Dropdown(id="marker_color", options=[{'label': i, 'value': i} for i in features],
                                              value='Void Fraction')])
                        ], style={}),
                        html.Div([
                            html.Label(["Select Pressure (bar):",
                                        dcc.Interval(id='auto-stepper',
                                                     interval=1 * 1000, # in milliseconds
                                                     n_intervals=0
                                                     ),
                                        dcc.Slider(id='pressure-slider',
                                                   min=df['Pressure'].min(),
                                                   max=df['Pressure'].max(),
                                                   value=df['Pressure'].min(),
                                                   marks={str(pressure): str(pressure) for pressure in
                                                          df['Pressure'].unique()},
                                                   step=None,
                                                   )])
                        ], style={'padding': 10, 'fontSize': 14, 'font-family': 'Arial'})
                    ]),
            dcc.Tab(label='Statistical Analysis', style=tab_style, selected_style=tab_selected_style,
                    children=[
                        dcc.Graph(id='stat-plot')
                    ])

        ], style=tabs_styles),

    ]),

], style={}) # style for outter div

@app.callback(
    dash.dependencies.Output('pressure-slider', 'value'),
    [dash.dependencies.Input('auto-stepper', 'n_intervals')])

def on_click(n_intervals):
    if n_intervals is None:
        return 0
    else:
        return (n_intervals + 1) % df['Pressure'].max()

@app.callback(Output('HTS-plot', 'figure'),
              [
                  Input('xaxis', 'value'),
                  Input('yaxis', 'value'),
                  Input('marker_size', 'value'),
                  Input('marker_color', 'value'),
                  Input('pressure-slider', 'value')
              ])
def update_graph(xaxis_name, yaxis_name, size_name, color_name, pressure_value):
    dff = df[df['Pressure'] == pressure_value]
    return {'data': [go.Scatter(x=dff[xaxis_name],
                                y=dff[yaxis_name], mode='markers',
                                marker_color=dff[color_name], marker_size=2 * dff[size_name],
                                marker=dict(opacity=0.8, showscale=True,
                                            line=dict(width=0.5, color='DarkSlateGrey'),
                                            colorbar=dict(title=color_name),
                                            colorscale='Viridis', ),
                                text=dff['DDEC code'],
                                hovertemplate=
                                "<b>%{text}</b><br><br>" +
                                "Volumetric Uptake: %{y:.0f cm/(STP)cm}<br>" +
                                "Gravimetric Uptake: %{x:.0 mol/kg}<br>" +
                                "Largest Cavity Diameter : %{marker.size:,}" +
                                "<extra></extra>", )]

        , 'layout': go.Layout(
            title='HTS plot',
            xaxis={'title': xaxis_name},
            yaxis={'title': yaxis_name},

            margin={'l': 50, 'b': 80, 't': 50, 'r': 10},
            hovermode='closest',
            clickmode='event+select' # double click to discharge
        )

            }

app.run_server(debug=True)

```

---

<div class="post-metadata">

**Author:** ![goannae](https://avatars.discourse-cdn.com/v4/letter/g/bcef8e/32.png) [@goannae](https://community.plotly.com/u/goannae)\
**Post date:** [January 12, 2021, 6:44am UTC](https://community.plotly.com/t/dcc-slider-play-pause-animation-dash-app/32944/2 "2021-01-12T06:44:46Z")

</div>

Hi,

Did you received any answer or have a solution? I am facing a similar issue, and I would appreciated any help from you. Many thanks.