Rotate SVG path around its center

[marianrick]

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);

[OSUblake]

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.