Animate multiple plot

plotly.js
1

I may be qoting the question wrong or in a misleading way. Please correct if wrong.

So, I’m trying to nicely animate some traces and I came up with this function

            var traceIndex = 0
            function animateData(xData, yData, delay = 10, traceStyle = { mode: 'lines' }) {
                traceIndex++;
                let len = xData.length;
                var i = 0;

                function updatePlot() {
                    if (i > grid) return
                    i++
                    setTimeout(() => {
                        Plotly.restyle(root, {
                            x: [xData.slice(0, i)],
                            y: [yData.slice(0, i)]
                        }, traceIndex).then(updatePlot)
                    }, delay)
                }

                Plotly.addTraces(root, {
                    x: [],
                    y: [],
                    ...traceStyle
                }).then(updatePlot)
            }

This can animate a trace like this

animateData([1,2,3],[2,3,4])

But it gets messed up, and plots them simultaneously , when I’m trying to animate mulitple plots like this

animateData([1,2,3],[2,3,4])
animateData([1,2,3],[3,4,5])
animateData([1,2,3],[5,6,7])

How do I implement the function, so that it animate the traces one by one.
Also, if there’s and plotly itself way to do what I’m trying to achieve, then that’s much welcome.