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? Obj

Answer 1

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.