jQuery 3D rotation with Adobe Edge and Greensock – it’s alive!

Because I’m nice like that here’s a jQuery function that adds the ability to perform a Y-axis 3D rotation on any jQuery element – it’s used in conjunction with the Greensock JavaScript libraries and it means you can simply add the call to the element as a function of itself. It’s a bit like adding a prototype function in Flash AS1.

If you’re not familiar with using Greensock JS in Adobe Edge then please check out this tutorial first.

$.fn.rotateY = function(tweenProps) {
 var start = (tweenProps.start == undefined) ? 0 : tweenProps.start;
 var end = (tweenProps.end == undefined) ? 360 : tweenProps.end;
 var duration = (tweenProps.duration == undefined) ? 2 : tweenProps.duration;
 var delay = (tweenProps.delay == undefined) ? 0 : tweenProps.delay;
 var perspective = (tweenProps.perspective == undefined) ? 1000 : tweenProps.perspective;
 var ease = (tweenProps.ease == undefined) ? Quad.easeInOut : tweenProps.ease;
 var props = {rotateY:start};
 var target = this[0];
 var parent = target.parentNode;
 parent.style.webkitPerspective = perspective;
 var rotationY;
 var applyProps = function(e) {
 rotationY = 'rotateY('+(props.rotateY)+'deg)';
 target.style.webkitTransform = rotationY;
 };
TweenMax.to(
 props,
 duration,
 {
 immediateRender:true,
 delay:delay,
 rotateY:end,
 onUpdate:applyProps,
 ease:ease,
 onComplete:tweenProps.onComplete,
 onCompleteParams:["{self}"]
 }
 );
};

The usage in Edge is as follows:

sym.$("myRotatingElement").rotateY("");

The above example simply passes in an empty string in order to use the defaults.

However you can pass in an object with some or all of the following properties:

var myRotationObject = {
start:20, 
end:360, 
duration:4, 
delay:2, 
perspective:1500, 
ease:Strong.easeOut, 
onComplete:tweenComplete
};

//now pass it in - I've included a direct function call AND a call on touchend
sym.$("myRotatingElement").rotateY(myRotationObject);
//or bind it to a click/touch event
sym.$("myRotatingElement").bind('touchend', function (){$(this).rotateY(myRotationObject);});

function tweenComplete (e) 
{
//do something here when the tween completes
};

The above example says (either straight away or as an interaction):

‘Start rotating from 20 degrees and finish at 360 degrees. Take 4 seconds to do it but delay the animation by 2 seconds, applying 1500 to the element’s parent perspective and easing with a Strong.easeOut – then call the function tweenComplete when you’ve finished ‘.

The onComplete event bubbles up a reference to the tween – this allows you great flexibility not only to control the tween but also to access the tween’s target (the element).

This function only rotates the element on the Y-axis but you could very easily change it for your own needs to use the X-axis or both.

Also please note that this uses Webkit which is not supported in all browsers (for example it won’t work in IE or Firefox) – I wrote this mainly for that ‘card-flip’ rotation effect for iDevices and it performs pretty well on my iPhone 4 and iPad.

So all you need to do is paste the jQuery function into your ‘compositionReady‘ event in Adobe Edge and from then on all of your jQuery elements will have this rotation ability.

Check out the demo on your iDevice or on Chrome or Safari.

Enjoy and happy 3-D rotating!