This page details the work done by Matt Bouchard and Johnny Rodgers during the Hackfest on using the MooTools JavaScript library to create screen effects and animations.  The purpose of these examples is to prototype the various user interactions imagined by the design team during the Hackfest.

 Overview

Overview of the various JavaScript and CSS frameworks being considered for use on the Monk Workbench. 

Effect Demos 

• Tool animating from a thumbnail to a usable view and back.
• Dealing animation from toolbar to table.
• Drag and Droppable Tools.

NOTE: These demos have only been tested in Firefox 2 on Mac OS X.  However, the Moo documentation does state that "MooTools is compatible and fully tested with Safari, Internet Explorer 6 and 7, Firefox (and its mozilla friends), Opera and Camino."

Code for all of the above demos can be viewed by selecting View Source in your browser.  The stylesheet for the demos can be found here: example.css, and the documented and compressed versions of the MooTools code can be downloaded here: http://mootools.net/download.  Finally, a template for the demos can be downloaded here: http://www.creativecreature.ca/clients/monk/examples/template.htm.  This template is commented inline and indicates where to insert the custom CSS and JavaScript code for your demo.