[How to make this transform using matrix]

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!

[How to make this transform using matrix]

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.

[How to make this transform using matrix]

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? 

[How to make this transform using matrix]

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?