Jump to content
GreenSock

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

DirectionalRotationPlugin

Sign in to follow this  

| GreenSock
27654

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

When is the last time you worked on something you love? Go animate something cool and then share it with us.

- Team GreenSock
Sign in to follow this  


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

×