Jump to content
Search Community

TweenMax transformOrigin

phukhoi test
Moderator Tag

Go to solution Solved by mikel,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.
  • Create New...