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!

7 thoughts on “jQuery 3D rotation with Adobe Edge and Greensock – it’s alive!

  1. Hi, thanks for the tutorial.
    I am a newbie in Adobe Edge. I\’m trying to do something like this that you showed in this article. But I would like do this with a image. Like a Card, with a image in a face and other image in another face. And when I swipe the card to left, it flip to left and shows the other face with the other image. And the same thing occurs when swipe to right. This is to show in an iPad. Can you help me with this? Thanks.

    1. I’m just putting a demo together for a card flip. I’m using a slightly updated version of the 3D rotation in my blog post (with a few external JS files that deal with common tasks, like assigning an element’s perspective value) but I’m sure you’ll get the gist!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s