DirectionalRotationPlugin

[AS3/As2] 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 based on the shortest path. For example:

//obj.rotation starts at 45
var obj:Object = {rotation:45}; 
 
//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"});

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.

By default, directionalRotation assumes you're attempting to tween the "rotation" property of the target, but you can define any rotational property name (including MULTIPLE properties) by passing an object instead, like this:

//animate obj.rotationX and obj.rotationY:
TweenLite.to(obj, 1, {directionalRotation:{rotationX:"-140_cw", rotationY:"70_short"}, ease:Power2.easeIn});

If you want to define the values in radians instead of degrees, you can use the special useRadians:true flag, like this:

TweenLite.to(obj, 1, {directionalRotation:{rotation:"1.5_ccw", useRadians:true}, ease:Power2.easeInOut});

And if the value that you want to pass in is a numeric variable, you can easily append the appropriate suffix like this:

var myValue:Number = -270;
TweenLite.to(obj, 1, {directionalRotation: (myValue + "_short") });

Get GSAP

Version: 1.20.4 updated 2018-02-15

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        For an all-access pass to premium content

        Join Club GreenSock