SkewX SkewY work not as expected

[urtopal]

Hello

 

in my codepen i would expect that the animation goes back to normal like in first declaration. But this does not happen. Can anyone explain to me why.

 

Is there a way für Absolute Skew?

See the Pen yOBBBO by jonathan (@jonathan) on CodePen.

[PointC]

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. 

[Jonathan]

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();

myTimeline
.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 ???
TweenMax.delayedCall(2,function(){
  myTimeline.reverse();
})

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/

 

[Carl]

Thanks for jumping in Craig and Jonathan.

 

Urtopal,

 

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)"})

http://codepen.io/GreenSock/pen/XXveaZ?editors=0010

 

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

[GreenSock]

I'll look into this and get back to you. Skewing on the y axis is indeed tricky because of how it contaminates rotation values in the matrix. I'll figure something out...stand by.

[OSUblake]

Don't know if this will help you, but the way PIXI handles skewing is to just do a full transform set whenever there is a skew value. Because skew is not that common, they're not too concerned about optimizing it.

[GreenSock]

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. 

[PointC]

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.

[OSUblake]

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.

[GreenSock]

@PointC, what is this "sleep" thing you speak of?

[Jonathan]

From my tests that looks like its fixed Jack.. much appreciated!

 

Working skewX and skewY with your update of latest beta of TweenMax:

 

See the Pen yOBBBO by jonathan (@jonathan) on CodePen.

 

[eric_jacobsson]

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.

 

Thanks,

 

Eric

[Carl]

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.

 

http://stackoverflow.com/questions/5072271/get-angle-from-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});

https://jsfiddle.net/LL5dx4yo/

 

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.

[Jonathan]

Great explanation and alternative solution Carl

[GreenSock]

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. 

[eric_jacobsson]

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