<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
  <button onclick="javascript:startAnimation();">Animate!</button>
</body>
button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
Plotly.plot('graph', [{
  x: [0, 0],
  y: [-1, 1],
}], {
  xaxis: {range: [-Math.PI, Math.PI]},
  yaxis: {range: [-1.3, 1.3]}
}, {showSendToCloud:true}).then(function () {
  Plotly.addFrames('graph', [
    {
      data: [{x: [1, -1], y: [0, 0]}],
      name: 'frame1'
    }, {
      data: [{x: [0, 0], y: [-1, 1]}],
      name: 'frame2'
    }
  ]);
})

function startAnimation() {
  Plotly.animate('graph', ['frame1', 'frame2'], {
    frame: [
      {duration: 1500},
      {duration: 500},
    ],
    transition: [
      {duration: 800, easing: 'elastic-in'},
      {duration: 100, easing: 'cubic-in'},
    ],
    mode: 'afterall'
  })
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.