HI

A new toolkit of ATLAS has released. The Latest thing in Atlas’s great collection of control is Animation. So that’s what I tried my hand upon first-up. You can use the Animation control to add animation to your website. I have added a little animation to the site and will be adding more. There are two new buttons in the left bar “Animate the Left Bar” and “Animate the Main Blog”. When you click the button you will see animation on the site on the left button and the main blog respectively. I should thanks (Farghana again) for the color for animation. This is my first look at the Animation. I will be adding more animation to the site.

The best thing about adding animation to my site using ATLAS is how simple it is. It hardly took me any time to add this animation (Although the animation is not very hi-fi). While here is the code for it and the explanation of it. On how to add Atlas controls to your toolbox look at this post.

<atlasToolkit:AnimationExtender ID="Example5B" runat="server">
     <atlasToolkit:AnimationProperties TargetControlID="Example5A">
                <Animations>
                <OnClick>
                    <Sequence>
                        <EnableAction Enabled="false" />
                        <Color AnimationTarget="PanelOrDIV"
                            Duration="1"
                            StartValue="#FFFFEF"
                            EndValue="#5E7063"
                            Property="style"
                           PropertyKey="backgroundColor"/>
                      <Color AnimationTarget="PanelOrDIV "
                            Duration="1"
                            StartValue="#5E7063"
                            EndValue="#FFFFFF"
                            Property="style"
                           PropertyKey="backgroundColor"/>
                        <EnableAction Enabled="true" />
                    </Sequence>
                </OnClick>
                </Animations>
     </atlasToolkit:AnimationProperties>
</atlasToolkit:AnimationExtender>

For creating the animation I have used Animation Extender. We add a AnimationProperties to the extender (I had to add 2 property since I am using 2 different animation). Then specify the event on which the animation will take place and the sequence of the animation. Here I have added animation of the background colour of the Division. we Have to specify the duration, Start colour, end colour, the property to work on and the propery value to change. I have added two sequence so that the colour comes back to the original colour.

This is all you need to do at add animation to your site.

Hope this helps
Thanks
Vikram