transformAroundCenter

[Jan]

Hi,

 

i just was woundering if there is something around like the TransformAroundCenterPlugin for the JS version of GSAP. This time i just need a scale transformation. Can someone give me a hint?

 

Jan

[Jonathan]

Hello Jan and welcome to the GreenSock forums!

 

Here is simple example of animating an element around a center point:

See the Pen imEzI by jonathan (@jonathan) on CodePen

 

It is using the transform-origin (transformOrigin) CSS property to position the origin point. No special plugin needed, just using GSAP to animate CSS properties with the CSSPlugin.

 

Default value of CSS transform-origin is: 50% 50% 0 (x y z)

var $circle = document.getElementById("circle"),
TweenMax.to($circle, 4, {
            transformOrigin: "50% 50% 0", // try changing value
            rotation: 360,
            force3D: true           
});

Does that help?

[Carl]

Yup like Jonathan, noted the transformOrigin property lets you set any transformation point.

In the HTML / CSS world, objects transform around center by default so there really isn't the need of a plugin.

Another similar discussion here: http://greensock.com/forums/topic/10200-animate-around-a-point/

[adventmedia]

unfortunately doesn't work within a <canvas>, i.e. when using easeljs.

[Carl]

unfortunately doesn't work within a <canvas>, i.e. when using easeljs.

 

 

Sorry, its not supposed to. transform-origin is a CSS property (modified by GSAP's CSSPlugin) that has no effect on canvas elements.

 

I'm pretty sure you an change the Easel regX and regY properties  though: http://www.createjs.com/Docs/EaselJS/classes/MovieClip.html#property_regX

[adventmedia]

yes, you can set the regX/regY properties; but I'm in a situation where I need to apply different scaling tweens to the same object which means changing the registration and resetting the location (so that it doesn't move) to do a second scaling tween… would be a lot simpler with TransformAroundCenter or better yet TransformAroundPoint functions