Jump to content
GreenSock

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

scaling from different origins

Recommended Posts

Hi

I have an object I need to scale, and depending on different conditions I need it to scale from top left, top right, bottom left or bottom right.

I have been trying things like

 

			gsap.to(page1, 1, {
				scaleX: 2,
				transformOrigin: "right bottom"
			});

 

I took this directly from a Codepen example, where it was working fine, just changing the object name, but it has no effect, my object always scales from the original top left.

 

The object is within a canvas, and it's all set up in Adobe Animate. Could that have something to do with it not working? If so, is there a different way I could do it?

Share this post


Link to post
Share on other sites

Hi, Adobe Animate outputs to canvas. transformOrigin is for a css property for DOM elements. 

When using Adobe Animate it's important to understand that you can only animate numeric properties of EaselJS Display Objects: https://www.createjs.com/docs/easeljs/classes/DisplayObject.html or values supported by GreenSock's Easel Plugin.

 

In that list you will see regX and regY properties that you can set which is similar to transformOrigin. The regX and regY values are pretty much where the pivot point would be on your Movie Clip.

 

One annoying thing is that if you change the regX or regY it also changes the position of the object.

In the demo below I have to offset the position after changing the regX and regY

 

regX.gif.f158e1ef5a11df0074501bc9841b3462.gif

 

The code below shows how I changed the pivot (or transformation) point.

 

gsap.to(this.default_mc, {duration:3, scale:2, repeat:10, yoyo:true});

this.top_left_mc.regX = 0
this.top_left_mc.regY = 0;
this.top_left_mc.x -= 25
this.top_left_mc.y -= 25;

gsap.to(this.top_left_mc, {duration:3, scale:2, repeat:10, yoyo:true});

I've attached the fla to this post, but it is also available in my Adobe Animate for HTML5 "not a course"  which is a bunch of source files I created to help people struggling with Animate (as I have).

change-transformation-point.fla.zip

  • Like 6

Share this post


Link to post
Share on other sites

Thanks, really helpful!

  • Like 1

Share this post


Link to post
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.

×