Jump to content
Search Community

Animation with emitter but out of position

chattago2002 test
Moderator Tag

Recommended Posts

I'm trying to make an animation with "L" movement (and another as flipped "L").

Animation is ok but it should follow the emitter (in my code identified by the red and green squares) instead currently animation is at the right edge.

In "createDot" function I changed the basic (from taken example)




What is going wrong? Where are my mistakes?

See the Pen wvQZWNm by chattago2002 (@chattago2002) on CodePen

Link to comment
Share on other sites


when something is out of place, it's often related to basic html/css structure.

If you use position: absolute, you need to define anchors to keep it in place.


Its final position is determined by the values of top, right, bottom, and left. 


So I added them to your .dot class in the css file and it looks fine to me.


See the Pen jOXWaPG?editors=1010 by alig01 (@alig01) on CodePen

For clarity, I reduced the size of dotQuantity (line:24 in js) because I didn't need it that high for my purpose. You can set it back to 1250.


Also, there are some guides on how to center elements using CSS.

And last but not least, your codepen uses an outdated syntax of gsap, so I can recommend you to have a look at the migration guide.


Hope this helps you to continue further and good luck with your project

  • Like 5
Link to comment
Share on other sites


Thanks for reply.



top:0; left:0

to .dot class helped me a bit but changing the my Codepen example, adding other DOM elements before, the problem persists.

I didn't found where to read something about the positioning "system" of Gsap.


If .contenitore has


and .dot has


why is .dot is not positioned relatively .contenitore element?

Link to comment
Share on other sites

Hey, this has nothing to do with gsap.


If you set your x and y position to 0, you will see that the dots are now positioned relative to .contenitore div in the upper left corner like you wanted.


This means that there is an error in the calculations of the movement. Since your element is already in the upper left corner, we can apply getBoundingClientRect() to the .contenitore div and get the center of the box using .width/2 and .height/2 and use the values as desired.


Your original error came from bounds.top which gives you the position of the element relative to the viewport. That means the more elements you put in front of .contenitore the bigger the value of bounds.top will be. That's why your dots moved so far down (additional info).

Additionally it is worth mentioning that you centered your dots and boxes differently. You should decide on one variant and then apply it to both. And since the animation of the boxes already works great, why not adopt it?


I hope this clears things up and gets you on the right track.

  • Like 3
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.
  • Create New...