Jump to content


Rotate SVG path around its center

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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, {    
    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

  • Solution

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



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 4
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.