CODEWITHSUNDEEP
javascriptjqueryjquery-animatetransformgsap
Kyryll Tenin Baum
Kyryll Tenin Baum

Reputation: 132

Animate rotate negative (jQuery GSAP)

I'm having a problem with animating transform rotateX and rotateY. I'm using the GSAP jQuery plugin.

Basically executing this:

$(element).animate({transform: "rotateX(-180deg)"});

has the same effect as executing:

$(element).animate({transform: "rotateX(180deg)"});

I do have perspective set up, in case you were wondering.

Is there a special way I have to define negative values or is this a bug?

UPDATE: I have found a property "shortRotationX" and "shortRotationY" mentioned here: http://codepen.io/GreenSock/pen/ydIgf

However this seems to be a temporary workaround. I would like to know what the correct way is to animate rotations with jQuery + GSAP. Thank you guys! Kyryll

Upvotes: 0

Views: 2500

Answers (2)

Jack
Jack

Reputation: 2970

This was answered in the GreenSock forums at http://forums.greensock.com/topic/9099-cannot-animate-rotate-negative-jquery-gsap/#entry36552

A rotation of 180 is identical to a rotation of -180 in terms of the browser's transform matrix (use getComputedStyle() to see for yourself), so there's no way to truly discern the difference unless you leverage GSAP's native transform properties like "rotationX", "rotation", "rotationY", etc. When you do that, GSAP can track everything properly for you. Plus it's more optimized for speed. So:

//OLD
$(element).animate({transform: "rotateX(-180deg)"});

//NEW
$(element).animate({rotationX:-180});

//or use GSAP's native API:
TweenLite.to("#element", 0.4, {rotationX:-180});

Also, "shortRotationX" is deprecated ever since we came out with DirectionalRotationPlugin which uses a more intuitive syntax that can also be used to specify clockwise or counter-clockwise movement:

//OLD
{shortRotationX:-180}

//NEW
{rotationX:"-180_short"}

//and to specify a clockwise direction:
{rotationX:"-180_cw"}

//or counter-clockwise:
{rotationX:"-180_ccw"}

Upvotes: 3

user2824854
user2824854

Reputation:

It should have the same effect. Turning object 180 degrees will be displayed in same way how it will be displayed if you turn it -180 degrees.

I made you a simple example, if it clears you out:

enter image description here

Fiddle here (just HTML & CSS) so you can see that it has the same effect.

div {
    width:200px;
}

#rotate1 {
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Opera, Chrome, and Safari */
}

#rotate2 {
height:100px;
background-color:red;
/* Rotate div */
transform:rotate(-180deg);
-ms-transform:rotate(-180deg); /* IE 9 */
-webkit-transform:rotate(-180deg); /* Opera, Chrome, and Safari */
}

Upvotes: 1

Related Questions