Version 1.3 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.

loop

Specifies whether the timeline loops.

Type

Boolean

Default

false

Optional

Yes

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

Examples

// in the simplest form, a timeline can be used to string multiple animations together: // make our animations
var moveUp = glow.anim.css(myDiv, { "top": {to:"0"}
});
var moveDown = glow.anim.css(myDiv, { "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();

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

Properties

duration

Length of the animation in seconds

Type

Number

loop

Inidcates whether the timeline loops.

Description

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

Methods

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

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.

stop

Fired when the timeline is stopped before its end.

Synopsis

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

Arguments

event

Type

glow.events.Event

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

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

Description

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