Animate multiple plot

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' }) {
                let len = xData.length;
                var i = 0;

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

                Plotly.addTraces(root, {
                    x: [],
                    y: [],

This can animate a trace like this


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


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.