Simultaneous animations

📊 Plotly Python
1

I am having an issue with slider functionality for two side by side animations. The left animation is a time series plot of a price while the right animation is a corresponding coordinate pair for a mapping of volatility comparisons. I have over 1600 data points so I used list comprehension to code the frame and slider dicts. The plot initiates and animates as expected, showing the ever increasing time series on the left and the most recent coordinate pair on the right, except if I try to move the slider it essentially ignores my intervention and continues to animate as well as becoming unresponsive if I press the Pause button and try to restart. I am including my code as I assume this is probably to do with how I defined the slider and frame logic.

ele='Cc1'
fig = dict(
    layout = dict(
        xaxis1 = {'domain': [0,.44], 'anchor': 'y1', 'title': '1', 'range': [str(insLibRV[ele].index[0])[:10],str(insLibRV[ele].index[-1])[:10]]},
        yaxis1 = {'domain': [0,1], 'anchor': 'x1', 'title': 'y', 'range': [insLibRV[ele].CLOSE.min()-20, insLibRV[ele].CLOSE.max()+20]},
        xaxis2 = {'domain': [.56,1], 'anchor': 'y2', 'title': '2', 'range': [-1.5, 1.5]},
        yaxis2 = {'domain': [0,1], 'anchor': 'x2', 'title': 'y', 'range': [-50, 150]},
        title  = '',
        margin = {'t': 50, 'b': 50, 'l': 50, 'r': 50},
        updatemenus = [{'buttons': [{'args': [['0', '1', '2', '3'], {'frame': {'duration': 500.0, 'redraw': False}, 'fromcurrent': True, 'transition': {'duration': 0, 'easing': 'linear'}}], 'label': 'Play', 'method': 'animate'}, {'args': [[None], {'frame': {'duration': 0, 'redraw': False}, 'mode': 'immediate', 'transition': {'duration': 0}}], 'label': 'Pause', 'method': 'animate'}], 'direction': 'left', 'pad': {'r': 10, 't': 85}, 'showactive': True, 'type': 'buttons', 'x': 0.1, 'y': 0, 'xanchor': 'right', 'yanchor': 'top'}],
        sliders = [{'yanchor': 'top', 'xanchor': 'left', 'currentvalue': {'font': {'size': 16}, 'prefix': 'Frame: ', 'visible': True, 'xanchor': 'right'}, 'transition': {'duration': 500.0, 'easing': 'linear'}, 'pad': {'b': 10, 't': 50}, 'len': 0.9, 'x': 0.1, 'y': 0, 
                    'steps': [{'args': [[str(x)], {'frame': {'duration': 500.0, 'easing': 'linear', 'redraw': False}, 'transition': {'duration': 0, 'easing': 'linear'}}], 'label': str(x), 'method': 'animate'} for x in range(300,1922) 
                    
                    ]}]
    ),
    
    data = [
        {'type': 'scatter', 'name': 'f1', 'x': insLibRV[ele].index, 'y': insLibRV[ele].CLOSE, 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(255,79,38,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(255,79,38,0.600000)', 'legendgroup': 'f1', 'showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'},
        {'type': 'scatter', 'name': 'f2', 'x':insLibRV[ele]['RVOL_MEAN_Z'], 'y': insLibRV[ele]['IVOL/RVOL'], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(79,102,165,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(79,102,165,0.600000)', 'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'},
    ],
    
    frames = [
        {'name' :  str(x) , 'layout' : {},
         'data': [
             {'type': 'scatter', 'name': 'f1', 'x': insLibRV[ele].index[:x], 'y': insLibRV[ele].CLOSE[:x], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(255,79,38,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(255,79,38,0.600000)', 'legendgroup': 'f1', 'showlegend': True, 'xaxis': 'x1', 'yaxis': 'y1'}, 
             {'type': 'scatter', 'name': 'f2', 'x': [insLibRV[ele]['RVOL_MEAN_Z'][x]], 'y': [insLibRV[ele]['IVOL/RVOL'][x]], 'hoverinfo': 'name+text', 'marker': {'opacity': 1.0, 'symbol': 'circle', 'line': {'width': 0, 'color': 'rgba(50,50,50,0.8)'}}, 'line': {'color': 'rgba(79,102,165,1.000000)'}, 'mode': 'markers+lines', 'fillcolor': 'rgba(79,102,165,0.600000)', 'legendgroup': 'f2', 'showlegend': True, 'xaxis': 'x2', 'yaxis': 'y2'}],
        }
    for x in range(300,1922)]
)
plyo.plot(fig)