Language

Executing Several Animations after Each Other (VB)

By Christian Wenz|

Download Code or Download PDF

The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. It allows to run several animations one after the other.

Overview

The Animation control in the ASP.NET AJAX Control Toolkit is not just a control but a whole framework to add animations to a control. It allows to run several animations one after the other.

Steps

First of all, include the ScriptManager in the page; then, the ASP.NET AJAX library is loaded, making it possible to use the Control Toolkit:

<asp:ScriptManager ID="asm" runat="server" />

The animation will be applied to a panel of text which looks like this:

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass"> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.<br /> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.<br /> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.<br /> </asp:Panel>

In the associated CSS class for the panel, define a nice background color and also set a fixed width for the panel:

<style type="text/css"> .panelClass {background-color: lime; width: 300px;} </style>

Then, add the AnimationExtender to the page, providing an ID, the TargetControlID attribute and the obligatory runat="server":

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

Within the <Animations> node, use <OnLoad> to run the animations once the page has been fully loaded. Generally, <OnLoad> only accepts one animation. The Animation framework allows you to join several animations into one using the <Sequence> element. All animations within <Sequence> are executed one after the other. Here is the a possible markup for the AnimationExtender control, first making the panel wider and then decreasing its height:

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1"> <Animations> <OnLoad> <Sequence> <Resize Width="1000" Unit="px" /> <Resize Height="150" Unit="px" /> </Sequence> </OnLoad> </Animations> </ajaxToolkit:AnimationExtender>

When you run this script, the panel first gets wider and then smaller.

First the width is increased (Click to view full-size image)

Then the height is decreased (Click to view full-size image)

Author Information

Christian Wenz

Christian Wenz – Christian Wenz is an author, trainer, and consultant. His main focus of working and writing is on web technologies and security. Christian has written or co-written over 100 books for various publishers. He works with both open source and closed source web technologies. This leads to the unusual situation that he has both been awarded a Microsoft MVP for ASP/ASP.NET and is listed in Zend's Who is Who of PHP. He is also listed in Mozilla's credits (about:credits) and is considered an expert in browser-agnostic JavaScript.