Animation is just the extender control which will add animation to the page. Animation can be played through a number of events attached to it like OnMouseOver, OnMouseOut, OnClick and OnLoad raised by the target control.
You can learn more in my previous parts here:
There are a number of useful animation effects like fading, resizing, movement and much more.
Initial Code for implementation of animation.
- <asp:Panel Direction="NotSet" ID="socialmediaicons" runat="server">
-
- <asp:Image ID="imgflagpak" runat="server" ImageUrl="~/Images/Flag_Of_Pakistan-1969px.jpg" Width="500px" BorderColor="Black" BorderStyle="Dotted" BorderWidth="3px" />
-
- </asp:Panel>
-
- <div class="row">
-
- <div id="ajaxcontroltoolkitplaceholder">
-
- <ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="socialmediaicons">
-
- <Animations>
-
- <OnLoad>
-
- <Sequence>
-
- <Color Duration="3" StartValue="#FF3300" EndValue="#0033FF" Property="style" PropertyKey="color" />
-
- <OpacityAction AnimationTarget="imgAjax" Opacity="0.5" />
-
- </Sequence>
-
- </OnLoad>
-
- </Animations>
-
- </ajaxToolkit:AnimationExtender>
-
- </div>
Output
![]()
Now let’s discuss its properties
Properties
OnLoad
It can call animation as soon as the page load event fires.
- <asp:Panel Direction="NotSet" ID="socialmediaicons" runat="server">
-
- <asp:Image ID="imgflagpak" runat="server" ImageUrl="~/Images/Flag_Of_Pakistan-1969px.jpg" Width="500px" BorderColor="Black" BorderStyle="Dotted" BorderWidth="3px" />
-
- </asp:Panel>
-
- <div class="row">
-
- <div id="ajaxcontroltoolkitplaceholder">
-
- <ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="socialmediaicons">
-
- <Animations>
-
- <OnLoad>
-
- <Sequence>
-
- <Color Duration="3" StartValue="#FF3300" EndValue="#0033FF" Property="style" PropertyKey="color" />
-
- <OpacityAction AnimationTarget="imgAjax" Opacity="0.5" />
-
- </Sequence>
-
- </OnLoad>
-
- </Animations>
-
- </ajaxToolkit:AnimationExtender>
-
- </div>
Inside the Animations section we have declared OnLoad Server Property to initialize it on page load.
As you can see in the code we have used Sequence tag; also where we have declared multiple animation effects firstly it take three seconds and then it changes its opacity to 0.5 percent.
Check it out in action,
![]()
OnClick
The animation starts playing on button, image or any clickable thing.
- <OnClick>
-
- <Sequence>
-
- <Resize Width="2000" Height="150" />
-
- <FadeIn Duration="2" Fps="20" />
-
- </Sequence>
-
- </OnClick>
Code first resizes the picture and then fades in animation after a two second duration.
Output
![]()
OnMouseOver
Animation is played when mouse moves over the target control.
- <OnMouseOver>
-
- <Sequence>
-
- <Parallel AnimationTarget="imgflagpak" Duration="1">
-
- <FadeIn Duration="2" Fps="20" />
-
- </Parallel>
-
- </Sequence>
-
- </OnMouseOver>
See this in action,
![]()
OnMouseOut
Animation is played when mouse moves out of the target control.
- <OnMouseOut>
-
- <Sequence>
-
- <Parallel AnimationTarget="imgflagpak" Duration="1">
-
- <FadeIn Duration="2" Fps="20" />
-
- <Scale Duration="1" Fps="20" ScaleFactor="4.0" Center="true" />
-
- </Parallel>
-
- </Sequence>
-
- </OnMouseOut>
Output
![]()
OnHoverOver
Generic animation similar to OnMouseOver except it will stop the OnHoverOut animation before it plays
- <OnHoverOver>
-
- <Sequence>
-
- <FadeOut Duration="2" MinimumOpacity="0.5" MaximumOpacity="1" />
-
- <ScriptAction Script="alert('on hover over');" />
-
- </Sequence>
-
- </OnHoverOver>
Output
![]()
OnHoverOut
Generic animation similar to OnMouseOut except it will stop the OnHoverOver animation before it plays
- <OnHoverOut>
-
- <Sequence>
-
- <FadeOut Duration="2" MinimumOpacity="0.5" MaximumOpacity="1" />
-
- <ScriptAction Script="alert('on hover out');" />
-
- </Sequence>
-
- </OnHoverOut>
Output
![]()