Timeline

A simple timeline class for managing animations with easing and precise progress control.

It provides methods for playing, reversing, pausing, and resetting the timeline.

Example

Explore a live example in CodeSandbox:

Props

Mutable Props

Mutable properties can be updated at runtime using .updateProps().

Name	Description	Type	Default Value
duration	Timeline duration in milliseconds.	number	1000
easing	Easing function for timeline progression. Accepts standard easing types or an array of bezier values. See easing types for more information	TEasingType	false

Accessors

note

All Module's accessors are available in this class.

duration

Type: number

Get the timeline duration, ensuring it is at least 0 ms.

eased

Type: number

Get the eased progress of the timeline, derived from the easing function.

isPaused

Type: boolean

Whether the timeline is paused.

isPlaying

Type: boolean

Whether the timeline is currently playing.

isReversed

Type: boolean

Whether the timeline is reversed (progress decreases over time).

progress

Type: number

Get or set the linear progress of the timeline. Setting this triggers an update and associated callbacks.

Methods

note

All Module's methods are available in this class.

pause

Pause the timeline, halting progress without resetting it.

instance.pause();

play

Play the timeline, advancing progress toward completion. Does nothing if the timeline is destroyed or already completed.

instance.play();

reset

Reset the timeline to the beginning (progress = 0).

instance.reset();

reverse

Reverse the timeline, moving progress toward the start. Does nothing if the timeline is destroyed or already at the start.

instance.reverse();

Callbacks

note

All Module's callbacks are available in this class.

start

Triggered when the timeline starts.

const destruct = instance.on('start', () => console.log('start'));

// Cancel the callback
destruct();

update

Triggered during timeline updates with progress values.

const destruct = instance.on('update', ({ progress, eased }) => {
  console.log('update', progress, eased);
});

// Cancel the callback
destruct();

end

Triggered when the timeline completes.

const destruct = instance.on('end', () => console.log('end'));

// Cancel the callback
destruct();