Version 1.7 glow.anim.Timeline

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

Boolean

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.