Introduction

Let's talk about the Atlas framework for animations. In this article we'll see how to animate some CSS properties (top, left, height, width) of a DOM element to obtain a nice animation effect, similar to that used here on DotNetSlackers to show the charts in the main page (try to hover one of the chart icons in the News Stats section).

The first thing to do is create a new ASP.NET page in an Atlas-enabled website (you can use the Atlas website template found in the installer) and drop a ScriptManager control:

As you can see from the above code, we have loaded the animations framework, that is the AtlasUIGlitz script.

The second step is to declare an HTML box on the page, that we'll animate using Atlas:

The CSS for the box is the following (you should put it in a CSS file and reference it in the head section of the page):

If you run the page, you'll see a static box at the top-left of the page. Let's Atlas-ify the page by adding the following xml-script section (i.e. Atlas markup) just after the HTML for the box element:

Before explaining the code, try to run the page: you'll see that as soon as the page is loaded, the box is animated with a sort of "enlarging" effect. Nice, huh? Ok, back to the code.

Inside the components section we are declaring an Atlas control that is wrapping the box element (notice that the id of the control element is the same as the box). Plus, we are adding a behavior called LayoutBehavior to the new box control. This is a recommended approach when animating the left, top, height or width properties of an element, because the LayoutBehavior allows to do it using markup code and takes care of setting those properties with the appropriate unit (the default is pixel, px).

The compositeAnimation element is the one that holds the two animations for the height and width properties of the box, respectively. As you can see from the code, we are encapsulating the two animations into an animations element and they will be played simultaneously as soon as we invoke the play() method of the compositeAnimation control, that is called when Atlas has been initialized in the web page (see the load element inside the application node, where the invokeMethod action is used to call the play() method of the compositeAnimation instance).

The animations that we used to dynamically increase the height and width of the box are two lengthAnimation controls (instances of the Sys.UI.LengthAnimation class). Each animation needs to target the control that exposes the property to be animated: in our case, we're dealing with the height and width properties through the LayoutBehavior, thus we set it as the target for the LengthAnimation. The startValue and endValue attributes are used to specify that both the height and width will increase from 200px to 400px.

Finally, notice how we can specify the overall duration of the animations (in seconds, through the duration attribute), and the frame-per-second rate (the fps attribute).

Have fun!

About Alessandro Gallo

Alessandro "Garbin" Gallo is a Microsoft MVP in the Visual ASP/ASP.NET category and a .NET developer/consultant. He is a contributor for the Ajax Control Toolkit project, owned by Microsoft. Alessandro won the Grand Prize at the "Mash-it-up with ASP.NET AJAX" contest held by Micr... This author has published 23 articles on DotNetSlackers. View other articles or the complete profile here.