Jump to content
Search Community

DirectionalRotationPlugin


| GreenSock
40965

Note: This plugin was removed from GSAP 3. However, you can register this unofficial plugin to get the effect back.

Tweens any rotation-related property to another value in a particular direction which can be either clockwise ("_cw" suffix), counter-clockwise ("_ccw" suffix), or in the shortest direction ("_short" suffix) in which case the plugin chooses the direction for you based on the shortest path. For example:

//obj.rotation starts at 45
var obj = {rotation:45}; 
 
// In GSAP 3 directionalRotation is built in):
//tweens to the 270 position in a clockwise direction
gsap.to(obj, {duration: 1, directionalRotation: {rotation: "270_cw"}}); 
 
//tweens to the 270 position in a counter-clockwise direction
gsap.to(obj, {duration: 1, directionalRotation: {rotation: "270_ccw"}});
 
//tweens to the 270 position in the shortest direction (which, in this case, is counter-clockwise)
gsap.to(obj, {duration: 1, directionalRotation: {rotation:"270_short"}});


// In GSAP 2 (directionRotation is an external plugin): 
//tweens to the 270 position in a clockwise direction 
TweenLite.to(obj, 1, {directionalRotation:"270_cw"}); 

//tweens to the 270 position in a counter-clockwise direction 
TweenLite.to(obj, 1, {directionalRotation:"270_ccw"}); 

//tweens to the 270 position in the shortest direction (which, in this case, is counter-clockwise) 
TweenLite.to(obj, 1, {directionalRotation:"270_short"});

We used rotation here but it could be anything, like newRot.x. Notice that the value is in quotes, thus a string with a particular suffix indicating the direction ("_cw", "_ccw", or "_short"). You can also use the "+=" or "-=" prefix to indicate relative values. 

Get an all-access pass to premium plugins, offers, and more!

Join the Club

With great power comes great responsibility. Tween wisely.

- Team GreenSock



User Feedback

Recommended Comments

There are no comments to display.



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

×
×
  • Create New...