Animations are extremely useful when building easy-to-use, self-explanatory user interfaces because they provide the user with visual clues about the application state transitions.

LZX's simple and powerful animation API allows you to build sophisticated animations using a familiar and manageable programmatic approach. Using LZX, you don't have to work with complicated and/or unfamiliar metaphors such as the timeline and frames. All user interface components have an animate() method, that allows you to animate any component property.

This example, demonstrates an expandable panel. When you click the "Click here to toggle" text, the details view opens smoothly. This is done by animating the height attribute of the details view from 0 to 200 pixels in 500 milliseconds. When you click the "Click here to toggle" text again, the details view closes. This is done by animating the height attribute back to 0.

The animate method takes four arguments:

• The name of the property to animate
• A value for the property
• The time in milliseconds the animation should take
• A boolean indicating if the value passed as the second argument is relative to the property's current value (true), or absolute (false)