Version 1.5 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
- | glow.dom.NodeList |
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
Animation duration, in seconds by default.
- spec
-
- Type
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
Optional options object.
- tween
-
The way the value moves through time. See glow.tweens.
- Type
- Default
- linear tween
- Optional
- Yes
- useSeconds
-
Specifies whether duration should be in seconds rather than frames.
- Type
- 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" : 0, "opacity" : 0 }).start(); - fadeIn
-
Fade in a set of elements
Synopsis
glow.anim.fadeIn(element, duration, opts);Parameters
- element
-
- Type
- | glow.dom.NodeList
Element to animate. CSS Selector can be used.
- duration
-
- Type
Animation duration in seconds.
- opts
-
- Type
Object
- onComplete
-
The function to be called when the first element in the NodeList completes the animation.
- Type
- Optional
- Yes
- onStart
-
The function to be called when the first element in the NodeList starts the animation.
- Type
- Optional
- Yes
- tween
-
The way the value moves through time. See glow.tweens.
- Type
- Default
- easeBoth tween
- Optional
- Yes
Returns
A started timeline
Example
glow.anim.fadeIn("#menu", 1); - fadeOut
-
Fade out a set of elements
Synopsis
glow.anim.fadeOut(element, duration, opts);Parameters
- element
-
- Type
- | glow.dom.NodeList
Element to animate. CSS Selector can be used.
- duration
-
- Type
Animation duration in seconds.
- opts
-
- Type
Object
- onComplete
-
The function to be called when the first element in the NodeList completes the animation.
- Type
- Optional
- Yes
- onStart
-
The function to be called when the first element in the NodeList starts the animation.
- Type
- Optional
- Yes
- tween
-
The way the value moves through time. See glow.tweens.
- Type
- Default
- easeBoth tween
- Optional
- Yes
Returns
A started timeline
Example
glow.anim.fadeOut("#menu", 1); - fadeTo
-
Fade a set of elements to a given opacity
Synopsis
glow.anim.fadeTo(element, opacity, duration, opts);Parameters
- element
-
- Type
- | glow.dom.NodeList
Element to animate. CSS Selector can be used.
- opacity
-
- Type
fade to opacity level between 0 & 1.
- duration
-
- Type
Animation duration in seconds.
- opts
-
- Type
Object
- onComplete
-
The function to be called when the first element in the NodeList completes the animation.
- Type
- Optional
- Yes
- onStart
-
The function to be called when the first element in the NodeList starts the animation.
- Type
- Optional
- Yes
- tween
-
The way the value moves through time. See glow.tweens.
- Type
- Default
- easeBoth tween
- Optional
- Yes
Returns
A started timeline
Example
glow.anim.fadeTo("#menu", 0.5, 1); - highlight
-
Highlight an element by fading the background colour
Synopsis
glow.anim.highlight(element, highlightColour, duration, opts);Parameters
- element
-
- Type
- | glow.dom.NodeList
Element to animate. CSS Selector can be used.
- highlightColour
-
- Type
highlight colour in hex, "rgb(r, g, b)" or css colour name.
- duration
-
- Type
Animation duration in seconds.
- opts
-
- Type
Object
- completeColour
-
The background colour of the element once the highlight is complete.
- Type
- 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.
- onComplete
-
The function to be called when the first element in the NodeList completes the animation.
- Type
- Optional
- Yes
- onStart
-
The function to be called when the first element in the NodeList starts the animation.
- Type
- Optional
- Yes
- tween
-
The way the value moves through time. See glow.tweens.
- Type
- Default
- easeBoth tween
- Optional
- Yes
Returns
A started timeline
Example
glow.anim.highlight("#textInput", "#ff0", 1); - slideDown
-
Slide a NodeList down from a height of 0
Synopsis
glow.anim.slideDown(element, duration, opts);Parameters
- element
-
- Type
- | glow.dom.NodeList
Element to animate. CSS Selector can be used.
- duration
-
- Type
Animation duration in seconds.
- opts
-
- Type
Object
- onComplete
-
The function to be called when the first element in the NodeList completes the animation.
- Type
- Optional
- Yes
- onStart
-
The function to be called when the first element in the NodeList starts the animation.
- Type
- Optional
- Yes
- tween
-
The way the value moves through time. See glow.tweens.
- Type
- Default
- easeBoth tween
- Optional
- Yes
Returns
A started timeline
Example
glow.anim.slideDown("#menu", 1); - slideToggle
-
Toggle a NodeList Up or Down depending on it's present state.
Synopsis
glow.anim.slideToggle(element, duration, opts);Parameters
- element
-
- Type
- | glow.dom.NodeList
Element to animate. CSS Selector can be used.
- duration
-
- Type
Animation duration in seconds.
- opts
-
- Type
Object
- onComplete
-
The function to be called when the first element in the NodeList completes the animation.
- Type
- Optional
- Yes
- onStart
-
The function to be called when the first element in the NodeList starts the animation.
- Type
- Optional
- Yes
- tween
-
The way the value moves through time. See glow.tweens.
- Type
- Default
- easeBoth tween
- Optional
- Yes
Returns
A started timeline
Example
glow.anim.slideToggle("#menu", 1); - slideUp
-
Slide a NodeList up to a height of 0
Synopsis
glow.anim.slideUp(element, duration, opts);Parameters
- element
-
- Type
- | glow.dom.NodeList
Element to animate. CSS Selector can be used.
- duration
-
- Type
Animation duration in seconds.
- opts
-
- Type
Object
- onComplete
-
The function to be called when the first element in the NodeList completes the animation.
- Type
- Optional
- Yes
- onStart
-
The function to be called when the first element in the NodeList starts the animation.
- Type
- Optional
- Yes
- tween
-
The way the value moves through time. See glow.tweens.
- Type
- Default
- easeBoth tween
- Optional
- Yes
Returns
A started timeline
Example
glow.anim.slideUp("#menu", 1);
