From ProtoScript

Contents 1 YUI:Animate Behavior 1.1 Example 1.2 Attributes 1.2.1 Numeric Attributes 1.3 Callbacks 1.4 Demos

YUI:Animate Behavior

Adds a generic animation to the selected element or elements

Example

$proto('img#avatar', {
  Animate: {
     height: {to: 100},
     width : {to: 100},
     duration: 0.5
  },
  onComplete: {
    Fade: {
      opacity: {to: 0}
    }
  }
});

Animate from the current width and height to a width and height of 100 pixels in 0.5 seconds. When the animation is complete, fade the avatar to an opacity of zero (transparent).

Attributes

Name	Description	Default	Valid Values	Example
target	Selected element or elements to attach the behavior to. If no value supplied, use the last targeted element. If value is supplied, use the element(s) selected by the target instead. See Element Scope	String value denoting an interface element.	Inherited from parent behavior	target: '#avatar'
duration	How long the animation should last	0.5	Value from 0.0 to 1.0. 0.0 denotes fully transparent. 1.0 denotes fully opaque.	Animate: { opacity: { from:1.0, to:0.5 } } - fade to halfway transparent
method	The animation method to use for easing transitions.	YAHOO.util.Easing.easeOut	YAHOO.util.Easing.backBoth, YAHOO.util.Easing.backIn, YAHOO.util.Easing.backOut, YAHOO.util.Easing.bounceBoth, YAHOO.util.Easing.bounceIn, YAHOO.util.Easing.bounceOut, YAHOO.util.Easing.easeBoth, YAHOO.util.Easing.easeBothStrong, YAHOO.util.Easing.easeIn, YAHOO.util.Easing.easeInStrong, YAHOO.util.Easing.easeNone, YAHOO.util.Easing.easeOut, YAHOO.util.Easing.easeOutStrong, YAHOO.util.Easing.elasticBoth, YAHOO.util.Easing.elasticIn, YAHOO.util.Easing.elasticOut	Animate: { opacity: { from:1.0, to:0.5 } } - fade to halfway transparent
opacity	Animate the opacity (for fade up or down)	no default	Value from 0.0 to 1.0. 0.0 denotes fully transparent. 1.0 denotes fully opaque.	Animate: { opacity: { from:1.0, to:0.5 } } - fade to halfway transparent
borderWidth	Animate the border width	no default	Valid numeric animation attribute. See section below.	Animate: { borderWidth: { from:1, to:8, unit:'px' } }
bottom	Animate the bottom position	no default	Valid numeric animation attribute. See section below.	Animate: { bottom: { from:100, to:800, unit:'px' } } - drop the element from 100px to 800px
fontSize	Animate the font size	no default	Valid numeric animation attribute. See section below.	Animate: { fontSize: { from:10, to:24, unit:'pt' } } - animate the font changing from 10pt to 24pt
left	Animate the left position	no default	Valid numeric animation attribute. See section below.	Animate: { left: { by:80, unit:'px' } } - move the object right by 80 pixels
right	Animate the right position	no default	Valid numeric animation attribute. See section below.	Animate: { right: { by:10, unit:'em' } } - move the object's right side by 10 ems
top	Animate the top position	no default	Valid numeric animation attribute. See section below.	Animate: { borderWidth: { from:10, to:80, unit:'px' } } - move the element down from 10px to 80px
margin	Animate the margin	no default	Valid numeric animation attribute. See section below.	Animate: { margin: { from:1, to:4, unit:'px' } } - animate the margin changing from 1px to 4px
width	Animate the width	no default	Valid numeric animation attribute. See section below.	Animate: { height: { by:100, unit:'px' } } - grow the element's width by 100 px.
height	Animate the height	no default	Valid numeric animation attribute. See section below.	Animate: { height: { by:100, unit:'px' } } - grow the element's height by 100 px.
lineHeight	Animate the line height	no default	Valid numeric animation attribute. See section below.	Animate: { borderWidth: { from:1, to:2, unit:'em' } } - animate from single to double spacing.
padding	Animate the padding space	no default	Valid numeric animation attribute. See section below.	Animate: { padding: { from:1, to:8, unit:'px' } } - animate adding more padding

Numeric Attributes

Numeric attribute	Valid Values	Description	Usage	Example
by	Any valid numeric for the given property.	Start at the property's current value, change BY this much.	Do not use with the TO attribute	{by: 100}
to	Any valid numeric for the given property.	Start at the property's current value, go TO this value.	Do not use with the BY attribute	{to: 100}
from	Any valid numeric for the given property.	Ignore current value; start FROM this value.		{from: 100}
unit	The unit to use for to, from or by attributes	Any legal numeric unit (eg., 'px', 'pt', 'em', '%').		{unit: 'em'}

Callbacks

Name	Description
onStart	Called when the animation starts.
onTween	Called on each frame of the animation.
onComplete	Called when the animation completes.

Demos

See Animate Demo