jwave Posted March 9, 2020 Share Posted March 9, 2020 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? Link to comment Share on other sites More sharing options...
Carl Posted March 9, 2020 Share Posted March 9, 2020 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 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 6 Link to comment Share on other sites More sharing options...
jwave Posted March 9, 2020 Author Share Posted March 9, 2020 Thanks, really helpful! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now