Welcome to another AJAX tutorial, today we will be demonstrating how to use the UpdatePanelAnimation Extender.

We are here to help you with AJAX Tutorials and the AJAX Control Toolkit.

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.

So we are going to build a small banner with 3 check boxes and an update Button to show the different animations.

Here is a quick preview of what we are building.

Start by adding new WebForm to this project and name it UpdatePanelAnimation.aspx.

Now in our Source view we are going to style our page and add 4 Div’s and inside of the last Div we are going to add an UpdatePanel and add a content template tag to display a label message. Here is the markup:

Now we set up triggers to do exactly what triggers do, execute the animation on the Button update we are going to add in a few steps down the line.

Next is our checkboxes that we are going to add some cool functionality to them to choose the selected animation. We also added the button to execute the animations. Below is the markup:

Now lets work on our bread and butter of this tutorial, the animation.

Lets drag an UpdatePanelAnimationExtender and we can begin selecting our animation actions. Below is the markup for the animation Extender.

As you can see we added an animations node and Parallell Tag to enable actions. As you can see we selected the checkboxes and referenced them in our animations node.

Now run your application and see the animations in full effect.