Animating a panel using Ajax Animation Extender - Server Side

1) Add an UpdatePanel to your page which contains a panel that needs to be animated.

<%--Update panel having the panel to be animated --%>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Panel ID="Panel1" runat="server" CssClass="movingPanel">

Testing Animation

</asp:Panel>

</ContentTemplate>

</asp:UpdatePanel>

2) Add checkboxes that will be used to set Animations and 2 , one to set the animations and the other to initiate it

<asp:CheckBox ID="chkMove" runat="server" Text="Move" />

      <br />

      <asp:CheckBox ID="chkFade" runat="server" Text="Fade" />

      <br />

     <asp:CheckBox ID="chkPulse" runat="server" Text="Pulse" />

     <br />

     <asp:Button ID="btnMovePanel" runat="server" Text="Set Animations"

       OnClick="btnMovePanel_Click" Width="112px" />

        <asp:Button ID="btnAnimate" runat="server" Text="Animate"

      OnClick="btnAnimate_Click" OnClientClick = "return false" />

3) Add your AnimationExtender to your page and set the TargetControlID to the button that will initiate the animation.

<asp:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID = "btnAnimate">

<%--Leave the animations tag empty --%>

<Animations>

</Animations>

</asp:AnimationExtender>

4) Moving to the server side, we need to add the event for Button which will set the animations.

I created a StringBuilder object to store animations and then the selected to this stringbuilder object. The Animations object is then assigned to the AnimationExtender.Animations

protected void btnMovePanel_Click(object sender, EventArgs e)

{

      StringBuilder Animations = new StringBuilder("<OnClick>" +

      "<Sequence AnimationTarget = \"Panel1\">");

      if (chkMove.Checked)
           {

          Animations.Append("<Move Horizontal = \"100\" unit =\"px\" FPS = \"30\" /> ");
     }
     if (chkFade.Checked)
      {

           Animations.Append("<FadeOut FPS = \"30\"/>");

           Animations.Append("<FadeIn FPS = \"30\" />");
     }
      if (chkPulse.Checked)
     {
         Animations.Append("<Pulse Duration = \".1\" iterations = \"4\" />");
     }
       Animations.Append("</Sequence></OnClick>");

       this.AnimationExtender1.Animations = Animations.ToString();

}

You can obviously modify this code depending on your requirements.