I have some code when attached to a wrapper div, creates inserts some divs inside the wrapper div and that runs an animation loop for a second, moving child divs around.

I have a list of divs, on each div I attach this code and move the child divs around.

So if I layout these list of divs on top of each other with no styling they all become visible inside viewport, and there is some lag while moving animation of the child divs.

But if I layout these list of divs in a display flex, and a vertical scrollbar appears, only one item is visible in the viewport, there is no lag, child divs move smoothly.

I was wondering since there is no lag with display flex, as I present, I don't need to worry about only attaching items as they become visible, like as if lazy loading images.

And maybe get to the bottom of this, why is there lag on the first scenario?