Jump to content
GreenSock

DirectionalRotationPlugin

Included in TweenMax: YES

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}; 
 
//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});

DirectionalRotationPlugin's functionality is built into the CSSPlugin, so you do not need to load DirectionalRotationPlugin separately if you just want to tween css-related properties of DOM elements. For example, you could animate rotation-related css properties like this (assuming CSSPlugin is loaded and yourElement is a DOM element).

Video

Check out an interactive example here.

TweenLite.to(yourElement, 1, {rotation:"270_ccw", rotationX:"-45_cw", rotationY:"+=30_cw"});

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 = -270;
TweenLite.to(obj, 1, {directionalRotation: (myValue + "_short") });
Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.
×