Animation Control , Adding Cool Animations in your application, Scenario 1

See Demo here


1) Register the AjaxControlToolkit  in your page

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
2) Add a Script Manager 

   1: <!-- Mandatory Script Manager Control-->
   2: <asp:ScriptManager ID="ScriptManager1" runat="server">
   3: </asp:ScriptManager>
3) Add  A Server Side Control to attach the Animation to ( We will discuss how to bind Client Side Elements later ).
<!-- Image to Animate--><asp:Image Visible="false" runat="server" ID="imgThumbNail1" 
 ImageUrl="thumbNails/Second_Dimension_by_celsojunior.jpg" />
4) Declare Your Animation Control Extender Instance 
<!-- Markup For the Animation Extender Control--> 
<cc1:AnimationExtender ID="animationExtendThumbNail1"    runat="server" TargetControlID="imgThumbNail1">   
5) The TargetControlID is the ID of the Control which you want to animate , it has to be a Server-Side Control .
6) Define Your Animation Elements, include the "Animations" Tag
7) Now , lets make our image move to a spicific point in the page , such as Left=300,Top=400 , when the Image is clicked.
   To Cause UI elements to move , we need to use the <Move> animation Tag .
   For a complete Reference of animations , go Here . 

        <Move Duration=".2"  horizontal="300" vertical="400" relative="false" Unit="px"  />
8) The "Duration" attribute specifies the timespan in which the animation has to be completed, its measured in Seconds.
9) "Unit"  specifies the unit by which the Control  has to move .
10) Now , lets say that you want the Image Control to move by Left =300 and Top = 400  from its current Position , then you gotta set the 
    "relative"  attribute to "true".By default its "false".
11) End Tags
12) Lets look at the "imgThumbNail" CssClass

   1: .imgThumbNail
   2: {
   3:    position:absolute;
   4:    height: 110px;
   5:    width: 100px;
   6:    cursor: hand;
   7: }
13) Any Control  that has to be animated using the MOVE animation HAS to Have the "Position" attribute set to "absolute" 
    because the Control has to be positioned absolutely to move on the screen.
There you go !
Click on the Image Control and see the Image move !
Comments (6)

  1. Using the Animation Control in your ATLAS Web Site , Scenario 2 Assigning Animations to Client-Side Controls

  2. You’ve been kicked (a good thing) – Trackback from

  3. Wat , no clickable demo ? , thats just a tease .. 🙂

  4. Lo leí en DotnetKicks y me pareció interesante contárselos a todos. Pronto saldrán muchos más artículos

  5. Animation Control: Agregando animaciones a tu aplicaci

  6. Stickler says:

    hi i really liked the way u hv demonstrated…PhaniRajuYN, i want the effect that video in this link has …i.e when we click on menu it show the content and and when clicked back it collapses back…i trie this with collapsible panel but it pushes all my contents down if u can help me creat the effect as is in videofor menu and play list…