Jump to content
GreenSock

Tom B. @ Wix

Bug Report: with rotate(180deg) TweenMax sometimes does the wrong matrix conversion

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

I've come across a bug when applying a transformation on an already rotated element with 3d rendering enabled:

 

You can see the codepen for the live preview

 

I have an element with 180deg rotation and Z transform:

<div id="aa" style="transform:rotate(180deg) translateZ(10px)">I'm rotated 180 Deg</div>
// On Webkit/Gecko this happens only with z > 0, On IE it happens also with z == 0

And then I run some transform animation on it

TweenMax.from('#aa', 2, {x:'+=100'})

The result is that the rotated div flips back to 0 degrees, or, from matrix(-1,0,0,-1,0,0) it transforms to matrix(1,0,0,1,0,0)

This does not happen on other rotation angles.

See the Pen dPomav by tombigel (@tombigel) on CodePen

Link to comment
Share on other sites

Sorry about that, Tom - yes, that does appear to be an issue in the way CSSPlugin interprets 3D matrices in very specific scenarios. I believe it is fixed in the attached preview of 1.14.3 - would you mind letting me know if it works well for you? 

 

EDIT: file was updated on 11/27

GSAP_1.14.3_preview6.zip

Link to comment
Share on other sites

I have tested 1.14.5_preview5 version for the above scenario.

 

the issue exists..  

On Webkit/Gecko when translateZ value = 0 (reproducible on previous version when Z > 0)

On IE 11 it seems ok.

 

See the Pen XJbyxr by yanivz (@yanivz) on CodePen

 

 

Yaniv

Link to comment
Share on other sites

Great catch - sorry about that. I updated the file above with a fix. It should work well now - I tested both 3D and 2D versions in your demo. 

Link to comment
Share on other sites

another case that make a wired mirror flip (happens on production version)

IE 11 , an element with transform rotate of 91 degrees and applying animation to 90 degrees rotation.

 

See the Pen qEObbR by yanivz (@yanivz) on CodePen

Link to comment
Share on other sites

Just to be clear, you're saying that was broken in the old version, but not the 1.14.3 preview I posted last, right? So it's fixed now? I cannot seem to break it in the way you're describing. 

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