# Animation bar not displaying first element

**URL:** <https://community.plotly.com/t/animation-bar-not-displaying-first-element/72105>\
**Category:** plotly.js\
**Tags:** question\
**Created:** [January 30, 2023, 5:14pm UTC](https://community.plotly.com/t/animation-bar-not-displaying-first-element/72105 "2023-01-30T17:14:48Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![TB1](https://avatars.discourse-cdn.com/v4/letter/t/ad7895/32.png) [@TB1](https://community.plotly.com/u/TB1)\
**Post date:** [January 30, 2023, 5:14pm UTC](https://community.plotly.com/t/animation-bar-not-displaying-first-element/72105/1 "2023-01-30T17:14:48Z")

</div>

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:

```javascript
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?

---

<div class="post-metadata">

**Author:** ![TB1](https://avatars.discourse-cdn.com/v4/letter/t/ad7895/32.png) [@TB1](https://community.plotly.com/u/TB1)\
**Post date:** [February 1, 2023, 3:10pm UTC](https://community.plotly.com/t/animation-bar-not-displaying-first-element/72105/2 "2023-02-01T15:10:45Z")

</div>

I’ve recreated my error using [CodePen](https://codepen.io/TomBlackwood/pen/GRBwWeg).  
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?