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

Synchronises and chains animations.

Constructor

new glow.anim.Timeline(channels, opts)

Parameters

channels
Type
Array | Array[]

An array of channels or a single channel.

A channel is defined as an array containing numbers, animations and functions.

Numbers indicate a number of seconds to wait before proceeding to the next item. Animations will be played, when the animation is complete the next item is processed. Functions will be called, then the next item is processed.

opts
Type
Object

An object of options.

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.

loop

Specifies whether the timeline loops.

Type
Boolean
Default
false
Optional
Yes

The "complete" event does not fire for looping animations.

onComplete

Shortcut for adding a "complete" 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

Examples

// in the simplest form, a timeline can be used to
// string multiple animations together:


// make our animations
var moveUp = glow.anim.css(myDiv, 2, {
  "top": {to:"0"}
});
var moveDown = glow.anim.css(myDiv, 1, {
  "top": {to:"100px"}
});
// string them together
new glow.anim.Timeline([moveUp, moveDown]).start();
// if you wanted a one second gap between the animations, the last line would be:
new glow.anim.Timeline([moveUp, 1, moveDown]).start();
// you can run animations simutainiously with multiple channels.
new glow.anim.Timeline([
  [moveDivUp, 1, moveDivDown],
  [moveListDown, 1, moveListUp]
]).start();

Properties

duration

Length of the animation in seconds

Type
Number
loop

Inidcates whether the timeline loops.

Type
Boolean

Description

The "complete" event does not fire for looping animations. This can be set while a timeline is playing.

Methods

destroy

Destroys the timeline & animations within it

Synopsis

myTimeline.destroy();

Returns

this

Description

Call this on timeline you no longer need to free memory.

goTo

Go to a specific point in the timeline

Synopsis

myTimeline.goTo(pos);

Parameters

pos
Type
Number | glow.anim.Animation

Position in the timeline to go to.

You can go to a specific point in time (in seconds) or provide a reference to a particular animation to begin at.

Returns

this

Example

var myTimeline = new glow.anim.Timeline([anim1, anim2]);

//start the Timeline 2.5 seconds in
myTimeline.goTo(2.5).resume();
var myTimeline = new glow.anim.Timeline([anim1, anim2]);

//start the Timeline from anim2
myTimeline.goTo(anim2).resume();
isPlaying

Returns true if the timeline is playing.

Synopsis

myTimeline.isPlaying();

Returns

resume

Resumes the timeline from wherever it was stopped.

Synopsis

myTimeline.resume();

Returns

this

start

Starts playing the timeline from the beginning.

Synopsis

myTimeline.start();

Returns

this

stop

Stops the timeline.

Synopsis

myTimeline.stop();

Returns

this

Events

start

Fired when the timeline is started from the beginning.

Synopsis

glow.events.addListener(myTimeline, "start", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Description

This event will also trigger during each loop of a looping animation. If your listener prevents the default action (for instance, by returning false) the timeline will not start.

Example

var myTimeline = new glow.anim.Timeline([anim1, anim2]);
glow.events.addListener(myTimeline, "start", function() {
  alert("Started timeline");
});
myTimeline.start();
stop

Fired when the timeline is stopped before its end.

Synopsis

glow.events.addListener(myTimeline, "stop", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Description

If your listener prevents the default action (for instance, by returning false) the timeline will not stop.

complete

Fired when the timeline ends.

Synopsis

glow.events.addListener(myTimeline, "complete", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Description

This event does not fire on looping timelines.

resume

Fired when the timeline resumes after being stopped.

Synopsis

glow.events.addListener(myTimeline, "resume", function(event) {
    // ...
});

Arguments

event
Type
glow.events.Event

Event Object

Description

If your listener prevents the default action (for instance, by returning false) the timeline will not resume.

Documentation generated by JsDoc Toolkit 2.1.0 on Thu Jul 07 2011 12:47:27 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.