Jump to content


gsap and rotate3d

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 attempting to use TweenMax to animate an elements 3d rotation from 0 to 360deg but it's not working — it seems the shortRotation type behaviour is happening but I'm unsure if TweenMax is doing this or if the browsers itself (Chrome) is causing the behaviour. 


Here's a fiddle of the problem: http://jsfiddle.net/YjVU4/


If you change the rotation to, for example, "180deg" it works fine.

Link to comment
Share on other sites

Hi and welcome to the forums.


Well basically the problem is that your element doesn't reside inside another with a perspective, therefore the only rotation available is the CSS 2D rotation, the reason why short rotation works OK.


In order to have a 3D type of effect your element must be contained inside another with a perspective value, otherwise the transform is bi-dimensional, for further understanding read the following:



I've updated the fiddle so you can see it working:



Here's the code anyway:

var wrap = $("div#wrap"),
    circle = $("div.circle"),
    tl = new TimelineMax({paused:true}),
    btn1 = $("button#btn1");

TweenMax.set(wrap, {perspective:400});//This is the key

.to(circle, 1, {rotationX:360})
.to(circle, 1.5, {rotationY:360, rotationZ:360})
.to(circle, 1, {rotationX:0, rotationY:0, rotationZ:0});


Hoe this helps,



  • Like 3
Link to comment
Share on other sites

Cheers, was so obvious in the end!




This still doesn't work using rotate3d specifically, despite the parent having a perspective property. You can see from this fiddle that TweenMax simply doesn't do anything to the element itself:



Link to comment
Share on other sites



Basically this is a syntax issue. Right now you're passing a string through the constructor, like this:

TweenMax.to(this, 1, {transform: "-webkit-rotate3d(-1, 1, 0, 360deg)"});

The engine does support strings but just to indicate units that aren't the default ones or tween relative values; for example if you want to animate an element's height in percentage you pass the string indicating the specific unit or if you want to enhance the element's current height by a number of pixels you pass a string indicating so. That's why your code is not working.


In this case I'm presuming (Carl or Jack could confirm that) the string you're passing can't be used by the engine because in the case of CSS 3D transforms it works with the specific transforms functions. You can see those here:



Keep in mind though, that some of the properties have different syntax (once again Carl or Jack could explain that), so for instance instead of using rotateX, rotateY and rotateZ, the engine uses rotationX, rotationY and rotationZ.


So your code will be the following:

TweenMax.to(this, 1, {rotationX:-360, rotationY:360});

You can see it in action here:



Also check the following links to see how the engines manages the CSS transform functions:




Hope this helps,




PS: If you have more questions add a new reply to the topic, because if you edit a previous one it doesn't show on the forum index.

  • Like 1
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.