4

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.

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100
acidking
  • 145
  • 3
  • 10

3 Answers3

3

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

Jason Sperske
  • 29,816
  • 8
  • 73
  • 124
  • rofl ... i was concentrating on the effect, took me a while to realise what was going on XD Thanks however. – acidking Jul 26 '12 at 02:34
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

Larry Battle
  • 9,008
  • 4
  • 41
  • 55
  • I admit that is an impressive list of transitions. I can image getting close to the Genie effect with a combination of these. What I think is missing is the ability to deform a div element on a curve. Maybe skew + stretch + move would look close enough. – Jason Sperske Jul 25 '12 at 22:20
  • Thanks for the links. The animate.css effects are quite nice. I would have to settle for something of that sort, I am not up to putting too much effort to actually see it happen. – acidking Jul 26 '12 at 02:53
1

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.

matsko
  • 21,895
  • 21
  • 102
  • 144