TweenMax transformOrigin

[phukhoi]

Hi all, I use TweenMax to try a animation bouncing down a image.

The problem is when I using transformOrigin attribute ( transformOrigin:"bottom" ), the image do not scale rightly.

I want the image scale from top to bottom.

Can you tell me the solution for this problem? 

Sorry for my English.

//here is svg circle. It's work normally
var duration = 3;
var tl = new TimelineLite({delay:0.2});
CustomBounce.create("myBounce", {strength:0.01, squash:2});
tl.to("#ball", 2, {y:200, ease:"myBounce"})
  .to("#ball", 2, {scaleY:0.7, scaleX:1.1, ease:"myBounce-squash", transformOrigin:"bottom"}, 0)

// Problem here, when I replace circle by an image. the transformOrigin bottom no working
var tl2 = new TimelineLite({delay:0.2});
CustomBounce.create("myBounce2", {strength:0.01, squash:2});
tl2.to("#burger", 2, {y:200, ease:"myBounce2"})
  .to("#burger", 2, {scaleY:0.7, scaleX:1.1, ease:"myBounce2-squash", transformOrigin:"bottom"}, 0) 

See the Pen NpJLba by anon (@anon) on CodePen

[mikel]

Hi phukhoi,

 

welcome to GREENSOCK.

 

If you want to compress the burger to the bottom use transformOrigin:"50% bottom": 

See the Pen BWbOXr?editors=1010 by mikeK (@mikeK) on CodePen

 

See also: 

See the Pen ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Happy tweening ...

 

Manfred

[phukhoi]

Thanks you very much @mikel . It works perfectly