The UpdatePanelAnimationExtender is a simple extender that allows you to utilize the powerful animation framework with existing pages in an easy, declarative fashion. It is used to play animations both while an UpdatePanel is updating and after it has finished updating.

It is important to note that because of the UpdatePanel architecture, the OnUpdating animation will always play when any partial postback starts, but the OnUpdated animation will only play at the end of a partial postback if its UpdatePanel was changed (note: setting the UpdatePanel's UpdateMode="Always" will ensure the OnUpdated animation plays when every partial postback completes).

The animations to be played are declaratively specified using XML. You can read the Using Animations walkthrough for more details about creating these generic animation declarations, as well as other ways to use the animation framework. The framework provides a lot of useful animations to handle movement, resizing, fading, etc. All the animations and their properties are described in the Animation Reference.

The UpdatePanel animation behavior can be applied with the following extender (the italic properties are optional, and the ellipses represent a generic animation description):

<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"

  runat="server" TargetControlID="up">

     <Animations>

        <OnUpdating> ... </OnUpdating>

        <OnUpdated> ... </OnUpdated>

    </Animations>

</ajaxToolkit:UpdatePanelAnimationExtender>

    * TargetControlID - ID of the UpdatePanel whose updates are used to play the animations (this is also the default target of the animations)

    * OnUpdating - Generic animation played as when any UpdatePanel begins updating

    * OnUpdated - Generic animation played after the UpdatePanel has finished updating (but only if the UpdatePanel was changed)