Animated Chart not Working Properly

📊 Plotly Python
1

I am using plotly to create some animated charts. I am trying to learn about how the slider works.

Here is my code (simply paste into a blank HTML and open in browser):

<head>
    <!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  </head>
  <body>
    <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
  </body>

<script>

    var trace1 = {
        x: [1, 2, 3, 4],
        y: [10, 12, 1212, 1121],
        name: "trace1"
    }

    var data1 = {
        x: [10, 20, 30, 40],
        y: [100, 12, 1212, 12121],
    }

    var data2 = {
        x: [13, 32, 36, 47],
        y: [1, 112, 32, 60],
    }

    const data = [data1, data2]

    const traces = [trace1]

    var frames = [];
    for (i = 0; i < data.length; i++) {
        frames.push({
        name: "trace1",
        data: [data[i]]
        })
    }

  // Now create slider steps, one for each frame. The slider
  // executes a plotly.js API command (here, Plotly.animate).
  // In this example, we'll animate to one of the named frames
  // created in the above loop.
  var sliderSteps = [];
  for (i = 0; i < frames.length; i++) {
    sliderSteps.push({
      method: 'animate',
      label: i,
      args: [[frames[i].name], {
        mode: 'immediate',
        transition: {duration: 700},
        frame: {duration: 700, redraw: true},
      }]
    });
  }

  var layout = {
    xaxis: {
      title: 'Example Chart',
      range: [0, 85]
    },
    yaxis: {
      title: 'Y variable',
      type: 'log'
    },
    hovermode: 'closest',
    updatemenus: [{
      x: 0,
      y: 0,
      yanchor: 'top',
      xanchor: 'left',
      showactive: false,
      direction: 'left',
      type: 'buttons',
      pad: {t: 87, r: 10},
      buttons: [{
        method: 'animate',
        args: [null, {
          mode: 'immediate',
          fromcurrent: true,
          transition: {duration: 700},
          frame: {duration: 700, redraw: false}
        }],
        label: 'Play'
      }, {
        method: 'animate',
        args: [[null], {
          mode: 'immediate',
          transition: {duration: 0},
          frame: {duration: 0, redraw: false}
        }],
        label: 'Pause'
      }]
    }],
     // Finally, add the slider and use `pad` to position it
     // nicely next to the buttons.
    sliders: [{
      pad: {l: 130, t: 55},
      currentvalue: {
        visible: true,
        prefix: 'Time:',
        xanchor: 'right',
        font: {size: 20, color: '#666'}
      },
      steps: sliderSteps
    }]
  };

  // Create the plot:
  Plotly.newPlot('myDiv', {
    data: traces,
    layout: layout,
    frames: frames,
  });

</script>

Working example in codepen:

Codepen

Now the issue with this code is:

  1. It doesn’t render the data1 data
  2. Once I hit play, if I move the slider back nothing happens.

Can someone please explain how I can fix both these issues?