1681-engine / index / Timeline

Class: Timeline

Defined in: src/core/Timeline.ts:36

Tweens and calls laid out in time and played as one: in sequence by default, overlapping by position ('<', '-=100', a label), side by side in parallel groups, nested (add). It can repeat, yoyo, run at its own speed, pause, seek and play backwards, and finished resolves when it completes.

Built in one go, then it plays: a timeline stepped while empty has nothing left to do and completes, so build it in the frame it is made (or make it paused and play() it later). Children are kept sorted by start, which is the order they are played in going forward (and the reverse going back), so a later tween on the same property wins.

Extends

• TimelineBuilder

Implements

• Steppable
• NestedPlay

Constructors

Constructor

new Timeline(options?): Timeline;

Defined in: src/core/Timeline.ts:61

Parameters

Parameter	Type
options	TimelineOptions

Returns

Timeline

Overrides

TimelineBuilder.constructor

Properties

children

protected readonly children: TimelineChild[] = [];

Defined in: src/core/TimelineBuilder.ts:23

Sorted by start; equal starts keep the order they were added in.

Inherited from

TimelineBuilder.children

---

labels

protected readonly labels: Map<string, number>;

Defined in: src/core/TimelineBuilder.ts:24

Inherited from

TimelineBuilder.labels

---

repeat

readonly repeat: number;

Defined in: src/core/Timeline.ts:38

---

repeatDelay

readonly repeatDelay: number;

Defined in: src/core/Timeline.ts:40

---

targets

readonly targets: readonly object[] = [];

Defined in: src/core/Timeline.ts:42

A timeline holds no targets of its own for Tweener.killTweensOf: stop it with kill().

Implementation of

Steppable.targets

---

timeScale

timeScale: number;

Defined in: src/core/Timeline.ts:37

---

yoyo

readonly yoyo: boolean;

Defined in: src/core/Timeline.ts:39

Accessors

currentTime

Get Signature

get currentTime(): number;

Defined in: src/core/Timeline.ts:89

Where the playhead stands, ms from the start of the first play.

Returns

number

---

duration

Get Signature

get duration(): number;

Defined in: src/core/TimelineBuilder.ts:35

One play, ms (the longest child's end).

Returns

number

Inherited from

TimelineBuilder.duration

---

finished

Get Signature

get finished(): Promise<void>;

Defined in: src/core/Timeline.ts:117

Resolves when the timeline completes (or is killed, so nothing awaits it forever). A restart makes a new one.

Returns

Promise<void>

---

isActive

Get Signature

get isActive(): boolean;

Defined in: src/core/Timeline.ts:112

Still has somewhere to go: not completed, not killed.

Returns

boolean

---

isPaused

Get Signature

get isPaused(): boolean;

Defined in: src/core/Timeline.ts:103

Returns

boolean

---

isReversed

Get Signature

get isReversed(): boolean;

Defined in: src/core/Timeline.ts:107

Returns

boolean

---

progress

Get Signature

get progress(): number;

Defined in: src/core/Timeline.ts:94

0–1 over the whole run (over the current play when it repeats forever).

Returns

number

---

totalDuration

Get Signature

get totalDuration(): number;

Defined in: src/core/Timeline.ts:83

Every play and the delays between them, ms; Infinity when it repeats forever.

Returns

number

Implementation of

NestedPlay.totalDuration

Methods

add()

add(child, at?): this;

Defined in: src/core/TimelineBuilder.ts:103

Plays another timeline (built, not repeating forever) as one child of this one; it is no longer stepped alone.

Parameters

Parameter	Type
child	TimelineBuilder
at?	TimelinePosition

Returns

this

Inherited from

TimelineBuilder.add

---

adopt()

protected adopt(child): NestedPlay;

Defined in: src/core/Timeline.ts:73

Checks child may be played by this timeline and takes it over (it stops being stepped alone).

Parameters

Parameter	Type
child	TimelineBuilder

Returns

NestedPlay

Overrides

TimelineBuilder.adopt

---

call()

call(fn, at?): this;

Defined in: src/core/TimelineBuilder.ts:62

Calls fn when the playhead passes at (default: the end so far), going either way.

Parameters

Parameter	Type
fn	() => void
at?	TimelinePosition

Returns

this

Inherited from

TimelineBuilder.call

---

kill()

kill(): void;

Defined in: src/core/Timeline.ts:188

Stops for good where it stands (nothing is put back) and settles finished.

Returns

void

---

label()

label(name, at?): this;

Defined in: src/core/TimelineBuilder.ts:72

Names a point (default: the end so far), for positions and seek.

Parameters

Parameter	Type
name	string
at?	TimelinePosition

Returns

this

Inherited from

TimelineBuilder.label

---

labelTime()

labelTime(name): number | undefined;

Defined in: src/core/TimelineBuilder.ts:78

Where a label stands, if it is set.

Parameters

Parameter	Type
name	string

Returns

number | undefined

Inherited from

TimelineBuilder.labelTime

---

parallel()

parallel(build, at?): this;

Defined in: src/core/TimelineBuilder.ts:86

Everything build adds starts together, at at (default: the end so far); a position inside is measured from the group's start. What follows the group starts at its longest child's end.

Parameters

Parameter	Type
build	(timeline) => void
at?	TimelinePosition

Returns

this

Inherited from

TimelineBuilder.parallel

---

pause()

pause(): this;

Defined in: src/core/Timeline.ts:135

Returns

this

---

play()

play(): this;

Defined in: src/core/Timeline.ts:148

Plays forward from where it stands.

Returns

this

---

restart()

restart(): this;

Defined in: src/core/Timeline.ts:176

Back to the start, playing forward, with a new finished if the old one was settled.

Returns

this

---

resume()

resume(): this;

Defined in: src/core/Timeline.ts:141

Carries on the way it was going.

Returns

this

---

reverse()

reverse(): this;

Defined in: src/core/Timeline.ts:154

Turns round and plays toward the start (or forward again, if it was reversed).

Returns

this

---

seek()

seek(to, fireCalls?): this;

Defined in: src/core/Timeline.ts:163

Jumps to to (ms or a label) and shows it there. Calls on the way are skipped unless fireCalls; the playing state is kept, so a paused timeline stays paused.

Parameters

Parameter	Type	Default value
to	string | number	undefined
fireCalls	boolean	false

Returns

this

---

to()

to(
   targets, 
   props, 
   options?
): this;

Defined in: src/core/TimelineBuilder.ts:40

Tweens the numeric props of targets (one object or several), after what came before unless at says.

Parameters

Parameter	Type
targets	object | readonly object[]
props	TimelineProps
options	TimelineTweenOptions

Returns

this

Inherited from

TimelineBuilder.to

---

update()

update(dt): void;

Defined in: src/core/Timeline.ts:122

Advances by dt ms (× timeScale): how a timeline with no manager is played.

Parameters

Parameter	Type
dt	number

Returns

void

---

wait()

wait(ms): this;

Defined in: src/core/TimelineBuilder.ts:67

ms of nothing: the next child starts that much later, and a wait at the end makes the timeline longer.

Parameters

Parameter	Type
ms	number

Returns

this

Inherited from

TimelineBuilder.wait