Jump to content
GreenSock

marianrick

Rotate SVG path around its center

Recommended Posts

Dear Greensock Community,

 

my task is simple and clear: I want to rotate a svg group <g id="rotationFrame>. I have written the following TweenMax to achieve this:

TweenMax.to("#rotationFrame", .5, {    
    rotation:rotationDeg,
    transformOrigin:"50% 50%"
});

This does work quite good using safari. But as soon as I switch to Chrome the code does some crazy stuff:

 

Demo: https://vid.me/9EJU

 

How can I solve this?

 

To me it seems like Greensock is creating some wired css code, like

transform-origin: 0px 0px 0px;
transform: matrix(-0.86602, 0.49999, -0.49999, -0.86602, 957.167, 575.015);

As soon as I change this manually to something more straight forward, it does work in chrome:

transform-origin: 50% 50%
transform: rotate(90deg);
Link to comment
Share on other sites

That's a transform matrix, which combines all transforms. Click the red pill...

http://meyerweb.com/eric/tools/matrix/

 

But I doubt that is the problem. I see you have CSS transitions. Try removing those. If you need more help, please make a demo.

  • 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.
×