# Animate multiple plot

**URL:** <https://community.plotly.com/t/animate-multiple-plot/59013>\
**Category:** plotly.js\
**Created:** [December 4, 2021, 8:56pm UTC](https://community.plotly.com/t/animate-multiple-plot/59013 "2021-12-04T20:56:13Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![koushikphy](https://avatars.discourse-cdn.com/v4/letter/k/f1d935/32.png) [@koushikphy](https://community.plotly.com/u/koushikphy)\
**Post date:** [December 4, 2021, 8:56pm UTC](https://community.plotly.com/t/animate-multiple-plot/59013/1 "2021-12-04T20:56:13Z")

</div>

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

```auto
            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

```auto
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

```auto
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.