Jump to content

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

Simple Rotation about Centre

Recommended Posts

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!



Link to comment
Share on other sites

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.



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)



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.

Link to comment
Share on other sites

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

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.