Jump to content
GreenSock

kabocreative

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

Go to solution Solved by Carl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×