Simple Rotation about Centre

[OliverHall 0 Likes (Newbie)]

Hi there,
 
I have a feeling this is a really stupid question simply because it feels like it should be so easy, yet I can't find a solution online that will work for me.
 
I have a Sprite that I want to tween the rotation using the "shortRotation" plugin.  Everything is generally ok, except that:
1) The rotation is occurring around the top left point of the Sprite rather than the centre.  I had read that the default transformation point is the centre, but then I saw a post that suggested this may have changed?
2) I've tried specifying the transformOrigin using two methods I found online - neither of which work.

 

This is my basic call:

[public var _secondHand:Sprite = new Sprite();]

TweenLite.to( _secondHand, 1, {shortRotation:{rotation: _secondsDeg } } );

 

I read that one could specify the origin as a parameter:

TweenLite.to( _secondHand, 1, {shortRotation:{ rotation: _secondsDeg }, transformOrigin:"50% 50%" });

This results in a runtime error as transformOrigin isn't a property of Sprite...  Should I not be using Sprite??

 

I also read that you can set a property value on an object using TweenLite.set( ... ).  I tried this too but it also fails at runtime.

 

I've also seen references to another plugin "transformAroundCenter" (and AroundPoint) but I don't have Club membership so I don't have these plugins.  Have these plugins replaced support for transformOrigin?

 

Please help!  I really like TweenLite so I'm hopeful I can get this to work!

Cheers,

Oliver

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

When you dynamically create a Sprite (or most Display Objects) its registration point is the top left corner (x:0, y:0) and this is the point that it will rotate around.

To easily change the point around which the Sprite rotates I recommend our TransformAroundPoint and TransformAroundCenter plugins (requires membership).

 

 

I think in your searches you found some info that is a bit out-dated and some that applies only to the JavaScript version of GSAP.

 

AS3

For instance the ShortRotation plugin has been replaced by the DirectionalRotationPlugin: http://greensock.com/asdocs/com/greensock/plugins/DirectionalRotationPlugin.htmlwhich allows you to specify shortest direction, clockwise or counter-clockwise. (no membership required)

 

JavaScript

It seems you found some info that applies to JavaScript and our CSSPlugin. transformOrigin is a css property which makes it very easy to spin DOM elements like <h1>, <div>, <p> etc around any point.

[OliverHall 0 Likes (Newbie)]

Thanks Carl - does the DirectonalRotationPlugin still require the TransformAroundPoint|Center plugin?