Effects Overview

The Visual Effects library (effects.js) includes all you need to add advanced JavaScript animation to your web site or application.
All animation is time-based, not frame based. So, if you tell an effect to last exactly one second, it will do so, regardless of the rendering speed of the browser. And it’s compatible, meaning all this stuff works on Firefox, Internet Explorer, Safari, the iPhone and many other browsers.

The library’s Core Effects, Combination Effects (a combination of core effects) and Effect queues (a representation of timelines to create series of effects) are powerful tools to create appealing animations.

Quick Demo

Source code of this demo


<div id="morph_demo" style="background:#cccccc; width:100px; height:100px;"></div>
<ul>
  <li><a href="#" onclick="$('morph_demo').morph('background:#00ff00; width:300px;'); return false;">Click me for a demo!</a></li>
  <li><a href="#" onclick="$('morph_demo').morph('background:#cccccc; width:100px;'); return false;" >Reset the demo!</a></li>
</ul>