Jump to content
Search Community

SkewX SkewY work not as expected

urtopal test
Moderator Tag

Go to solution Solved by Jonathan,

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

Hi urtopal :)


Hopefully Jack or Carl will come by with the 'why' part of this answer as I'm curious myself. 


I did notice the following:

// this works as expected
myTimeline.to(".element", 2, {skewY:50, skewX:50})
myTimeline.to(".element", 2, {skewY:"-=50", skewX:"-=50"});

// this does not
myTimeline.to(".element", 2, {skewY:50, skewX:50})
myTimeline.to(".element", 2, {skewY:0, skewX:0);

I'm not sure why.  :blink:

Link to comment
Share on other sites

Hello urtopal, and Welcome to the GreenSock forum!


Yeah Jack and Carl will have to look into this.


You can see in this example that skew returns to ZERO (0) when i add a 2 second GSAP delayedCall() ( GASP equivalent of setTimeout() ) with the GSAP reverse() method.


See the Pen yembzX by jonathan (@jonathan) on CodePen


So lets see what Carl and Jack have to say about this behavior regarding skewX and skewY.

var myTimeline = new TimelineMax();

.set(".element", {skewY:0, skewX:0})
.to(".element", 2, {skewY:50, skewX:50})
.to(".element", 2, {skewY:0, skewX:0});

// for some reason skewX and skewY only animate to 0 with the below ???

Also @urtopal you can use the GSAP set() method instead of a zero based tween since the set() method is basically a zero based tween.


So this:

myTimeline.to(".element", 0, {skewY:0, skewX:0}, 0);

Would become this:

myTimeline.set(".element", {skewY:0, skewX:0}, 0);

GSAP set() method Docs:


TimelineMax set() method: http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/set/


TweenMax set() method: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/



  • Like 2
Link to comment
Share on other sites

Thanks for jumping in Craig and Jonathan.




Welcome to the forums. Sorry you had to hit a snag. My guess is that the individual skew values are being "lost in the matrix" -- the css 2D or 3D matrix that is. 


As a short-term solution, your best bet is probably to use the full transform strings like


myTimeline.to(".element", 2, {transform:"skewX(50deg)  skewY(50deg)"})
  .to(".element", 2, {transform:"skewX(0deg)  skewY(0deg)"})



I hope to get a more formal and precise explanation or fix for you. Stay tuned, and sorry again about the hassle.

  • Like 2
Link to comment
Share on other sites

It was indeed an issue in CSSPlugin that would show up if you tweened skewY and then subsequently tweened skewY, skewX, or rotation (those are all intertwined in the matrix). It should be resolved in the 1.18.3 preview of TweenMax which you can see here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js (uncompressed). Does that work well for you? I apologize for the glitch. 

  • Like 3
Link to comment
Share on other sites

Jack - when do you sleep? Somebody reports a bug and you have it fixed and updated within hours. 


What a world this would be if all software companies responded to their users like you do. (I'm looking at you Adobe)


The cape is so appropriate. Fantastic stuff. :)

  • Like 4
Link to comment
Share on other sites

What a world this would be if all software companies responded to their users like you do. (I'm looking at you Adobe)


Ha! I've always wondered how they've managed to do so well, for so long. I'm still mad at them for replacing Fireworks with all that Edge nonsense, and for that, I do not plan on informing them that I am no longer a student and will continue receiving discounts as consolation.

  • Like 3
Link to comment
Share on other sites

  • 5 months later...

Hi guys,


I got kind of the same issue but when i combine two or more instances of TimelineMax. As soon a rotationZ and a skewY is appended the same time the first of these will be removed / invisible... It doesn't happen with any other properties than these so try change skewY to skewX and it works.


Check my example here: https://jsfiddle.net/eric_jacobsson/4u4xenej/1/


I'm using 1.19.0.





Link to comment
Share on other sites

Hi Eric,


Welcome to the GreenSock forums,


Thanks for providing the very clear demo.

When your object gets transformed, the values you supply for skew and rotation get translated into values that are acceptable for matrix3d transform. Skew and rotation values impact each other greatly and your object that is spinning and skewing only has one css transform value applied. a transform matrix actually doesn't include a rotation value. Rotation is sort of a result of other values in the matrix.




The good news is that things appear to work if you set skew and rotation values in the same tween like:


var rotation = new TimelineMax()
.to('#rect', 2, {rotationZ: 10, skewY: 10})
  .to('#rect', 2, {rotationZ: 90, skewY: 45})
  .to('#rect', 2, {rotationZ: -90, skewY: -45})
  .to('#rect', 2, {rotationZ: 0, skewY: 0});



However if you need separate timelines as in your demo, I believe the best solution would be to nest #rect in a another parent element. skew #rect in one timeline and rotate the parent element in another.

  • Like 3
Link to comment
Share on other sites

Yep, due to a performance optimization, we internally merge skewY into the rotation and skewX values but your use case showed a rare side effect of that strategy which only shows up when you use separate simultaneous tweens on the same element's rotation and skewY. I believe I've fixed that for the next release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js. Just plug that into your jsfiddle and you should see that it behaves as expected (right?) 


Thanks for pointing this out. Sorry about any confusion that caused. 

  • Like 2
Link to comment
Share on other sites

Thanks a lot Carl for the alternative solution! I could do that but it would add a lot of unnecessary complexity to my code. I'm using a timeline where i animate different elements properties as individual timelines, kind of like keyframes. Found that GreenSock gives me the perfect solution for this kind of nesting.


Thanks a lot Jack, it worked really well!! Impressive to have a fix in place that fast :) 

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