Timeline Control

Timelines can be controlled like videos.

Play

tl.play();

Starts timeline.

Pause

tl.pause();

Stops at current position.

Resume

tl.resume();

Continues from pause point.

Restart

tl.restart();

Starts from beginning.

Reverse

tl.reverse();

Plays backwards.

Seek

Jump to specific position.

tl.seek(2);

Move to 2 seconds.

Seek to Label

tl.seek("intro");

Progress

tl.progress(0.5);

Moves timeline to 50%.

Time Scale

Controls playback speed.

Faster

tl.timeScale(2);

2x speed.

Slower

tl.timeScale(0.5);

Half speed.

Example: Button Controls

<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="reverse">Reverse</button>


document
.getElementById("play")
.addEventListener("click", () => tl.play());

document
.getElementById("pause")
.addEventListener("click", () => tl.pause());

document
.getElementById("reverse")
.addEventListener("click", () => tl.reverse());