Version 1.4 glow.anim
API Quick Reference
JavaScript is required to use the quick reference
Simple and powerful animations.
Further Info & Examples
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
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();- fadeIn
Fade in a NodeList by the default duration of 0.5 seconds.
Synopsis
glow.anim.fadeIn(selector, duration, opts);Parameters
- selector
- Type
- String
NodeList
- duration
- Type
- Number
fade in duration, in seconds by default.
- opts
- Type
- Function
Object
- onComplete
The function to be called when the first element in the NodeList completes the animation.
- Type
- Function
- Optional
- Yes
- onStart
The function to be called when the first element in the NodeList starts the animation.
- Type
- Function
- Optional
- Yes
- tween
The way the value moves through time. See glow.tweens.
- Type
- Function
- Default
- easeBoth tween
- Optional
- Yes
Example
glow.anim.fadeIn(myNodeList);- fadeOut
Fade out a NodeList by the default duration of 0.5 seconds.
Synopsis
glow.anim.fadeOut(selector, duration, opts);Parameters
- selector
- Type
- String
CSS selector
- duration
- Type
- Number
fade out duration, in seconds by default.
- opts
- Type
- Function
Object
- onComplete
The function to be called when the first element in the NodeList completes the animation.
- Type
- Function
- Optional
- Yes
- onStart
The function to be called when the first element in the NodeList starts the animation.
- Type
- Function
- Optional
- Yes
- tween
The way the value moves through time. See glow.tweens.
- Type
- Function
- Default
- easeBoth tween
- Optional
- Yes
Example
glow.anim.fadeOut(myNodeList);- fadeTo
Fade a NodeList to a set opacity by the default duration of 0.5 seconds.
Synopsis
glow.anim.fadeTo(selector, opacity, duration, opts);Parameters
- selector
- Type
- String
NodeList
- opacity
- Type
- Number
fade to opacity level between 0 & 1.
- duration
- Type
- Number
fadeTo duration, in seconds by default.
- opts
- Type
- Function
Object
- onComplete
The function to be called when the first element in the NodeList completes the animation.
- Type
- Function
- Optional
- Yes
- onStart
The function to be called when the first element in the NodeList starts the animation.
- Type
- Function
- Optional
- Yes
- tween
The way the value moves through time. See glow.tweens.
- Type
- Function
- Default
- easeBoth tween
- Optional
- Yes
Example
glow.anim.fadeTo(myNodeList);- highlight
Highlight a NodeList background colour from default (#ffff99) to the
Synopsis
glow.anim.highlight(selector, highlightColour, duration, opts);Parameters
- selector
- Type
- String
NodeList
- highlightColour
- Type
- String
highlight colour in hex (default is #ffff99).
- duration
- Type
- Number
highlight duration, in seconds by default.
- opts
- Type
- Function
Object
- completeColour
The background colour of the element once the highlight is complete.
- Type
- Function
- Optional
- Yes
If none supplied Glow assumes the element's existing background color (e.g. #336699), if the element has no background color specified (e.g. Transparent) the highlight will transition to white and reset the element to transparent once all the NodeList highlights have completed
- onComplete
The function to be called when the first element in the NodeList completes the animation.
- Type
- Function
- Optional
- Yes
- onStart
The function to be called when the first element in the NodeList starts the animation.
- Type
- Function
- Optional
- Yes
- tween
The way the value moves through time. See glow.tweens.
- Type
- Function
- Default
- easeBoth tween
- Optional
- Yes
Description
element's original color at the default duration of 0.5 seconds.
Example
glow.anim.highlight(myNodeList);- slideDown
Slide a NodeList down from a height of 0 by the default duration of 0.5 seconds.
Synopsis
glow.anim.slideDown(selector, duration, opts);Parameters
- selector
- Type
- String
CSS selector
- duration
- Type
- Number
slide up duration, in seconds by default.
- opts
- Type
- Function
Object
- onComplete
The function to be called when the first element in the NodeList completes the animation.
- Type
- Function
- Optional
- Yes
- onStart
The function to be called when the first element in the NodeList starts the animation.
- Type
- Function
- Optional
- Yes
- tween
The way the value moves through time. See glow.tweens.
- Type
- Function
- Default
- easeBoth tween
- Optional
- Yes
Example
glow.anim.slideDown(myNodeList);- slideToggle
Toggle a NodeList Up or Down depending on it's present state by the default duration of 0.5 seconds.
Synopsis
glow.anim.slideToggle(selector, duration, opts);Parameters
- selector
- Type
- String
CSS selector
- duration
- Type
- Number
slide duration, in seconds by default.
- opts
- Type
- Function
Object
- onComplete
The function to be called when the first element in the NodeList completes the animation.
- Type
- Function
- Optional
- Yes
- onStart
The function to be called when the first element in the NodeList starts the animation.
- Type
- Function
- Optional
- Yes
- tween
The way the value moves through time. See glow.tweens.
- Type
- Function
- Default
- easeBoth tween
- Optional
- Yes
Example
glow.anim.slideToggle(myNodeList);- slideUp
Slide a NodeList up to a height of 0 by the default duration of 0.5 seconds.
Synopsis
glow.anim.slideUp(selector, duration, opts);Parameters
- selector
- Type
- String
CSS selector
- duration
- Type
- Number
slide up duration, in seconds by default.
- opts
- Type
- Function
Object
- onComplete
The function to be called when the first element in the NodeList completes the animation.
- Type
- Function
- Optional
- Yes
- onStart
The function to be called when the first element in the NodeList starts the animation.
- Type
- Function
- Optional
- Yes
- tween
The way the value moves through time. See glow.tweens.
- Type
- Function
- Default
- easeBoth tween
- Optional
- Yes
Example
glow.anim.slideUp(myNodeList);
