How might one update HTML as an animated chart plays?

plotly.js
,
1

Is there a way to update HTML as plotly.js plays an animation?

I was reading this user’s post:

where they use an event listener to run an update, and I’ve found their method will update after the “play/pause” buttons are pressed on my animation however I would like to update as the animation is playing. I was thinking of some code like:

Plotly.newPlot('plot', {
    data: frames[0].data, 
    layout: layout, 
    config: {responsive: true},
    frames: frames,
});

document.getElementById('plot').on('plotly_animated', function () {
    // set event listener on 'scene' (the plotly chart area) when plotly animated has been set
    document.getElementById('scene').addEventListener('onchange', function (frame) {
       // print the data from current "frame" in console on frame iteration
       console.log(frame.data);   
    });
});

Or am I wrong and I should be making something like:

Plotly.animate('plot').then(frame => () {
    console.log(frame)
});

(Javascript is not my primary language so my coding there might be a little off.)

however I think I need some plotly.js protips in this matter…

Solution
I think I’ve found a solution to my problem in:

Plotly.newPlot('plot', {
    data: frames[0].data, 
    layout: layout, 
    config: {responsive: true},
    frames: frames,
}).then(d => 
    document.getElementById('plot').on('plotly_redraw', function () {
        console.log("Data: ", d.data[0].x)            
    })
)