Jump to content
Search Community

Animating skew (x+y) also adds rotation and scale (result differs from css)

semplicelabs test
Moderator Tag

Recommended Posts

Hi Team GreenSock! 

 

At the moment we have a problem when animating skew with GSAPv3. When we just try to animate skew (x+y) from 20deg to 0 it will end up being distorted and rotated instead of getting back to its initial state with skewx and skewy at 0. Ive already searched through the forums and found out about the "compensated" and "simple" skewTypes but that not really helped in my case. I also have to mention it only happens when we add skewY to the animation, skewX alone works fine.

 

Ive made a fiddle (i hope a fiddle link is also ok) with both the GSAP and the CSS animation so showcase the difference.

 

Would be great if someone has some hints on how we can get the result to look like the css animation.  :)

Please don't be mad if i missed something totally obvious. ;)

 

Thank you in advance!

 

Fiddle: http://jsfiddle.net/chickberger/uvof5jx6/13/

 

Best,

mike

Link to comment
Share on other sites

Hey semplicelabs and welcome to the GreenSock forums. Thanks for being a Club GreenSock member!

 

You're making one of the most common GSAP mistakes: not setting all your transforms with GSAP for elements that are animated by GSAP. 

 

Simply set the initial skew values with GSAP instead to fix this issue. This is because the browser doesn't report individual transform values, so GSAP can't know what sort of transform is applied in some circumstances like this.

  • Like 2
Link to comment
Share on other sites

That's happening because you're setting the default skews with CSS and then telling GSAP to animate it.

 

All you have to do is .set() your defaults using GSAP's method or, you can do a .from() tween.

 

Oh well, bin it. Zack responded while I was typing... Such is life. No brownies for me.

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