having trouble attaching animated item to correct div

[Heffalump]

Sorry.  I realize this more of a jquery issue, but it's something that has been a stumbling block for me multiple times now in implementing some of the animation snippets I've come across.  Basically, I just need to figure out how to  append to the correct item via jquery so that the animation fits where it is supposed to.

 

In the codepen example, the dots from the explosion should be within flexContainerChild and thus be hidden as they exit.  Ultimately, I want the size of the dots to be responsive which means I need to be able to define them in percentage terms based upon the parent container (flexContainerChild in this case).

 

Each dot is in a div called container which is not originally in the html, but generated via js.  Line 13 of the js in codepen says:

 

document.body.appendChild(container);

 

I'm assuming that's where the problem is, and that I need it to append to id "flexContainerChild" instead, but after a dozen or so failed attempts, I guess I'm either misunderstanding they syntax or have some other incorrect assumption.

 

Thx again.  Getting this one item straight should help me fix several other related issues in implementing the animations.

See the Pen PwOBNr by oompaLoompa (@oompaLoompa) on CodePen

[Carl]

This is how you can append the container div and get the overflow:hidden of flexContainerParent/Child to work

document.querySelectorAll(".flexContainerChild")[0].appendChild(container);

http://codepen.io/GreenSock/pen/ogoPNr

 

You were appending it to the body previously. 

 

You may want to move the container. currently it has top:50% left:50% and the particles are being placed at its 0,0 (top left corner);