sv en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en de en en fr en en ca en en en en en en ca en en nl en en en en en en en en en en en en en en en en en en en ca en pl en en en es en de en nl en es en it en en en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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:
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:
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).
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.
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s”
“It's shocking the @w3c didn't use @greensock as a model of how to do animation via code. Did they even ask animators what they use?”
“There is no doubt that GreenSock is currently the best available tool for creating astonishing interactive websites and animation effects.”
“I think I love GreenSock as much as bacon.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“The best thing about GSAP is that it just works, and it works well. On every single browser I’ve tested.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“...obviously GSAP is incredible”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.