Inside Technique : Animation Toolkit
By Erik Arvidsson and Scott Isaacs

The Animation Toolkit concept and scripts were created by Erik Arvidsson. You can find more of Erik's work at his web-site, WebFX, and on InsideDHTML in the WebFX Area. This article was written by Scott Isaacs using Erik's scripts and samples.

The Animation Toolkit is a set of JavaScript objects for adding cross-browser animation effects to your web-site. The set of animation effects is made completely extensible by using the object-oriented features exposed by JavaScript.

Each animation effect is built as a path object. The path object defines the animation path that a particular object follows. The toolkit includes path objects for straight lines, circular arcs, and sinus waves.

In this article, we show you how to:

1. Animate elements over paths using the animation toolkit.
2. Use JavaScript to define object prototypes and add inheritance to your objects.
3. Extend the animation toolkit with your own custom paths.

The animation toolkit consists of two primary objects: a Path object and an Animator object. Path objects can be best thought as choreographers of the animation. They provide the coordinates for the element's next position. The Animator can be thought of as the director of the animation sequencing the different path objects and controlling the animation's rendering. Keep this in mind as we take you through the steps to create an animation.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.