Animation bar not displaying first element

plotly.js
1

So I’m trying to set up some animations for an application I’m building. When the plot loads, it shows frame[0] but when I navigate to frame[1] and then back to frame [0] of the animation it doesn’t show frame[0] but frame[1].

Opening the browser javascript console and running document.getElementByID('plot').data returns the data of the current plot and initially it shows the data for frame[0] but after moving the slider it shows frame[1]'s data. The label shown on the slider is the original label.

The ‘simplified’ version of my code looks a little like:

function setupSliderSteps(data_key, playSpeed){
    return {
        method: 'animate',
        label: data_key,
        args: [[data_key], {
                type: 'date',
                mode: 'immediate',
                transition: {duration: playSpeed},
                frame: {duration: playSpeed, redraw: true},
            }
        ],
        type: 'date',
    }
}

function setupFrames(playSpeed:float){
    var i = 0;
    var frames = [];
    var sliderSteps = [];
    var data = []
    for (const [data_key, data_item] of Object.entries(plot_data)){
         
         data = data.concat({
             name: data_key,
             x: data_item.x, 
             y: data_item.y,
             z: data_item.z,
             mode: 'markers', type: 'scatter3d',
         })
            
         // Animation stuff
         frames.push({data: data, name: data_key});
         sliderSteps.push(setupSliderSteps(data_key, playSpeed));
         i += 1; 
        }  
    };
    return [frames, sliderSteps];
}

function makePlot(){
    var [frames, sliderSteps] = setupFrames(playSpeed);
    // Set up the layout for the chart
    var layout = {
        ...,
        sliders: [{
            pad: {l: 130, t: 55, b:10},
            currentvalue: {
                visible: true,
                prefix: 'Epoch: ',
                xanchor: 'right',
                font: {size: 20, color: '#666'}
            },
            steps: sliderSteps
        }], 
    };   
    Plotly.newPlot('plot', {data: frames[0].data, layout: layout, config: {responsive: true}, frames: frames})
    )
};

Is there something that might have gone wrong somewhere, might I have accidentally re-written frame[0] somehow (though I’m unsure how…)?

Edit:
Update on this problem:
I’ve been watching document.getElementById('plot')._transitionData._frames and somewhere between switching from frame 0 to frame 1 it writes over frame 0 with frame 1’s data…
Is there a setting in the code I might have accidentally activated for that to happen?

2

I’ve recreated my error using CodePen.
What also found interesting is you can jump from frame d to frame a and frame d seems to overwrite frame a’s data.

I tried entering two instances of frame a so that its data is in frame[0] and frame[1] but both instances get written over. I think there may be something of a memory write issue?