Class glow.anim.Timeline

Extends glow.events.Target.

Defined in: core.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	glow.anim.Timeline(opts) Sequence and synchronise multiple animations This can be used to easily chain animations together and ensure that multiple animations stay in sync with each other.

Field Summary
Field Attributes	Field Name and Description
	destroyOnComplete Destroy the animation once it completes (unless it loops)? This will free any DOM references the animation may have created.
	duration Length of the animation in seconds // implementation note: (delete this later) This will need to be generated after each call to #track Won't be too expensive, just work out the length of the new track and Math.max(newTrack, this.duration)
	loop Loop the animation? This value can be changed while the animation is playing.
	playing true if the animation is playing.
	position Position of the animation in seconds

Method Summary
Method Attributes	Method Name and Description
	destroy() Destroys all animations in the timeline & detaches references to DOM nodes This frees memory & is called automatically when the animation completes
	goTo(position) Goes to a specific point in the animation.
	start(start) Starts playing the animation
	stop() Stops the animation playing.
	track(item+) Add a track of animations to the timeline Animations in a track will run one after another.

Methods borrowed from class glow.events.Target:: detach, fire, on

Event Summary
Event Attributes	Event Name and Description
	complete(event) Fires when an animation completes Preventing this event (by returning false or calling {@link glow.events.Event#preventDefault preventDefault}) causes the animation to loop.
	frame(event) Fires on each frame of the animation
	start(event) Fires when an animation starts.
	stop(event) Fires when an animation is stopped before completing Preventing this event (by returning false or calling {@link glow.events.Event#preventDefault preventDefault}) prevents this animation from stopping.

Class Detail

glow.anim.Timeline(opts)

Sequence and synchronise multiple animations This can be used to easily chain animations together and ensure that multiple animations stay in sync with each other.

			// play 3 animations one after another
			new glow.anim.Timeline().track(anim1, anim2, anim3).start();

			// play 2 animations at the same time
			new glow.anim.Timeline()
				.track(anim1)
				.track(anim2)
				.start();

			// play 2 animations with a second pause in between
			new glow.anim.Timeline().track(anim1, 1, anim2).start();

			// Make a 'mexican wave'
			// #waveContainer contains 100 divs absolutely positioned next to each other
			
			var animTimeline = new glow.anim.Timeline({
				loop: true
			});
			
			//create a wave up & wave down anim for each div
			var wavingDivs = glow("#waveContainer div").each(function(i) {
				var div = glow(this);
			
				animTimeline.track(
					// add a pause to the start of the anim, this creates the wave effect
					(i / 100),
					// move up & down
					div.anim(1, {
						top: [70, 0]
					}).pingPong()
				);
			});
			
			animTimeline.start();

Parameters:
{Object} opts Optional: Options object.
{boolean} opts.loop Optional, Default: true: Loop the animation. Looped timelines will fire a 'complete' event on each loop.
{boolean} opts.destroyOnComplete Optional, Default: true: Destroy animations in the timeline once it completes (unless it loops). This will free any DOM references the animations may have created. Once the animations are destroyed, the timeline cannot be started again.

Field Detail

{boolean} destroyOnComplete

Destroy the animation once it completes (unless it loops)? This will free any DOM references the animation may have created. Once the animation is destroyed, it cannot be started again.

{number} duration

Length of the animation in seconds // implementation note: (delete this later) This will need to be generated after each call to #track Won't be too expensive, just work out the length of the new track and Math.max(newTrack, this.duration)

{boolean} loop

Loop the animation? This value can be changed while the animation is playing. Looped animations will fire a 'complete' event on each loop.

{boolean} playing

true if the animation is playing.

{number} position

Position of the animation in seconds

Method Detail

destroy()

Destroys all animations in the timeline & detaches references to DOM nodes This frees memory & is called automatically when the animation completes

Returns:: undefined

{glow.anim.Timeline} goTo(position)

Goes to a specific point in the animation.

			// move the animation to 2.5 seconds in
			// If the animation is playing, it will continue to play from the new position.
			// Otherwise, it will simply move to that position.
			myTimeline.goTo(2.5);

Parameters:
{number} position: Position in the animation to go to, in seconds

Returns:: {glow.anim.Timeline}

start(start)

Starts playing the animation

Parameters:
{number} start Optional: Position to start the animation at, in seconds. By default, this will be the last position of the animation (if it was stopped) or 0.

Returns:: this

stop()

Stops the animation playing. Stopped animations can be resumed by calling {@link glow.anim.Timeline#start start}.

Returns:: this

track(item+)

Add a track of animations to the timeline Animations in a track will run one after another. Each track runs at the same time, always staying in sync.

Parameters:
{number|function|glow.anim.Anim|glow.anim.Timeline} item+: Item to add to the timelines Animation timelines can be placed within animation timelines Numbers will be treated as number of seconds to pause before the next item. Functions will be called. If the function takes 0.5 seconds to call, the next animation will start 0.5 seconds in, keeping everything in sync.

Returns:: this

Event Detail

complete(event)

Fires when an animation completes Preventing this event (by returning false or calling {@link glow.events.Event#preventDefault preventDefault}) causes the animation to loop.

			// Make an animation loop 5 times
			var loopCount = 5;
			myTimeline.on('complete', function() {
				return !!loopCount--;
			});

Parameters:
{glow.events.Event} event: Event Object

frame(event)

Fires on each frame of the animation

Parameters:
{glow.events.Event} event: Event Object

start(event)

Fires when an animation starts. Preventing this event (by returning false or calling {@link glow.events.Event#preventDefault preventDefault}) prevents this animation from starting.

Parameters:
{glow.events.Event} event: Event Object

stop(event)

Fires when an animation is stopped before completing Preventing this event (by returning false or calling {@link glow.events.Event#preventDefault preventDefault}) prevents this animation from stopping.

Parameters:
{glow.events.Event} event: Event Object

Classes

Class glow.anim.Timeline