So I am building a new site (which I will talk about in detail in a later article), and as usual, I wanted to play around with some stuff I haven’t seen before.

So the tool of choice this time was the Microsoft ASP.NET Ajax AnimationExtender. Now, unlike the other extenders I have talked about, the AnimationExtender (or AEx as I will call it from now on) is not just a control that you flop down on your page and you are done.

Instead, the AEx is kinda like a framework that you can play with. The only problem is the documentation seems to be written for people who already know how to use it. Because the Ajax Toolkit is an add-on to Visual Studio rather than an integrated part, the documentation is a bit light. What I really would have liked was a basic overview on the tool and how it works. Just something to give me a push in the right direction. Since I couldn’t find that anywhere, and I know that there are a lot of people who are itchin’ to give this thing a try, I figured I could write the overview I couldn’t find.

Starting Out

Like all Extenders (and really all ASP.Net Ajax stuff) you need to have a ScriptManager on the top of your page. So lets slap one of those in there.

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

Also you will need to register the Toolkit at the top of your page like so:

<%@ Register Assembly="AjaxControlToolkit" 
Namespace="AjaxControlToolkit" 
TagPrefix="ajaxToolkit" %>

Now with all that out of the way, lets do some animatin’.

Now you see me, now you don’t
To get a good feel of the tool lets start with something simple…a Fade.

The first thing you need for a fade is something to actually fade. This can be just about anything as long as it has “runat=server” somewhere in the control and an ID. You can use an ASP.NET server control if you wish, but lets start with a simple div.

<div id="fadeMe" runat="server">
    Please fade me
</div>

Ok, so now that we have something to actually fade, lets get to the actual control.

<ajaxToolkit:AnimationExtender id="aexDemo" runat="server" TargetControlID="fadeMe" >
    <Animations>
        <OnLoad>
            <Sequence>
                <FadeIn  Fps="30" Duration=".25" AnimationTarget="fadeMe" />
                <FadeOut  Fps="30" Duration=".25" AnimationTarget="fadeMe" />
            </Sequence>
        </OnLoad>
    </Animations>
</ajaxToolkit:AnimationExtender>

Whew…that looks a bit complicated, but it really isn’t too bad. Lets break it down.

On the first line you see the standard id and runat properties. Nothin’ special there, but just after you see TargetControlID. What is that? Simply put, that is how you tell the AEx which control triggers the animation. This can be the same or different than the control that is doing the animation. Either way the property correlates to the control’s ID property. Many times this will be a link or a button of some sort, but in our little demo we will leave them the same.

Animations - Inside of this guy is basically everything you want to happen during this animation.

OnLoad - This is the event that happens to the TargetControl to get everything moving. In our demo we are going to start the animation goodness when the div is loaded, but you can also set it to start OnClick, OnMouseOver, or OnMouseOut.

Sequence - This is an optional tag that is used only when you want more than one action to occur. In our case we want the div to both fade in, then fade out. To do both of these means we need the Sequence tag. If you only wanted to do a fade in, then Sequence is not necessary. Keep in mind that the sequence of events will go in the order the actions are in the Sequence tag.

Fade - The next two tags are our actual fade. First we fade in, then we fade out. Notice the 3 parameters:

• Fps is Frames Per Second, or how fast you want things to animate.
• Duration is how long you want things to animate. It is in seconds so in our case we want it to take 1/4 of a second per action.
• AnimationTarget is the ID of who is actually doing the animating. If you leave this guy out it assumes the TargetControl is doing the actions. I left it in here so we would have something to talk about, but it isn’t really necessary.

That’s it. Nothin’ too fancy…yet.

Parallel Processing
Take a look at this extender.

 <ajaxToolkit:AnimationExtender id="aexDemo2" runat="server" TargetControlID="div1" >
    <Animations>
        <OnClick>
            <Sequence>
                <Parallel Duration=".25">
                    <FadeOut Fps="30" AnimationTarget="div2" />
                    <FadeOut Fps="30" AnimationTarget="div3" />
                    <FadeOut Fps="30" AnimationTarget="div4" />
                </Parallel>
                <FadeIn Duration=".25" Fps="30" AnimationTarget="div1" />
            </Sequence>
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>

This guy looks pretty close to the first one, but there is that whole Parallel thing. What is that about?

As you might have guessed, sometimes you want to animate multiple controls at the same time. This is where Parallel comes into play. In our little demo I have div 2, 3, and 4 all fading away at the exact same time. Notice that the Duration property is on the Parallel tag and not on the individual actions. This makes sure that all three actions take the exact same amount of time (.25 seconds in our case).

After the Parallel tag you see that there is another action there to fade in div1. Since it is after the Parallel tag, it will only occur after the other three divs fade away.

Sweet.

Goin’ Scriptin’
So what if you want to go crazy and do some really custom stuff? Ya know, like use some custom Javascript or something. Enter the ScriptAction. Take a look.

<ajaxToolkit:AnimationExtender id="aexDemo3" runat="server" TargetControlID="div5" >
    <Animations>
        <OnLoad>
            <Sequence>
                <ScriptAction Script="MyFunction();" />
                <FadeIn  Fps="30" Duration=".25" />
            </Sequence>
        </OnLoad>
    </Animations>
</ajaxToolkit:AnimationExtender>

The AEx above looks just about the same except for the ScriptAction tag. Its job is to point to a custom javascript function. Script is the property you use to state what javascript you want to run. This can be a custom function, or something as simple as alert(’hi’);

Working Example
One of the things I ran into when making my site was the fadein wasn’t working the way I wanted it to. My text was already visible, so it would flicker some. To get around this I made some javascript that played with the CSS visibility property. This little trick comes in handy when transitioning between animations. Lets see what the final example looks like.

First the HTML

<div id="divHome" runat="server" style="visibility: hidden">
This is my cool div
</div>

Notice the style. Now normally I would use a CSS class, but for this example that is overkill. The point here is to make sure the div is hidden initially.

Now the AEx

<ajaxToolkit:AnimationExtender id="aexInitial" runat="server" TargetControlID="divHome" >
    <Animations>
        <OnLoad>
            <Sequence>
                <ScriptAction Script="InitialLoad();" />
                <FadeIn  Fps="30" Duration=".25" />
            </Sequence>
        </OnLoad>
    </Animations>
</ajaxToolkit:AnimationExtender>

Finally the Javascript

<script language="javascript" type="text/javascript">
    function InitialLoad()
    {
        var home = document.getElementById("divHome");
        home.style.visibility="visible";        
    }
</script>

Put it all together and you have a working example. If you would rather I put it together for you then just download it right here.

There could be another way to do the same thing…in fact I am sure there is…but this way is relatively simple and shouldn’t give even the newest programmer too much heartburn.

One last REALLY important note. Notice how I am monkeying around with the CSS visibility property rather than display. The reason for that is IE gets a bit wonky when messing with display. Safari and Firefox work just fine with it, but IE sometimes doesn’t recognize display:block when using the AnimationExtender. In a simple example like this it will probably work either way, but I ran into that wall when I was doing parallel fades and such so I just changed it everywhere. Just something to keep in mind.

So now that you have your overview you are hungry for more right? Well, like I said, the documentation leaves a bit to be desired, but here it is.

MS Toolkit example - this example was a bit over my head when I was starting out.

Using Animations - this one is a bit better and shows some of what is possible with the AEx.

Animation Reference - if you are getting really fancy and building animations in javascript, this will help you out.

So there is your overview. If you build something cool with it let me know!