Animation with emitter but out of position

[chattago2002]

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)

document.body.appendChild(dot);

to

document.getElementById('contenitore').appendChild(dot);

What is going wrong? Where are my mistakes?

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

[alig01]

Hey,

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.

Quote

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

[chattago2002]

Hi.

Thanks for reply.

 

Adding

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

position:relative;

and .dot has

position:absolute;

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

[alig01]

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.