Please turn on JavaScript. To find out how to do this visit the WebWise JavaScript guide.

Simple and powerful animations.

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.

destroyOnComplete

Destroy the animation once it completes?

Type
Boolean
Default
false
Optional
Yes

This will free any DOM references the animation may have created. Once the animation completes, you won't be able to start it again.

onComplete

Shortcut for adding a "complete" event listener

Type
Function
Optional
Yes
onFrame

Shortcut for adding a "frame" event listener

Type
Function
Optional
Yes
onResume

Shortcut for adding a "resume" event listener

Type
Function
Optional
Yes
onStart

Shortcut for adding a "start" event listener

Type
Function
Optional
Yes
onStop

Shortcut for adding a "stop" event listener

Type
Function
Optional
Yes
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" : 0,
  "opacity" : 0
}).start();
fadeIn

Fade in a set of elements

Synopsis

glow.anim.fadeIn(element, duration, opts);

Parameters

element
Type
String | glow.dom.NodeList

Element to animate. CSS Selector can be used.

duration
Type
Number

Animation duration in seconds.

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

Returns

glow.anim.Timeline

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
String | glow.dom.NodeList

Element to animate. CSS Selector can be used.

duration
Type
Number

Animation duration in seconds.

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

Returns

glow.anim.Timeline

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
String | glow.dom.NodeList

Element to animate. CSS Selector can be used.

opacity
Type
Number

fade to opacity level between 0 & 1.

duration
Type
Number

Animation duration in seconds.

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

Returns

glow.anim.Timeline

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
String | glow.dom.NodeList

Element to animate. CSS Selector can be used.

highlightColour
Type
String

highlight colour in hex, "rgb(r, g, b)" or css colour name.

duration
Type
Number

Animation duration in seconds.

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.

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

Returns

glow.anim.Timeline

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
String | glow.dom.NodeList

Element to animate. CSS Selector can be used.

duration
Type
Number

Animation duration in seconds.

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

Returns

glow.anim.Timeline

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
String | glow.dom.NodeList

Element to animate. CSS Selector can be used.

duration
Type
Number

Animation duration in seconds.

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

Returns

glow.anim.Timeline

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
String | glow.dom.NodeList

Element to animate. CSS Selector can be used.

duration
Type
Number

Animation duration in seconds.

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

Returns

glow.anim.Timeline

A started timeline

Example

glow.anim.slideUp("#menu", 1);

Classes

Animation

Controls modifying values over time.

Timeline

Synchronises and chains animations.

Documentation generated by JsDoc Toolkit 2.1.0 on Thu Jul 07 2011 12:47:26 GMT+0100 (BST)

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.