Version 1.3 glow.anim

Methods

css

Animates CSS properties of an element.

Synopsis

glow.anim.css(element, duration, spec, opts);

Parameters

element

Type

String | glow.dom.NodeList | Element

Element to animate.

This can be a CSS selector (first match will be used), glow.dom.NodeList (first node will be used), or a DOM element.

duration

Type

Number

Animation duration, in seconds by default.

spec

Type

Object

An object describing the properties to animate.

This object should consist of property names corresponding to the CSS properties you wish to animate, and values which are objects with 'from' and 'to' properties with the values to animate between or a number/string representing the value to animate to.

If the 'from' property is absent, the elements current CSS value will be used instead.

See the spec example below for more information.

opts

Type

Object

Optional options object.

tween

The way the value moves through time. See glow.tweens.

Type

Function

Default

linear tween

Optional

Yes

useSeconds

Specifies whether duration should be in seconds rather than frames.

Type

Boolean

Default

true

Optional

Yes

Returns

glow.anim.Animation

Example

// an example of an spec object
{ "height": {from: "10px", to: "100px"}, "width": "100px", "font-size": {from: "0.5em", to: "1.3em"}
}

// animate an elements height and opacity to 0 from current values over 1 second
glow.anim.css("#myElement", 1, { "height" : {to:0}, "opacity" : {to:0}
}).start();

Classes

Animation

Controls modifying values over time.

Timeline

Synchronises and chains animations.