Genie animation Javascript?

Question

Is there a jQuery plugin or javascript library that supports a "genie" animation effect like the apple Mac OS X dock?

Bonus: Actionscript library? C/C++? .NET? Objective C?

Answer 1

I have managed to reproduce this effect with JS + CSS...it's not finished yet but here is a preview of the animation in action:

http://www.youtube.com/watch?v=UwUxo-R-mzU

Answer 2

It can be done using pure CSS transform, but is much easier using SASS. The general idea is that you want to convert a rectangle into a triangle in a smooth way (so that half way trough it is a trapezoid). The problem with this is that any linear transformation will transform a rectangle to a parallelogram (a quad with all sides parallel) and we want a triangle. This means we need a non-linear transformation. The good news is that you can do non-linear transformations pretending that these are transformations in 3D and then projecting the rectangle to 2D screen-space. Think about a loooong sidewalk - it looks like a triangle. So we want to rotate the rectangle and make it very long.

The transformations for first and last keyframes of animation are very straight forward then: the first has identity transformation, and the last one has

 -webkit-transform: matrix3d(
   1,   0,  0, 0, 
   0 ,  1,  0, -9/$height,
   0,   0,  1, 0, 
   0,   0,  0, 10
 );

the only interesting column being the last one which states that distance from viewer should be 10" for pixels in top row and go down to 10-9=1 for the bottom-most pixels.

The problem is with intermediate frames as the default interpolation algorithm used by browsers tries to interpret matrices as composition of elementary operations like rotations and translations and then interpolates each operation independently. And since our final transform resembles rotation by 90 combined with infinite stretch, interpolation will try to perform rotation and stretching simultaneously, which looks kind of odd, as one of these movements "is circular" while the other "linear" and the speed of the two does not match.

To compensate for this one can generate many intermediate frames and for that I use SASS. The final result is here: http://codepen.io/anon/pen/ApHkc

And most of the credit for this solution should go to the author http://persistent.info/web-experiments/distortion/ who convinced me that this is possible. Also, note that there are possibly many different transformations which transform a given rectangle to a given triangle, which differ only in the way in which their interiors are mapped - perhaps my solution is not the best in this regard.

Answer 3

Not that I know of. The ‘genie’ effect is a distortion that cannot be achieved with CSS: CSS transformations (including IE's matrix filter) give you resizing on both axes, rotation and shear. WebKit additionally gives you linear perspectives. Curvy distortions like genie can't be reproduced with those tools.

To do it in JavaScript you'd have to split the image (or other element if you are really ambitious) into one line per pixel and squash horizontally using a CSS transformation. It would be horribly inefficient to render and would probably look jerky and flickery as well as unpleasantly aliased.

Answer 4

Insipired by Hakan's implementation, I wrote my version of Genie Effect transitions library.

Check out https://github.com/kamilkp/geniejs

and http://kamilkp.github.io/ for demo.

It works in every browser including mobile (not always smoothly on firefox though). It supports Genie Effect transitions in every direction (top, bottom, left, right). It works even if the target html element is a child of some container that has overflow auto or hidden. It is library agnostic itself, but i also wrote a convenience jQuery plugin. And if you also include the html2canvas library in your project, the plugin lets you animate HTML elements with genie effect (expanding example here: http://kamilkp.co.nf/genie/canvas/)

The only requirement for the browser is that it needs to support CSS transitions. It's a pure javascript + CSS solution.

Answer 5

http://wonderfl.net/c/qnTR

http://swingpantsflash.com/genie_transition/genietransition.html