Transform:rotate 180 degree and 360 degree

[zureshm]

Hi,

About me: This is the first day I am trying JSAP. I know using jquery and doing animation. But not expert.

I am trying to rotate an element 180 degree, it works perfect using css3 rotation, but using jsap-jquery plugin, it behaves weired. It works for 179 degree and 181 degree. Problem is in 360 degree rotation too - it stays there.  
The code I used
 

$('.link2').click(function(){

 

$('.div2').animate({'transform':'rotate(-180deg)'},3000)

})

 

I tried the tweenmax way too

 

$('.link3').click(function(){

 

var sur = $('.div3'); 

TweenMax.to(sur, 1.5, {transform:'rotate(180deg)'})

})

 

again, it works when using other values

is there any way to force the direction, so it rotates the way i want?

 

 

[Jonathan]

Hello zureshm, Welcome to GreenSock Forums!

 

If you want greater control using transform rotate(). Then you can use the following in your tween instead of using the normal CSS transform function and rotate() properties.

 

In GSAP you declare rotate with the following :

• rotation
• rotationX
• rotationY
• rotationZ

Check out GreenSock's Rotation

See the Pen jiEyG by GreenSock (@GreenSock) on CodePen

.

 

CSSPlugin is included with TweenMax. The following is taken from the CSSPlugin DOCs:

 

directionalRotation:
tweens rotation 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, if the element's rotation is currently 170 degrees and you want to tween it to -170 degrees, a normal rotation tween would travel a total of 340 degrees in the counter-clockwise direction, but if you use the "_short" suffix, it would travel 20 degrees in the clockwise direction instead.

// Example:
TweenMax.to(element, 2, {rotation:"-170_short"});

//or even use it on 3D rotations and use relative prefixes:
TweenMax.to(element, 2, {
       rotation: "-170_short",
       rotationX: "-=30_cw", 
       rotationY: "1.5rad_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. There is a DirectionalRotationPlugin that you can use to animate objects that aren't DOM elements, but there's no need to load that plugin if you're just animating css-related properties with CSSPlugin because it has DirectionalRotationPlugin's capabilities baked-in.

You can find more on working with CSS properties in the CSSPlugin DOCs:

 

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

Does that help?

 

If not you can setup a

See the Pen by pen (@pen) on CodePen

or jsfiddle example so we can see your code in context, in an editable environment to better help you! Thanks!

[zureshm]

Thanks for the quick reply 

 

I used
{rotationZ: "-=180_cw"} 

and it works the way I wanted

 

Edit: just tried {rotation: "-=180_cw"}  also works.. so that mean "rotation" and "rotationZ" are same.

[agamemnus]

I have the same problem with 180 and 360. Terrible and strange rotation effects in both Firefox and Chrome.

 

I couldn't use "rotation". I don't know why -- code below. "rotation" simply doesn't work... I'm using the "robust" version, 1.14.2. I resorted to converting final_rotation to 179.9 or 359.9.

 

 

    TweenMax.to (current_wheel, 1.5, {
     ease       : Linear.easeOut,
     rotation   : final_rotation,
     onComplete : animation_complete
    })

[Jonathan]

Hello agamemnus, and Welcome to the GreenSock Forum!

 

It will be hard to see what is going on without seeing your code in context.

 

Here is a simple example of rotating an element, and then firing the onComplete callback using 1.14.2:

 

See the Pen ByaXJa by jonathan (@jonathan) on CodePen

 

If this doesn't help.. then please feel free to setup a limited codepen example, so we can test your code in a live editable environment. This way we can see your code in context to better help you!

 

Here is a nice video tut by GreenSock on How to create a codepen demo example.

 

[agamemnus]

It hit me.

 

Like a freight train hitting a brick.

 

I have a .rotation property which interferes with GSAP rotation.

 

Don't you think it might be a better idea to contain all the properties in a specific gsap object in order to prevent these collisions???

[jamiejefferson]

GSAP is able to tween any numeric property of any javascript object, but it has a CSSPlugin that makes modifying CSS styles a breeze. Originally, you would wrap any CSS properties in a css:{} object so that CSSPlugin knows to pick them up. The collision you're seeing is a small optimisation that automatically detects non-conflicting CSS styles to pass to CSSPlugin, saving you from having to use a CSS wrapper in every tween.

// with the css object for CSSPlugin
TweenLite.to(foo, 1, { css:{ rotation:360 } });

// rotation will be auto-detected as CSS if foo.rotation doesn't already exist
TweenLite.to(foo, 1, { rotation:360 });

Essentially what you've asked for already exists and used to be the only way, but since the vast majority of users are after CSS tweens most of the time, it made sense for the wrapper to be made optional. Add the css:{} wrapper around rotation (and any other CSS properties) in your tween and it will avoid any collisions.

 

Note: only properties intended for CSSPlugin go inside the wrapper - regular tween properites like onComplete, or direct properties of the target object should be outside the wrapper.