We  will talk about how to use the MS-Ajax Animation Framework without any server-side code.

The sample completely illustrates how to instantiate and use the Animation Controls by including the proper script references.

1) Include the following scripts in your HTML Page

MicrosoftAjax.js  ( download from Here )

Timer.js ( downlod from Here )

BaseScripts.js

Common.js

Animations.js

AnimationBehavior.js

Actual HTML 



<script src="ClientScripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="ClientScripts/Timer.js" type="text/javascript"></script>
<script src="ClientScripts/BaseScripts.js" type="text/javascript"></script>
<script src="ClientScripts/Animations.js" type="text/javascript"></script>
<script src="ClientScripts/Common.js" type="text/javascript"></script>
<script src="ClientScripts/AnimationBehavior.js" type="text/javascript"></script>







2) Call the "Initialize()" function to initialize the Scripts in the HTML Page.




<script type="text/javascript"> 
<!--
Sys.Application.initialize();
-->
</script>



 
3) Create  your animation using the $create Method or use the Static methods of the Animation Library to create animations.
Sample HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Animation Repro</title>
</head>
<body>

    <script src="ClientScripts/MicrosoftAjax.debug.js" type="text/javascript"></script>

    <script src="ClientScripts/Timer.js" type="text/javascript"></script>

    <script src="ClientScripts/MicrosoftAjaxWebForms.debug.js" type="text/javascript"></script>

    <script src="ClientScripts/BaseScripts.js" type="text/javascript"></script>

    <script src="ClientScripts/Animations.js" type="text/javascript"></script>

    <script src="ClientScripts/Common.js" type="text/javascript"></script>

    <script src="ClientScripts/AnimationBehavior.js" type="text/javascript"></script>

    <input type="button" onclick="Expand(event)" value="Expand" style="display: block"
        id="btnExpand" />
    <input type="button" onclick="Contract(event)" value="Contract" style="display: none"
        id="btnContract" />
    <div id="popup" style="display: block; cursor: hand; background-color: #ffcc00; height: 100px;
        width: 200px;" title="click to hide">
        <table style="width: 100%; height: 100%;">
            <tr>
                <td style="text-align: center; vertical-align: middle;">
                    TEST
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">


<!--

Sys.Application.initialize();

function Contract(eventArgument) {

   //Hack for FireFox
    if( eventArgument == null )
    {
        eventArgument = event;
    }
    $get("btnExpand").style.display = "block";
    $get("btnContract").style.display = "none";
    
    //ResizeAnimation.play(target, duration, fps, width, height, unit);
    AjaxControlToolkit.Animation.ResizeAnimation.play($get("popup"), 0.3 , 25 , 200 , 100 , "px" );

}

function Expand(eventArgument) {

//Hack for FireFox 
    if( eventArgument == null )
    {
        eventArgument = event;
    }
    
    $get("btnExpand").style.display = "none";
    $get("btnContract").style.display = "block";
    
    //ResizeAnimation.play(target, duration, fps, width, height, unit);
    AjaxControlToolkit.Animation.ResizeAnimation.play($get("popup"), 0.3 , 25 , 400 , 400 , "px" );
    
    
}
-->
    </script>

</body>
</html>






 
Check out the Sample Attached to get a feel of how this works.
Any questions/comments are welcome