Rotate causing slight shift on x axis?

[Polarathene 0 Likes (Newbie)]

Hi, have started getting familiar with JS from AS3, want to work with GSAP of course

 

I'm animating svgtags instead of divs, I'm not sure what is the cause of the issue, I'm doing a basic tween to rotate 360 degrees with repeat at -1. It starts off ok being centered where I want it and also ends at the same location, during the spin though it shifts to the side a bit for some reason. Any ideas?

 

I'll try get a codepen up after I've slept. Not sure if I'll be able to load the specific graphic via codepen or not.

[Polarathene 0 Likes (Newbie)]

Just woken up, and with a fresh mind it occurs to me the pivot was probably at the center of the graphic but the graphic might not have been aligned correctly to have it's pivot at center(basically a bunch of circles). Could be the way I exported the SVG(pulling out separate elements for different animations), or that the SVG js lib I'm using is trimming/cropping the SVG layer instead of being the dimensions expected, thus not positioned correctly in the div. I'll look into this debugging with a css circle as a replacement first to verify if I'm right.

 

That's what I get for coding all night to the morning!