Plotly.js slider not moving with animation

Hi! I’ve made an animating treemap using svelte & plotly.js, it animates correctly with the play buttons and moving the slider. I’ve noticed that when I press play for the first time, the slider moves with the frames. However after if I move the slider to a random number and press play, it only shifts over one time then completely stops as the frames keep moving. If I move it to the very start (first frame), the slider does not move at all. Any thoughts would be great :)) Here’s the relevant code…

  for (let block = 0; block < block_range; block++){  //iterator func, to loop thru each block
    let block_root = []
    let tx_list = []
    let values_list = [];
    
    for (let tx_num = 1; tx_num < tx_list_len + 1; tx_num++){  // later change tx_list.length to how many txs in a block (faster if we have that info) 
    block_root.push("BLOCK " + String(block) + ', ' + String('time')) // time
    tx_list.push("Transaction " + String(tx_num)) 


    if (tx_num %2 == 0) { // testing weights
      values_list.push(3)
    } else {
      values_list.push(9)
    }

    }


    if (block %2==0){ // to visualise different 
      block_root.push("BLOCK " + String(block) + ', ' + String('time')) // time
      tx_list.push("Transaction 11")
      values_list.push(5)
    }


    frames[block] = {name: String(block),
      data: 
    [{type: "treemap",
    labels: tx_list,
    parents: block_root,
    textinfo: "label+value+percent parent+percent entry",
    values: values_list, // weight list
    marker: {colorscale: 'Greens'}
    }]
    }
}

for (let i = 0; i < frames.length; i++) { //  i = min block range
  sliderSteps.push({
      method: 'animate',
      label: String(i), // frame[i]?
      args: [[String(i)], { //[frames[i]
          mode: 'immediate',
          transition: {duration: 300},
          frame: {duration: 300, redraw: false},
      }]
  });
}

 var layout = {
      'title': "Animation of bitcoin blocks",
       width: 700,
       height: 500,             
      sliders: [{
        active: 0,
        steps: sliderSteps,
        x:0,
        y:0,
        len:0.9,
        xanchor: 'left',
        yanchor: 'top',
        pad: {'t': 50, 'b': 10},
        currentvalue: {
        visible: false,
        prefix: 'Block:',
        xanchor: 'right',
        font: {size: 20, color: '#666'}
      },
      transition: {
      duration: 300,
      easing: "cubic-in-out"
    }}],
 Plotly.newPlot('myDiv', [frame0], layout) //, {frame: {duration: duration, redraw: false}, frames: frames}
    .then(function() {
        Plotly.addFrames('myDiv', frames);
    })


Hi everyone problem solved thanks. Won’t let me delete unfortunately

2 Likes

Hi! Could you please say how you solved it? I’m struggling with the same issue now.

Hey! I inside frame:{duration: X} for both buttons i added’, redraw:false’ which did the trick! I am having an issue now where I press my pause button and get the error ‘WARN: API call to Plotly.animate rejected. undefined’ … The code does work though

2 Likes

Seems to be working now, thank you so much! FYI, I don’t have an API issue after fixing, but I’m on Python, not JS.