skewY issue with scaling

[jimmy j]

Hello,

 

I'm trying to animate the skewY value with: 

TweenMax.to(d1,1,{skewY:45,skewType:"simple",transformOrigin:"0% 0%"})

 

But the object would get stretched.(scaleY also changed unexpectedly)

 

The reason why I set skewType to "simple" is that I would also like to animate the scale value of the object. The default skew type "compensated" will reset object's scale value when animating skewY... 

See the Pen NrrBaK?editors=0010 by lzy100p (@lzy100p) on CodePen

[Jonathan]

Hello jimmy j, and Welcome to the GreenSock Forum!

 

Can you please clarify your issue, i am a little confused on what your question is?

 

Thanks!

[jimmy j]

Hello Jonathan,

 

I'm sorry that I didn't make my question clear.

 

I would like to tween the "skewY" value along with "scaleX". But I couldn't figure out a way to tween both of these simultaneously.

As you could see from the URL that I posted, the object got stretched when I tween the "skewY" value.

 

Thanks again for your help.

[Jonathan]

You can use the GSAP position parameter to play different tweens at the same time.

 

http://greensock.com/position-parameter

.to( target, duration, vars, position )

x
Giving them both the same label or the same position parameter like 0.

 

 

Also i noticed your using both the skewX property and also transform property. If it was me i would just use skewX: 45 instead of transform as a string with transform: "skewX(45deg)"

 

[jimmy j]

Thanks for pointing out the way how to tween different properties at the same time. 

I have no problem to tween other properties at all. I only have issues with "skewY". 

 

With this line of code: 

TweenMax.to(d1,1,{skewY:45,skewType:"simple",transformOrigin:"0% 0%"})

Not only the object's skewY property got tweened, but also the "scaleY" has changed unexpectedly. I don't know why it behaves in this way...

 

 

Another question that I have is shown below:

TweenMax.to(d2, 0, {
  scaleX:2,scaleY:2,rotation:30
}) 


TweenMax.to(d2, 1, {
  transform: "skewY(45deg)",
  transformOrigin: "0% 0%"
}) 

I first scaled and rotated the object, but when I tween the "skewY", the object's scale and rotation values has been automatically set back to 0...

Thanks!

[Jonathan]

When you say the object's scale and rotation values has been automatically set back to 0...

 

Do you mean for the second tween that you are using transform: "skewY(45deg)" on ?

 

If so try using the skewY property in your first tween,  instead of transform: "skewY(45deg)" in your second tween.

 

By using transform: "skewY(45deg)" on that element you are overriding scale since you are using the transform property with only skewY() and no scale(), instead of using the skewY property in your first tween.

 

[jimmy j]

Hello Jonathan,

Thanks so much for your answer!

 

Here I have another question about tweening the skew value.

I have modified the codePen demo a bit. 

The third red square animation is what I want to achieve, but I would like to achieve it by tweening "skewY" property instead of using "transform".

 

 

[GreenSock]

I do see what you mean and I believe this is resolved in the next release which you can preview (uncompressed TweenMax) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

Just plug that into your codepen, replacing the 1.18.5 TweenMax and it should deliver what you want. Look good? 

[jimmy j]

Awesome! Thanks so much for your help!