While the AJAX Control Toolkit is focused primarily on providing great AJAX controls and extenders, it also
includes a powerful animation framework which you can use to add awesome visual effects on your pages.
This walkthrough describes the basics of using this framework to create declarative animations.

Generic XML Animations

The animations are implemented in JavaScript as an ASP.NET AJAX class hierarchy and can be invoked via JavaScript
by calling the Animation's play function. This is very
useful when writing to the animation classes from code, but writing complex animations ends up being time consuming and error prone.
To make it very easy to use the animation framework without writing any JavaScript, the Toolkit provides the
ability to declare animations via XML markup.

Extenders with animation support, like the AnimationExtender, expose various
events, like OnClick, that can be associated with a generic XML animation declaration.
Within this declaration, you specify which types of animation effects you would like to occur.
For example, to make a Panel with ID = "MyPanel" disappear
from the page when clicked, you could add an AnimationExtender like this:

Let's take a closer look at exactly what's going on in the XML above. The AnimationExtender
is used to indicate that we want to make our animation target
the control with ID = "MyPanel". The Animations
section is where all generic animations are declared. OnClick indicates that when
the target is clicked we will play the animation nested inside it. Finally, FadeOut
defines the specific animation that will be played and sets the values of its Duration
and Fps properties. Here's the example in action:

Click me to fade out!

The events associated with animations vary from extender to extender. The AnimationExtender
has events for OnLoad, OnClick, OnMouseOver,
OnMouseOut, OnHoverOver, and OnHoverOut.
The UpdatePanelAnimationExtender has events for
OnUpdating and OnUpdated. It is important to note that each event can only have
one child XML node associated with it but you can use the using the Sequence and Parallel
animations to arbitrarily nest and group animations, which is discussed in detail below.

Below is an example which uses OnHoverOver and OnHoverOut to fade
a Panel in and out when the mouse moves over it. We use the FadeIn and
FadeOut animations and set their MinimumOpacity and
MaximumOpacity properties.

Hover over me to fade in!

Each animation corresponds to a JavaScript class (for example, FadeIn is mapped to the
AjaxControlToolkit.Animation.FadeInAnimation class). The name of the animation is used
as the generic XML animation declaration's tag and its properties, which correspond to the properties on the JavaScript class,
are attributes of that tag. For example, to change the size of an element we could use Resize
which has properties Width, Height, and Unit.

We would declare it as:
<Resize Width="200" Height="300" Unit="px" />
The name of the animation and properties are case insensitive in generic XML animation declarations.
Since the animation framework is based on a hierarchy of animation classes, all the animations have the properties
Duration (in seconds) and Fps (frames per second).
All the animations and their properties are described in the Animation Reference.

Composing Animations

Some of the animations are used to aggregate and combine other animations. Examples include Parallel Animation
which will run its child animations simultaneously and Sequence which runs its child animations sequentially, waiting for each to finish before starting the next.
To use these animations in the generic XML animation declaration syntax, we include their child animations as nested XML elements.
For example, to have an element pulse and then fade out while scaling its size by 500%, we could declare the following:

Most of the animations included in the framework are very simple and perform a single function. When you combine them together
using animations like Sequence and Parallel you can create very
sophisticated effects.

Actions

The animation framework also includes a number of animation actions that perform an instantaneous operation. They differ from regular
animations which perform an operation in small steps over a period of time. The actions are often useful in composite animations to assist
in creating polished effects. Examples include the EnableAction which allows you to set whether or not
an element can be clicked, the StyleAction which allows you to set a style attribute on the target
element, and the HideAction that hides the element. If you wanted to prevent a
Button on a page from being clicked twice, you could use the following animation:

The animations perform their various operations on a target element. The default target element for an animation is
the control it is extending (i.e. the control pointed to by TargetControlID on its
Extender tag). You can also specify alternate targets using the
AnimationTarget property. This is very useful when you want to wire up the
AnimationExtender to one control, like a Button,
but have the animation modify another control, like a Panel. A child animation will
have the same target as its parent animation unless another target was explicitly specified. Here's an example of how we
could have a button's OnClick event animate the background color of another control:

The animation framework provides you with the ability to easily add interactivity to your web pages that's never before been available. Beyond
specifying animations in markup, they're also easy to use in code so you can add professional looking transitions and visual
effects to your Toolkit components and controls.