Client Side Animations

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Client Side Animations

Shortcuts

Previous Next

Last post 07-25-2007 1:02 PM by Phanatic. 15 replies.

Sort Posts:

Client Side Animations

09-29-2006, 4:54 AM

Contact

22 point Member
mattdurrant
Member since 09-05-2006, 2:05 PM
Guildford
Posts 5

There are plenty of examples on using the new animations server side with the UpdatePanelAnimateExtender, but I can't seem to find any help on creating a new animation client side through javascript. The animation reference page is helpful but could someone provide a working example? At the moment I keep getting 'AtlasControlToolkit' is not defined errors when trying to create a ColorAnimation.

Re: Client Side Animations

10-05-2006, 5:57 PM

Contact

4,198 point Contributor
Ted Glaza [MSFT]
Member since 04-12-2006, 11:51 PM
Microsoft
Posts 847

Hi mattdurrant,

Here's a simple example:

<%@ Page Language="C#" %>
<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<!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 runat="server"><title>Test Page</title></head>
<body><form runat="server"><div>
    <atlas:ScriptManager runat="server" />
    <atlasToolkit:AnimationExtender runat="server" />
    <button onclick="playAnimation();">Animate</button><br />
    <div id="myDiv">Content</div>
    
    
    <script type="text/javascript">
        function playAnimation()
        {
            AtlasControlToolkit.Animation.ScaleAnimation.play(
                new Sys.UI.Control($('myDiv')), .5, 20, 5, 'px', false, true, 'pt');
        }
    </script>
</div></form></body>
</html>

If you're getting errors about AtlasControlToolkit not being defined, it's because you're trying to use it before the scripts have loaded.

Thanks,
Ted

This posting is provided "AS IS" with no warranties, and confers no rights.

Filed under: Animation

Re: Client Side Animations

10-30-2006, 2:51 PM

Contact

635 point Member
Inventisity
Member since 03-02-2006, 1:48 PM
Posts 129

Does the same thing work for Beta as well?

I included <ajaxToolkit:AnimationExtender runat="server"></ajaxToolkit:AnimationExtender>

and it is giving me an error: "System.InvalidOperationException: The TargetControlID of '' is not valid. The value cannot be null or empty."

Thanks.

Re: Client Side Animations

10-30-2006, 2:54 PM

Contact

635 point Member
Inventisity
Member since 03-02-2006, 1:48 PM
Posts 129

Posted too soon :)

This works: <ajaxToolkit:AnimationExtender runat="server" ID="AnimationReference"></ajaxToolkit:AnimationExtender>

forgot to set the ID :)

Re: Client Side Animations

10-30-2006, 3:04 PM

Contact

635 point Member
Inventisity
Member since 03-02-2006, 1:48 PM
Posts 129

althougth the page loads up fine now, have to add TargetControlID and reference an empty ASPPanel to get it to work, but the following doesnt work

HTML:

Javascript on a Click Event:

var _faveThingCTRL = new Sys.UI.Control($get('faveThing'));
AjaxControlToolkit.Animation.FadeOutAnimation.play(_faveThingCTRL, 30, 5, 10, 80, true);

Object of type "Object" cannot be converted to type AjaxControlTolkit.Animation.FadeOutAnimation;. Parameter name: instance

Anyone know why?

Thanks.

Re: Client Side Animations

10-30-2006, 4:39 PM

Contact

Answer

4,346 point Contributor
sburke_msft
Member since 04-04-2006, 3:28 PM
Redmond, WA
Posts 770

Don't create a new control. Just pass an element:

AjaxControlToolkit.Animation.FadeOutAnimation.play($get('faveThing'), 30, 5, 10, 80, true);

Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.

Re: Client Side Animations

10-30-2006, 5:11 PM

Contact

635 point Member
Inventisity
Member since 03-02-2006, 1:48 PM
Posts 129

Thanks for the response, but I got the same error.

Line: 603

Error: Sys.ArgumentTypeException Object of type 'Object; cannot be converted to type 'AjaxControlToolkit.Animation.FadeOutAnimation'

Parameter name: instance

Re: Client Side Animations

10-31-2006, 8:47 AM

Contact

635 point Member
Inventisity
Member since 03-02-2006, 1:48 PM
Posts 129

is there anyone that gotten the animation to work ? :)

Re: Client Side Animations

11-03-2006, 8:04 AM

Contact

15 point Member
daka
Member since 10-30-2006, 1:37 PM
Posts 3

Anyone please!

Re: Client Side Animations

12-04-2006, 9:58 PM

Contact

4,198 point Contributor
Ted Glaza [MSFT]
Member since 04-12-2006, 11:51 PM
Microsoft
Posts 847

Hi daka,

You're trying this code:
AjaxControlToolkit.Animation.FadeOutAnimation.play($get('faveThing'), 30, 5, 10, 80, true);
and it's not working?

Thanks,
Ted

This posting is provided "AS IS" with no warranties, and confers no rights.