jquery.transformlist - a CSS3 transform animation plugin for jQuery

jquery.transformlist is a Javascript plugin for jQuery to add support for styling and correctly animating CSS3 transforms that make use of multiple transform functions.

jquery.transformlist is not intended to provide animation between arbitrary transform styles - it doesn't provide the matrix decomposition required for that task. Instead it aims to assist you in creating a transform list of several transform functions that are composited for a specific task, and then provides you with means to use jQuery.animate() between different sets of arguments for those transform functions.

That's a little unclear, so imagine you set up a "camera" transform list allowing you to adjust the X, Y, and Z of the focal point; and then the rotation around, elevation above or below, and distance from the focal point.

jquery.transformlist then lets you animate between any different set of those values, using all the power and features of jQuery.animate().

To take it a step further, you could create a transform list to style and position a scene, a transform list for positioning of objects/elements within that scene, and finally a transform list for the camera view of the scene. You could then animate individual objects within the scene using the positioning transform list, while independently animating the camera view of the scene.

For some examples, check below, or for a demonstration please visit the plugin website:

• http://www.illusori.co.uk/projects/jquery.transformlist/

Setup

Save plugin somewhere and include in your page after you load jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="/js/jquery.transformlist.js"></script>

Then define a named "camera" transform list with 6 named transforms and default values:

$.TransformList('camera')     .addTransform('focalX',             'translateX', '0px')     .addTransform('focalY',             'translateY', '0px')     .addTransform('focalHeight',        'translateZ', '0px')     .addTransform('cameraRotation',     'rotateY',    '30deg')     .addTransform('cameraElevation',    'rotateX',    '25deg')     .addTransform('cameraDistance',     'translateZ', '250px');

Style an element with the transform list:

$('.camera').css('transformlist', {     transformlist: 'camera',     focalX:        '50px',     focalY:        '25px'     });

Animate an element to new values in the transform list:

$('.camera').animate({     transformlist: {         transformlist:   'camera',         focalX:          '20px',         focalY:          '+=30px',         cameraRotation:  '75deg',         cameraElevation: '-=10deg'         }     }, 1000, 'linear');

Interrupt the last animation with stop and animate from the interrupted position:

$('.camera').stop(true).animate({     transformlist: {         transformlist:   'camera',         focalX:          '0px',         focalY:          '0px',         cameraRotation:  '0deg',         cameraElevation: '5deg',         cameraDistance:  '25px'         }     }, 300, 'linear');

Query the current tranform list:

// Super verbose for your reading pleasure. var transformlist = $('.camera').css('transformlist'); var cameraRotationArgs = transformlist.transform('cameraRotation'); var firstArgWithUnits = cameraRotationArgs[0]; var cameraRotationWithoutUnits = parseFloat(firstArgWithUnits);  // Or all-in-one for maximum unreadability. if (parseFloat($('.camera').css('transformlist').transform('cameraRotation')[0]) >= 720) {     console.log("Dizzy nao, plz stop, k?"); }

Have fun.

See Also

• http://www.illusori.co.uk/projects/jquery.transformlist/

Known Issues & Bugs

• Not a bug, but you can't animate between different kinds of transformlist. I consider this a feature since it's not the target intent of the plugin. :)

License

GPL version 3, see LICENSE.txt for full license text.