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

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 2

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.