Jump to content
GreenSock

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

DirectionalRotationPlugin

Sign in to follow this  

| GreenSock
26285

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

We love seeing what you build with GSAP. Don't forget to let us know when you launch something cool.

- Team GreenSock
Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×