Javascript to minimize <div> using Genie effect? [closed]

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 7 years ago.

I'd like to minimize a box, much like a popup popin in genie effect on a Mac, I found jQuery Transfer effect to be a close, but not quite enough, it only draws an outline and doesn't actually smear the object, is there a way to mimic the genie minimize effect of Mac?

Thanks.

Answer 1

This effect will not be possible with pure DOM manipulation. The flow and shape of an element is determined by rendering engine of the browser. You can apply CSS3 transformations but even this is limited to a subset of the combined steps you would need to achieve this look. However if you could handle Flash being part of this solutions you have many more options:

http://wonderfl.net/c/qnTR

This example is cracking me up (best Hello World ever!):

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

Answer 2

You can achieve the Genie effect if you use a canvas library. Here's one called CAAT.

Try using the fadeInUpBig and fadeOutDownBig classes from animate.css

Answer 3

There isn't anything that is similar to the genie effect. The closest animation you can get is if you make something on your own using CSS transforms (using scale and skew) and jQuery callbacks. Standard CSS properties of setting the top, left, width, and height values won't get you the effect you're after.