Search code examples
jqueryjquery-uiflipjquery-effects

How to use jquery to animate a back flip out of a button?

I would like to recreate this effect (using jquery) because I think its the coolest thing ever. http://m.madebycanvas.com/things/backflip.html (its by Matthew Farag)

Flip animation

...but I have no idea where to start. Does anyone know how or have any ideas? The author uses scripty2 and the prototype framework and scriptaculous, I believe.

Ideally I could also use a plugin that uses hardware accelerated css transformations with a fallback to jquery's own in unsupported browsers. Please explain how you would do it conceptually if you can.

I'm thinking to animate the button larger somehow to the width of the container it will flip to, then shrink the height anchored in the center to a line and then do the opposite to the panel that will appear.

Solution

  • It is using Webkit animation. I have made a demo page extracting the essential code from the page you posted: http://jsfiddle.net/42rT4/2/. I hope that's helpful.

    Please note though, the author specifically asks you not to copy the code, so you should just learn from it and roll your own.