So I’m trying (and have been thinking about this for a long time) on how to do a simple “flip” animation using Javascript.

What I’m after lately, as it relates to my Scrumble project, is the ability to click a sticky-note and have that note flip over (as it does when you’re using the Mac OS X Dashboard widgets). See my quicktime animation (from AfterEffects):

While I’ve been trying to research this, and not coming up with a good solution (beyond image/object swapping in the dom; swap the selected item for a larger div with an animated gif inside), I found World of Solitaire, a Javascript-heavy Web site that is pure beauty.

I’ve spent the last half-hour marveling over the detail, the richness of the display, an the fact that I can’t win a single game of Klondike (turn-three)!

I took a look at the Javascript for this site, and found that it uses a lot of JS libraries (Yahoo! YUI, Mochikit, etc). The animation looks to be handled by slimming the width of a card until it’s 0px wide, then un-slimming the face of the chosen card until it’s 100% of it’s normal width. Not exactly what I’m after (see the video), but it’s closer than I’ve ever seen.

This entry was posted on Thursday, January 31st, 2008 at 5:58 pm and is filed under code, design, technology, web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.