✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Animate a line from left to right

Ok, I’m struggling with the animation.

I have a line,

I’m trying to get the line to appear from right to left as an animation. axes fixed from 0-10.

  myDiv = document.getElementById('myDiv')
  let xaxis_template = {fixedrange: true, automargin: true,  range: [0, 10], zeroline: false};
  let yaxis_template = { fixedrange: true, automargin: true, range: [0, 10], zeroline: false};

 let x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 let y = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  let trace1 = {
    x: x,
    y: y,
    type: 'line',
  };

  let data = [trace1];

  Plotly.newPlot(myDiv, data);

Any help or suggestions for how to animate it would be great!
Thanks
Shae

I’ve tried the below - it doesn’t work but let it not be said that I didn’t try!

        for (i = 0; i < x.length; i++) {
            trace1.x = x.slice(-i)
            trace1.y = y.slice(-i)
            setTimeout(function(){ Plotly.animate('myDiv', {
                data: trace1,
            }, {
                transition: {
                    duration: 100,
                    easing: 'cubic-in-out'
                },
                frame: {
                    duration: 100
                }
            })}, 100);
            
        }```