Jump to content
Search Community

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

Tom B. @ Wix test
Moderator Tag

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

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.
  • Create New...