Move Element to Center of Another Element

[kalaschnik 4 Likes (Newbie)]

Hey all,

 

is there any dynamic way (instead of defining: `x/y: <coords>` to move an object to the center of another object?

 

Let’s say my `anchor` is not always fixed at the same spot. And my `ball` needs to dynamically read out the current target coords from the anchor. What is the best way to achieve that?

 

Thank you!

See the Pen zYJRvXP by Kalaschnik (@Kalaschnik) on CodePen

[kalaschnik 4 Likes (Newbie)]

I solved it using bbox,cx,cy.

 

See the Pen NWLyGLP by Kalaschnik (@Kalaschnik) on CodePen

 

I am just wondering if that is the way GSAP people would solve this? Or is there any gsap-built-in magic?

[Rodrigo 5,407 Likes (Superhero)]

Hi

 

In SVG certainly that's the way to achieve that.

 

For regular DOM elements you could use getBoundingClientRect:

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

 

Also you can use other methods if your element is not in the viewport. So as you can see there are a few different avenues that can be explored to solve this.

 

Happy Tweening!

[kalaschnik 4 Likes (Newbie)]

Is it correct when I assume in my mental modal; SVG = getBBox and non-SVG: etBoundingClientRect to get the correct coordinates? I am still a bit confused by the two.

[GreenSock 18,577 Likes (Superhero)]

Pretty much, but just keep in mind that the getBBox() thing reports coordinates within the parent <svg>'s coordinate system which is usually very different than the overall web page's coordinate system. If I remember correctly, getBoundingClientRect() can be used on most SVG elements too if you want to get coordinates according to the viewport. 

[PointC 14,425 Likes (Superhero)]

Another little trick is to create everything at 0,0 and then start moving things. That way you know exactly where everything is located. Not always feasible, but works in some cases. YMMV