Jump to content

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

How to make this transform using matrix

Go to solution Solved by PointC,

Recommended Posts

I am having this problem while trying to make a very simple transform. 


On the code, I simply have:

.to('#left-gate', {
            transformOrigin: 'center left',
            transform: 'rotateY(180deg)',
On the browser, when I inspect, I have:
My transform is being altered to use the matrix format. How can I either force gsap to use the rotateY transform or to make the matrix transformation without the weird middle behaviour?


Link to comment
Share on other sites

Let me guess: the element you're trying to animate is SVG, right? The SVG spec doesn't allow 3D transforms, so you can't do a rotateY(). You can certainly do a scaleX, though, or even skewY - a combination of those can achieve a somewhat similar effect. If you still need help, please provide a minimal demo and we'd be happy to take a peek. 

  • Like 1
Link to comment
Share on other sites

Hi Jack,

Thanks for the fast response. 

I tried achieving a combination of scaleX and skewY but in the final result, gsap still transforms it into a matrix and gives me the same unexpected behavior between the start and end points. Is there any way I can fix this? 

Link to comment
Share on other sites

Hey @recruitforme. We'd love to help, but it's super difficult trying to troubleshoot blind. It's entirely normal for a matrix to be set on anything SVG - that's because it works around various browser bugs and quirks. 


What do you mean by "unexpected behavior between start and end points"? A minimal demo will go a LONG way toward getting you an accurate solution :)


Also, I'd strongly recommend not using "transform" - just use the alias shortcuts like scaleX, skewY, etc. It's much clearer, faster, and more accurate. 

  • Like 1
Link to comment
Share on other sites

Hi Jack,


I have created a code pen that shows the problem I am having with the SVG transformation and what I would like to achieve. 


See the Pen XWeJQGV by brennolima (@brennolima) on CodePen



Thanks in advace.

Link to comment
Share on other sites

16 hours ago, PointC said:

As @GreenSock mentioned, 3D transforms are not supported on SVG elements like that. You can use a scaleX tween to fake it.





Happy tweening.



Awesome. Thank you!

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