Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Heffalump

having trouble attaching animated item to correct div

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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);

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×