Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Set transformOrigin not working as expected

Recommended Posts

I am setting  transformOrigin to 


'50% 100% 0px'



But insted it set's it to 


    transform-origin: 0px 0px 0px;


Which means my rotateY transition is broken. Not sure why this happens?


See the Pen xmZBam by dubdub (@dubdub) on CodePen


See the Pen xmZBam by dubdub (@dubdub) on CodePen

Link to comment
Share on other sites

The SVG spec doesn't support 3D transforms - that's why rotateY doesn't work for you. And as I said in your other thread, GSAP uses the transform attribute rather than CSS transforms in order to deliver cross-browser consistency (work around various bugs and inconsistencies). 


You'll notice that the percent-based transform-origin values DO work as expected even though if you look at DevTools they're technically set to 0px. That's on purpose actually. We did a bunch of work to normalize things across browsers by adjusting all the other values in the matrix() accordingly. So it looks/works exactly the same, but the transform-origin's components are zero for SVG elements in order to make things work great across all browsers. Here's a fork showing that they work as expected:



See the Pen 2b666a241bf5a45668a9c8b726ecbb4a by GreenSock (@GreenSock) on CodePen


See https://css-tricks.com/svg-animation-on-css-transforms/


Does that clear things up? 

  • Like 3
Link to comment
Share on other sites

@GreenSock thank you, now it's perfectly clear! SVG nuances are so confusing, really appreciate your support!

  • Like 2
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.