gsap and rotate3d

[Hamish]

Hello!

 

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.

[Rodrigo]

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:

http://www.w3.org/TR/css3-transforms/#transform-rendering

 

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

http://jsfiddle.net/YjVU4/1/

 

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

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

btn1.click(function()
{
    tl.play(0);
});

Hoe this helps,

Cheers,

Rodrigo.

[Hamish]

Cheers, was so obvious in the end!

 

Edit:

 

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:

 

http://jsfiddle.net/YjVU4/

[Rodrigo]

Hi,

 

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:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Syntax

 

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:

http://jsfiddle.net/YjVU4/2/

 

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

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

http://www.greensock.com/css3/

 

Hope this helps,

Cheers,

Rodrigo.

 

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.