[skewY issue with scaling]

Awesome! Thanks so much for your help!

[skewY issue with scaling]

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".

 

 

[skewY issue with scaling]

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!

[skewY issue with scaling]

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.

[skewY issue with scaling]

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

[tweenmax.to becomes super slow when tweening 2 gifs(video attached)]

Thanks a lot! I will try to optimize the gif and see if that would solve the issue.

 

The weird thing is that tweening large gifs with CSS3 is very smooth...

[tweenmax.to becomes super slow when tweening 2 gifs(video attached)]

I'm trying to TweenMax.to(JS version) a div which contains 2 gifs（640x1008）. It is doing fine on pc. But it becomes super slow on iphone 4s. (fine on iphone 6 though).  The strange thing is that: the animation is fine if there's only 1 gif in the div.

I've made a testing page: (Tap the gif will remove it. animation with 1 gif is smooth, but 2 gif is problematic.)

http://115.29.33.229/gifTween.html

 

I've also made a short vid clip: http://115.29.33.229/IMG_2743.mp4