How to dynamically create elements in animation?

[wong2]

Hi, all the examples in the document assumes there are already those elements on the page, but what if I need to dynamically create elements in animation?

For example, I need to create 5 svg circles and make them move, then create 6 more circles and move them in another direction, where should I put the creation logic?

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

The way I'll do it is to create a timeline, add the elements to the DOM and after add the GSAP instances to the timeline and finally when all the elements are added play the timeline.

 

Also you could make a function to create the animations and call that function after all the elements are added to the DOM.

 

This is a very simple example, but hopefully is enough to get you started:

 

See the Pen BzAYao by rhernando (@rhernando) on CodePen