Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

TweenMax transformOrigin

Recommended Posts

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

Link to comment
Share on other sites

Thanks you very much @mikel . It works perfectly

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.