In Today’s tutorial we will go over the Animation Extender and how to select one animation of a list of animations.

We are using Visual Studio 2010, to perform these tutorials, if you do not have a copy of Visual Studio 2010, you can download it at alternatively; Microsoft has been nice enough to provide a free download of Visual Web Developer.

Before we begin, we suggest you download the source code, to follow along step by step.

1. Before we can begin, we must add a ToolScriptManager you can drag and drop this from the AJAX Control Toolkit.

2. Next up we are going to add a Panel Control. Add some text to the panel, separated by

3. You will want to set the Panel ID to something you will remember. ID=”panel1” for example. Also since we are adding styling reference the style sheet as well for example CssClass=”panelclass”

4. The associated CSS class for the panel defines a background color and width. You can use your own settings or you may use ours when you downloaded the source file.

5. Next up, is adding the animation extender. You can drag and drop this one as well from the AJAX Control Toolkit.

6. Here is where we needed to remember that ID for the Panel we set up earlier, since were are going to reference it in the properties section. Set the TargetControlId to the panel you added earlier.

7. After you have set the Target control, you can go to the properties section and set the parameters for the animation. You can set the Duration of the Animation, such as 1.5 or 10 seconds, how you want the animation to execute, for example on mouse over or on page load. It’s really up to you. To see how we set it you can always download the source code file.

8. Now we add node, we will use to run the animations once the page has finished loading.

9. Now instead of using one of the regular , we will use the element. The Value of the value of its SelectScript attribute is evaluated; the return value must be numerical. Depending on this number, one of the sub animations within is executed. For instance, if SelectScript evaluates to 2, the Control Toolkit runs the third animation within (counting starts at 0).

10. The following markup defines three subanimations: Resizing the width, resizing the height, and fading out. The JavaScript code (Math.floor(3 * Math.random())) then picks a number between 0 and 2, so that one of the three animations is run:

There you go; you just learned how to select an animation from a set of animations.