You are browsing legacy Phaser documentation that is 4+ years out of date. Please see https://newdocs.phaser.io

Class: Timeline

Phaser.Tweens. Timeline

A Timeline combines multiple Tweens into one. Its overall behavior is otherwise similar to a single Tween.

The Timeline updates all of its Tweens simultaneously. Its methods allow you to easily build a sequence of Tweens (each one starting after the previous one) or run multiple Tweens at once during given parts of the Timeline.

new Timeline(manager)

Parameters:
Name Type Description
manager Phaser.Tweens.TweenManager

The Tween Manager which owns this Timeline.
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 13)

Extends

Members

callbacks :object

An object containing the different Tween callback functions.

You can either set these in the Tween config, or by calling the Tween.setCallback method.

onComplete When the Timeline finishes playback fully or Timeline.stop is called. Never invoked if timeline is set to repeat infinitely. onLoop When a Timeline loops. onStart When the Timeline starts playing. onUpdate When a Timeline updates a child Tween. onYoyo When a Timeline starts a yoyo.

Type:
  • object
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 238)

callbackScope :any

The context in which all callbacks are invoked.

Type:
  • any
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 261)

completeDelay :number

Time in ms/frames before the 'onComplete' event fires. This never fires if loop = true (as it never completes)

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/tweens/Timeline.js (Line 129)

countdown :number

Countdown timer value, as used by loopDelay and completeDelay.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/tweens/Timeline.js (Line 139)

data :array

An array of Tween objects, each containing a unique property and target being tweened.

Type:
  • array
Since: 3.0.0
Default Value:
  • []
Source: src/tweens/Timeline.js (Line 57)

duration :number

Time in ms/frames for the whole Timeline to play through once, excluding loop amounts and loop delays.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/tweens/Timeline.js (Line 198)

elapsed :number

Elapsed time in ms/frames of this run through of the Timeline.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/tweens/Timeline.js (Line 178)

isTimeline :boolean

A constant value which allows this Timeline to be easily identified as one.

Type:
  • boolean
Since: 3.0.0
Default Value:
  • true
Source: src/tweens/Timeline.js (Line 47)

loop :number

Loop this Timeline? Can be -1 for an infinite loop, or an integer. When enabled it will play through ALL Tweens again (use Tween.repeat to loop a single tween)

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/tweens/Timeline.js (Line 98)

loopCounter :number

How many loops are left to run?

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/tweens/Timeline.js (Line 119)

loopDelay :number

Time in ms/frames before this Timeline loops.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/tweens/Timeline.js (Line 109)

manager :Phaser.Tweens.TweenManager

The Tween Manager which owns this Timeline.

Type:
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 38)

paused :boolean

Does the Timeline start off paused? (if so it needs to be started with Timeline.play)

Type:
  • boolean
Since: 3.0.0
Default Value:
  • false
Source: src/tweens/Timeline.js (Line 168)

progress :number

Value between 0 and 1. The amount of progress through the Timeline, excluding loops.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/tweens/Timeline.js (Line 208)

state :number

The current state of the Timeline.

Type:
  • number
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 149)

timeScale :number

Scales the time applied to this Timeline. A value of 1 runs in real-time. A value of 0.5 runs 50% slower, and so on. Value isn't used when calculating total duration of the Timeline, it's a run-time delta adjustment only.

Type:
  • number
Since: 3.0.0
Default Value:
  • 1
Source: src/tweens/Timeline.js (Line 87)

totalData :number

The cached size of the data array.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/tweens/Timeline.js (Line 67)

totalDuration :number

Time in ms/frames for all Tweens in this Timeline to complete (including looping)

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/tweens/Timeline.js (Line 218)

totalElapsed :number

Total elapsed time in ms/frames of the entire Timeline, including looping.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/tweens/Timeline.js (Line 188)

totalProgress :number

Value between 0 and 1. The amount through the entire Timeline, including looping.

Type:
  • number
Since: 3.0.0
Default Value:
  • 0
Source: src/tweens/Timeline.js (Line 228)

useFrames :boolean

If true then duration, delay, etc values are all frame totals, rather than ms.

Type:
  • boolean
Since: 3.0.0
Default Value:
  • false
Source: src/tweens/Timeline.js (Line 77)

Methods

add(config)

Creates a new Tween, based on the given Tween Config, and adds it to this Timeline.

Parameters:
Name Type Description
config Phaser.Types.Tweens.TweenBuilderConfig | object

The configuration object for the Tween.
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 337)
Returns:

This Timeline object.

Type
Phaser.Tweens.Timeline

addListener(event, fn [, context])

Add a listener for a given event.

Parameters:
Name Type Argument Default Description
event string | symbol

The event name.
fn function

The listener function.
context * <optional>
 this

The context to invoke the listener with.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 111)
Returns:

this.

Type
Phaser.Tweens.Timeline

calcDuration()

Calculates the total duration of the timeline.

Computes all tween durations and returns the full duration of the timeline.

The resulting number is stored in the timeline, not as a return value.

Since: 3.0.0
Source: src/tweens/Timeline.js (Line 467)

destroy()

Stops all the Tweens in the Timeline immediately, whatever stage of progress they are at and flags them for removal by the TweenManager.

Since: 3.0.0
Overrides:
Source: src/tweens/Timeline.js (Line 880)

dispatchTimelineEvent(event, callback)

Internal method that will emit a Timeline based Event and invoke the given callback.

Parameters:
Name Type Description
event Phaser.Types.Tweens.Event

The Event to be dispatched.
callback function

The callback to be invoked. Can be null or undefined to skip invocation.
Since: 3.19.0
Source: src/tweens/Timeline.js (Line 271)

emit(event [, args])

Calls each of the listeners registered for a given event.

Parameters:
Name Type Argument Description
event string | symbol

The event name.
args * <optional>
<repeatable>

Additional arguments that will be passed to the event handler.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 86)
Returns:

true if the event had listeners, else false.

Type
boolean

eventNames()

Return an array listing the events for which the emitter has registered listeners.

Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 55)
Returns:
Type
Array.<(string|symbol)>

getRelativeOffset(value, base)

Parses the relative offset value, returning a positive or negative number.

Parameters:
Name Type Description
value string

The relative offset, in the format of '-=500', for example. The first character determines whether it will be a positive or negative number. Spacing matters here.
base number

The value to use as the offset.
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 435)
Returns:

The parsed offset value.

Type
number

getTimeScale()

Gets the value of the time scale applied to this Timeline. A value of 1 runs in real-time. A value of 0.5 runs 50% slower, and so on.

Since: 3.0.0
Source: src/tweens/Timeline.js (Line 310)
Returns:

The value of the time scale applied to this Timeline.

Type
number

hasOffset(tween)

Checks whether a Tween has an offset value.

Parameters:
Name Type Description
tween Phaser.Tweens.Tween

The Tween to check.
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 377)
Returns:

true if the tween has a non-null offset.

Type
boolean

hasTarget(target)

Checks if any of the Tweens in this Timeline as operating on the target object.

Returns false if no Tweens operate on the target object.

Parameters:
Name Type Description
target object

The target to check all Tweens against.
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 855)
Returns:

true if there is at least a single Tween that operates on the target object, otherwise false.

Type
boolean

init()

Initializes the timeline, which means all Tweens get their init() called, and the total duration will be computed. Returns a boolean indicating whether the timeline is auto-started or not.

Since: 3.0.0
Source: src/tweens/Timeline.js (Line 534)
Returns:

true if the Timeline is started. false if it is paused.

Type
boolean

isOffsetAbsolute(value)

Checks whether the offset value is a number or a directive that is relative to previous tweens.

Parameters:
Name Type Description
value number

The offset value to be evaluated.
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 392)
Returns:

true if the result is a number, false if it is a directive like " -= 1000".

Type
boolean

isOffsetRelative(value)

Checks if the offset is a relative value rather than an absolute one. If the value is just a number, this returns false.

Parameters:
Name Type Description
value string

The offset value to be evaluated.
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 407)
Returns:

true if the value is relative, i.e " -= 1000". If false, the offset is absolute.

Type
boolean

isPlaying()

Check whether or not the Timeline is playing.

Since: 3.0.0
Source: src/tweens/Timeline.js (Line 324)
Returns:

true if this Timeline is active, otherwise false.

Type
boolean

listenerCount(event)

Return the number of listeners listening to a given event.

Parameters:
Name Type Description
event string | symbol

The event name.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 75)
Returns:

The number of listeners.

Type
number

listeners(event)

Return the listeners registered for a given event.

Parameters:
Name Type Description
event string | symbol

The event name.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 64)
Returns:

The registered listeners.

Type
Array.<function()>

makeActive(tween)

Passed a Tween to the Tween Manager and requests it be made active.

Parameters:
Name Type Description
tween Phaser.Tweens.Tween

The tween object to make active.
Since: 3.3.0
Source: src/tweens/Timeline.js (Line 604)
Returns:

The Timeline's Tween Manager reference.

Type
Phaser.Tweens.TweenManager

nextState()

Updates the Timeline's state and fires callbacks and events.

Since: 3.0.0
Source: src/tweens/Timeline.js (Line 651)
See:
Fires:

off(event [, fn] [, context] [, once])

Remove the listeners of a given event.

Parameters:
Name Type Argument Description
event string | symbol

The event name.
fn function <optional>

Only remove the listeners that match this function.
context * <optional>

Only remove the listeners that have this context.
once boolean <optional>

Only remove one-time listeners.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 151)
Returns:

this.

Type
Phaser.Tweens.Timeline

on(event, fn [, context])

Add a listener for a given event.

Parameters:
Name Type Argument Default Description
event string | symbol

The event name.
fn function

The listener function.
context * <optional>
 this

The context to invoke the listener with.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 98)
Returns:

this.

Type
Phaser.Tweens.Timeline

once(event, fn [, context])

Add a one-time listener for a given event.

Parameters:
Name Type Argument Default Description
event string | symbol

The event name.
fn function

The listener function.
context * <optional>
 this

The context to invoke the listener with.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 124)
Returns:

this.

Type
Phaser.Tweens.Timeline

pause()

Pauses the Timeline, retaining its internal state.

Calling this on a Timeline that is already paused has no effect and fires no event.

Since: 3.0.0
Source: src/tweens/Timeline.js (Line 801)
Fires:
Returns:

This Timeline object.

Type
Phaser.Tweens.Timeline

play()

Starts playing the Timeline.

Since: 3.0.0
Source: src/tweens/Timeline.js (Line 619)
Fires:

queue(tween)

Adds an existing Tween to this Timeline.

Parameters:
Name Type Description
tween Phaser.Tweens.Tween

The Tween to be added to this Timeline.
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 352)
Returns:

This Timeline object.

Type
Phaser.Tweens.Timeline

removeAllListeners( [event])

Remove all listeners, or those of the specified event.

Parameters:
Name Type Argument Description
event string | symbol <optional>

The event name.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 165)
Returns:

this.

Type
Phaser.Tweens.Timeline

removeListener(event [, fn] [, context] [, once])

Remove the listeners of a given event.

Parameters:
Name Type Argument Description
event string | symbol

The event name.
fn function <optional>

Only remove the listeners that match this function.
context * <optional>

Only remove the listeners that have this context.
once boolean <optional>

Only remove one-time listeners.
Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 137)
Returns:

this.

Type
Phaser.Tweens.Timeline

resetTweens(resetFromLoop)

Resets all of the timeline's tweens back to their initial states. The boolean parameter indicates whether tweens that are looping should reset as well, or not.

Parameters:
Name Type Description
resetFromLoop boolean

If true, resets all looping tweens to their initial values.
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 562)

resume()

Resumes a paused Timeline from where it was when it was paused.

Calling this on a Timeline that isn't paused has no effect and fires no event.

Since: 3.0.0
Source: src/tweens/Timeline.js (Line 830)
Fires:
Returns:

This Timeline object.

Type
Phaser.Tweens.Timeline

setCallback(type, callback [, params] [, scope])

Sets a callback for the Timeline.

Parameters:
Name Type Argument Description
type string

The internal type of callback to set.
callback function

Timeline allows multiple tweens to be linked together to create a streaming sequence.
params array <optional>

The parameters to pass to the callback.
scope object <optional>

The context scope of the callback.
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 581)
Returns:

This Timeline object.

Type
Phaser.Tweens.Timeline

setTimeScale(value)

Sets the value of the time scale applied to this Timeline. A value of 1 runs in real-time. A value of 0.5 runs 50% slower, and so on.

The value isn't used when calculating total duration of the tween, it's a run-time delta adjustment only.

Parameters:
Name Type Description
value number

The time scale value to set.
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 290)
Returns:

This Timeline object.

Type
Phaser.Tweens.Timeline

shutdown()

Removes all listeners.

Since: 3.0.0
Inherited From:
Source: src/events/EventEmitter.js (Line 31)

stop()

Stops the Timeline immediately, whatever stage of progress it is at and flags it for removal by the TweenManager.

Since: 3.0.0
Source: src/tweens/Timeline.js (Line 790)

update(timestamp, delta)

Returns 'true' if this Timeline has finished and should be removed from the Tween Manager. Otherwise, returns false.

Parameters:
Name Type Description
timestamp number

The current time. Either a High Resolution Timer value if it comes from Request Animation Frame, or Date.now if using SetTimeout.
delta number

The delta time in ms since the last frame. This is a smoothed and capped value based on the FPS rate.
Since: 3.0.0
Source: src/tweens/Timeline.js (Line 700)
Fires:
Returns:

Returns true if this Timeline has finished and should be removed from the Tween Manager.

Type
boolean