Jump to content
Search Community

Cannot animate rotate negative (jQuery GSAP)

Kyryll test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I'm new to the GSAP :) But love what I have seen so far.


I'm having a little 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?


Thank you guys!



Link to comment
Share on other sites

Just to clarify, 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 the platform'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:

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


//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:



//and to specify a clockwise direction:

//or counter-clockwise:
  • Like 5
Link to comment
Share on other sites

  • 7 months later...

Hi tinchoforever and welcome to the GreenSock forums,


We have seen plenty of people have great success with GSAP and Three.js. Here is one example: http://labs.bebensiganteng.com/html5/experiment3/?text=GreenSock


I'm not exactly sure where you are having a problem, I can only guess that you are not loading the DirectionalRotationPlugin, or your tween has the wrong syntax.


Its really impossible to trouble shoot without seeing a demo, let alone a single line of code.

We aren't really Three.js experts, but if you create a super simple demo we will certainly look at it.

It would be preferable if you would use CodePen so that we can live-edit the source and share it back with you.


Some tips on getting started with CodePen here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/


If you need to load multiple libraries, you can just include multiple <script> tags in the html panel. 

Link to comment
Share on other sites

Something tells me, tinchoforever, that the problem here is related to the fact that Three.js uses radians for rotation, not degrees. You can tell DirectionalRotationPlugin to use radians pretty easily - just set useRadians:true like the docs say :)

TweenLite.to(obj, 1, {directionalRotation:{rotation:"1.5_ccw", useRadians:true}, ease:Power2.easeInOut});

Does that help? 


If not, please do create a codepen demo as Carl suggested. That really helps us see what's going on. 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...