setTimeout repeats my animation

Question

How can I make the animation only happens once for every added div element?
https://code.sololearn.com/WnzTsid60Ly9/?ref=app

Answer 1

I suspect that the issue originates from how the DOM is re-rendered each time an element is added, causing the animation to restart
Using appendChild of a newly created div instead of concatanating as a string seems to do the trick
https://code.sololearn.com/WSa4148CYDf9/?ref=app

Answer 2

Burey Interesting; wrapping it. It also appears to work okay setting all the properties of the div:
https://code.sololearn.com/W4QETsbY5Y79/?ref=app

Answer 3

Kirk Schafer nice
Was wondering if that would work as well

Answer 4

KrOW Burey I think you're both on the right track.
I think once the text is rendered, Javascript has the object model ready and can automatically handle additional objects and their interactions -- but change the object-generating *text* and JS must run the entire "text file" again to learn what you changed and how it becomes the object model.
I hadn't thought this all the way through before, but there was a 3D Sphere code here that I optimized by converting the 100's of text injections to 100's of objects instead. IIRC, it really helped its load time and this feels like why.

Answer 5

Kirk Schafer another mystery unlocked 😮
Nice explanation

Answer 6

Thank you very much, guys :)

Answer 7

I think that its normal because set the innerHTML to another value its same like remove all childs and append new ones BUT at this point, all animation will restarts