Animate an SVG path around viewbox center not 'self' center

[kabocreative]

Hi again!

 

I've hit a problem with rotating an SVG path.

In the codepen I have two paths. I'm rotating the path with the class 'i-should-be-moving'.

If you inspect it you'll see it is rotating, but around its own center, not the center of the viewbox as I'd expected when I set the transform origin:

 

t4.to("#icon-4 .i-should-be-moving", {
  duration: 2, rotate: 360, transformOrigin: "center center", repeat: -1
})

I stumbled across this thread which seems to acknowledge (if I've understood correctly) that GSAP rotates around 'self coordinates' while CSS rotates around 'viewbox coordinates': 

 

 

I couldn't see in that thread if there's an override however.

 

How best can I make path 'i-should-be-moving' rotate around viewbox 'center center'?

 

Thanks!

 

See the Pen RwyxEBw by kabocreative (@kabocreative) on CodePen

[Carl]

hi Penni,

 

you can use the svgOrigin

See the Pen dyeJrVJ by snorkltv (@snorkltv) on CodePen

 

I don't think your dashed circle is perfectly centered which is why using the center of the svg doesn't look exactly right.

 

 learn more about svgOrigin

 

or you can modify the transformOrigin so that it lines up with the center of the dashed path kind of like...

 

See the Pen gOzoEGB?editors=1010 by snorkltv (@snorkltv) on CodePen

[kabocreative]

Thanks so much Carl!

That article is amazing and now bookmarked.

SVG Origin is what I wanted but failed to find, thank you. Yep my quickly put together SVG is not centered in the viewbox. Fixed and working here: 

See the Pen rNvpZMY by kabocreative (@kabocreative) on CodePen

Thanks for showing how to work with awkward alternatives though in the second example, also super useful!