Differences in CSS and GSAP tranforms

[Praney Behl]

Hi guys,

 

Just trying to achieve the CSS animation transforms with GSAP. I am getting different results while using same properties. How can I achieve results like in CSS animation? I am doing something wrong?

 

Here is the code: 

See the Pen Gbmhs by praneybehl (@praneybehl) on CodePen

 

Thank you for the help.

 

Praney

 

[GreenSock]

That's just an order-of-operation thing which is explained here:

http://forums.greensock.com/topic/9054-bug-report-nested-3d-transform-and-the-webkit-matrix/#entry36309

 

Not a bug - it's actually a pretty important feature of GSAP (as explained in the other thread). 

[Praney Behl]

Thanks Jack,

 

I do understand that it's a feature. I guess I'll just have to get a hang of it.

 

I figured that I had to add the negative z-index (-200) set in the transformOrigin properties to get similar results.

 

Praney

 

edit: Moved other question to new thread.