SVG Transform Origin Issue

[pnda007]

Hello, 

 

I'm having an issue with transformOrigin and svg groups. It's not really a GSAP issue, everything is working as it should be. It's more that I cant work out how to get the correct transform origin psoition.

 

Essentially i have a bunch of concentric circles, with little dots on them. Each set is in it's own group. I'd like to rotate it so TransformOrigin: '50% 50%' might seem the logical choice. However the issue is that since I'm rotating the group and the group isn't the same size as the 'main circle' (which is also the 'rotate path') the transform is off (great if you liked spirograph as a kid, not so great for me). 

 

The problem is occurring because some of the edges of the little dots that sit on the larger stroked circles are not flush with the main circle, so the group tag naturally wraps around the outtermost elements. In the one circle group I've animated successfully, I've simply been able to set the radius of the inner circle as the Transform Origin but this only works because the top and left bounding of the group matches that of the main circle, where a dot pushes the group out at the top and left, this doesn't work.

 

The pen will help you to understand this a little better, especially if you inspect the svg and see how the group box is larger (often on all sides) than the circle that makes up the animation path. 

 

What I was wondering is if anyone knows of a way to calculate the correct transform origin position, or if there is a simpler solution/ best practice I should be following.

 

In the pen, the first circle in each SVG group is the 'main circle' (the stroked circle that makes up the animation path), the other circles are the little dots. Yes, I know that is a massive svg with billions of elements, and I apologise for that.

 

 

Thanks in advance

See the Pen LGZYxa by peterallenio (@peterallenio) on CodePen

[Diaco]

Hi pnda007 

 

if i understood correclty your problem , pls use svgOrigin instead of transformOrigin , like this :

TweenMax.staggerTo('g',5,{cycle:{rotation:[360,-360]},svgOrigin:"90.1 151.9",ease:Linear.easeNone,repeat:-1});

pls check this out : 

See the Pen vLKgKq by MAW (@MAW) on CodePen

 

and pls check this blog post about Animating SVG with GSAP : http://greensock.com/svg-tips

[pnda007]

Amazing. You have changed my life. I didn't know about SVG Origin. I'm assuming that it is relative to the global SVG co-ordinate space as opposed to the element co-ordinate space?

 

That is perfect, thank you very much! Amazing support as usual!