DirectionalRotationPlugin

Description

Note: If you’re just animating CSS-related properties then you should just use the CSSPlugin because it has DirectionalRotationPlugin’s capabilities baked-in. Check out an interactive example here.

Tweens rotation for a generic object 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};
//tweens to the 270 position in a clockwise direction
gsap.to(element, {duration: 2, rotation: "270_cw"});
//tweens to the 270 position in a counter-clockwise direction
gsap.to(element, {duration: 2, rotation: "270_ccw"});
//tweens to the 270 position in the shortest direction (which, in this case, is counter-clockwise)
gsap.to(element, {duration: 2, rotation: "270_ccw"});

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. Directional rotation suffixes are supported in all rotational properties (rotation, rotationX, and rotationY); you don’t need to use directionalRotation as the property name.

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:
gsap.to(obj, {duration: 1, directionalRotation: {rotationX: "-140_cw", rotationY: "70_short"}, ease: "Power2.easeIn"});

Check out an interactive example.

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

gsap.to(obj, {duration: 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 = -270;
gsap.to(obj, {duration: 1, directionalRotation: (myValue + "_short") });