Chapter 7. Animations

Nifty transitions between pages or elements make for nice eye candy, but they're tricky to implement and are achieved with a variety of transformations. For instance, visual changes in an element's opacity or position can be accomplished by gradual shifts in the number value of the element, thus animating the change. For instance, a number going from 0 to 100 can be used as the opacity value of an element, and used to animate a change in appearance from transparent to opaque.

Luckily, Atlas comes with several built-in animations. They are all defined in the AtlasUIGlitz.js library. Currently, Internet Explorer DirectX filters are used for the animations; these filtersobviouslyonly work with the Microsoft browser. However, the animations described in this chapter also work on other browsers like the Mozilla brands. And even if some browsers do not support some of the animations, seeing as they are only eye candy, there should be no vital information lost because of this limitation.

In this chapter, you'll learn how to use Atlas animations to change an element's position and opacity. You will also learn which type of animations exist and how they work.