Class Timeline

A timeline class for managing animations with easing and precise progress control. It provides methods for playing, reversing, pausing, and resetting the timeline.

Documentation

Hierarchy (View Summary)

Module<TC, TS, TM>
- Timeline

Index

Constructors

constructor

new Timeline(
    props?: ITimelineStaticProps & ITimelineMutableProps & Partial<
        {
            onDestroy: (data: undefined, ctx: Timeline) => void;
            onEnd: (data: undefined, ctx: Timeline) => void;
            onProps: (data: Partial, ctx: Timeline) => void;
            onStart: (data: undefined, ctx: Timeline) => void;
            onUpdate: (data: ITimelineProgressArg, ctx: Timeline) => void;
        },
    >,
    onCallbacks?: Partial<
        {
            onDestroy: (data: undefined, ctx: Timeline) => void;
            onEnd: (data: undefined, ctx: Timeline) => void;
            onProps: (data: Partial, ctx: Timeline) => void;
            onStart: (data: undefined, ctx: Timeline) => void;
            onUpdate: (data: ITimelineProgressArg, ctx: Timeline) => void;
        },
    >,
): Timeline
Parameters
- Optionalprops: ITimelineStaticProps & ITimelineMutableProps & Partial<
      {
          onDestroy: (data: undefined, ctx: Timeline) => void;
          onEnd: (data: undefined, ctx: Timeline) => void;
          onProps: (data: Partial, ctx: Timeline) => void;
          onStart: (data: undefined, ctx: Timeline) => void;
          onUpdate: (data: ITimelineProgressArg, ctx: Timeline) => void;
      },
  >
- OptionalonCallbacks: Partial<
      {
          onDestroy: (data: undefined, ctx: Timeline) => void;
          onEnd: (data: undefined, ctx: Timeline) => void;
          onProps: (data: Partial, ctx: Timeline) => void;
          onStart: (data: undefined, ctx: Timeline) => void;
          onUpdate: (data: ITimelineProgressArg, ctx: Timeline) => void;
      },
  >
Returns Timeline
Overrides Module.constructor
- Defined in src/components/Timeline/index.ts:58

Accessors

callbacks

get callbacks(): Callbacks<CallbacksMap, this>
Retrieves the module's callbacks instance.

Returns Callbacks<CallbacksMap, this>
Inherited from Module.callbacks
- Defined in src/base/Module/index.ts:76

duration

get duration(): number
Get the timeline duration, ensuring it is at least 0 ms.

Returns number
- Defined in src/components/Timeline/index.ts:118

eased

get eased(): number
Get the eased progress of the timeline, derived from the easing function.

Returns number
- Defined in src/components/Timeline/index.ts:90

isDestroyed

get isDestroyed(): boolean
Checks if the module has been destroyed.

Returns boolean
Inherited from Module.isDestroyed
- Defined in src/base/Module/index.ts:66

isPaused

get isPaused(): boolean
Whether the timeline is paused.

Returns boolean
- Defined in src/components/Timeline/index.ts:111

isPlaying

get isPlaying(): boolean
Whether the timeline is currently playing.

Returns boolean
- Defined in src/components/Timeline/index.ts:97

isReversed

get isReversed(): boolean
Whether the timeline is reversed (progress decreases over time).

Returns boolean
- Defined in src/components/Timeline/index.ts:104

name

get name(): string
The name of the module, derived from the class name

Returns string
Inherited from Module.name
- Defined in src/base/Module/index.ts:56

prefix

get prefix(): string
Optional prefix for classnames used by the module

Returns string
Inherited from Module.prefix
- Defined in src/base/Module/index.ts:51

progress

get progress(): number
Get or set the linear progress of the timeline. Setting this triggers an update and associated callbacks.

Returns number
- Defined in src/components/Timeline/index.ts:77
set progress(val: number): void
Parameters
- val: number
Returns void
- Defined in src/components/Timeline/index.ts:81

props

get props(): TRequiredProps<MutableProps & StaticProps>
Current properties. Do not mutate these directly, use updateProps instead.

Returns TRequiredProps<MutableProps & StaticProps>
Inherited from Module.props
- Defined in src/base/Module/index.ts:46

Methods

`Protected`_addTempClassName

_addTempClassName(element: Element, className: string): void
Adds a class name on an element, and keeps track of it for removal when the module is destroyed.
Parameters
- element: Element
  The target DOM element.
- className: string
  The class name to toggle.
Returns void
Inherited from Module._addTempClassName
- Defined in src/base/Module/index.ts:209

`Protected`_cn

_cn(...classNames: string[]): string
Helper function to generate classnames with the module's prefix.
Parameters
- ...classNames: string[]
  The class names to generate.
Returns string
A string of class names with the module's prefix applied.
Inherited from Module._cn
- Defined in src/base/Module/index.ts:199

`Protected`_destroy

_destroy(): void
Destroy the timeline, stopping any active animation and cleaning up resources.

Returns void
Overrides Module._destroy
- Defined in src/components/Timeline/index.ts:254

_getMutable

_getMutable(): {
    __mutableProp: true;
    duration: number;
    easing: false
    | number[]
    | TEasingFunction;
}
Get default mutable properties.

Returns {
    __mutableProp: true;
    duration: number;
    easing: false | number[] | TEasingFunction;
}
- __mutableProp: true
- duration: number
  Timeline duration in milliseconds.
  Default
  1000
- easing: false | number[] | TEasingFunction
  Easing function for timeline progression. Accepts standard easing types or an array of bezier values.
  Default
  false
Overrides Module._getMutable
- Defined in src/components/Timeline/index.ts:36

_getStatic

_getStatic(): { __staticProp: true }
Get default static properties.

Returns { __staticProp: true }
Overrides Module._getStatic
- Defined in src/components/Timeline/index.ts:31

`Protected`_handleProps

_handleProps(diff: Partial<ITimelineMutableProps>): void
Method that is called when the module's properties mutate. In most cases, used to handle callbacks.
Parameters
- diff: Partial<ITimelineMutableProps>
Returns void
Inherited from Module._handleProps
- Defined in src/base/Module/index.ts:131

destroy

destroy(): void
Destroys the module, cleaning up resources, callbacks, and event listeners.

Returns void
Inherited from Module.destroy
- Defined in src/base/Module/index.ts:223

on

on<T extends keyof ITimelineCallbacksMap>(
    target: T,
    listener: TCallbacksAction<ITimelineCallbacksMap[T], Timeline>,
    settings?: ICallbacksSettings,
): () => void
Adds a custom callback to the module.
Type Parameters
- T extends keyof ITimelineCallbacksMap
Parameters
- target: T
  The event type to listen for (e.g., 'props', 'destroy').
- listener: TCallbacksAction<ITimelineCallbacksMap[T], Timeline>
  The function to execute when the event is triggered.
- settings: ICallbacksSettings = {}
  Additional settings for the callback.
Returns () => void
Inherited from Module.on
- Defined in src/base/Module/index.ts:185

onDestroy

onDestroy(action: () => void): void
Adds a callback on the module's destruction.
Parameters
- action: () => void
  The function to execute during destruction.
Returns void
Inherited from Module.onDestroy
- Defined in src/base/Module/index.ts:167

pause

pause(): void
Pause the timeline, halting progress without resetting it.

Returns void
- Defined in src/components/Timeline/index.ts:170

play

play(): void
Play the timeline, advancing progress toward completion. Does nothing if the timeline is destroyed or already completed.

Returns void
- Defined in src/components/Timeline/index.ts:133

reset

reset(): void
Reset the timeline to the beginning (progress = 0).

Returns void
- Defined in src/components/Timeline/index.ts:184

reverse

reverse(): void
Reverse the timeline, moving progress toward the start. Does nothing if the timeline is destroyed or already at the start.

Returns void
- Defined in src/components/Timeline/index.ts:152

updateProps

updateProps(props: Partial<ITimelineMutableProps>): void
Change module's mutable properties
Parameters
- props: Partial<ITimelineMutableProps>
Returns void
Inherited from Module.updateProps
- Defined in src/base/Module/index.ts:137

Class Timeline

Hierarchy (View Summary)

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

Returns Timeline

Accessors

callbacks

Returns Callbacks<CallbacksMap, this>

duration

Returns number

eased

Returns number

isDestroyed

Returns boolean

isPaused

Returns boolean

isPlaying

Returns boolean

isReversed

Returns boolean

name

Returns string

prefix

Returns string

progress

Returns number

Parameters

Returns void

props

Returns TRequiredProps<MutableProps & StaticProps>

Methods

Protected_addTempClassName

Parameters

Returns void

Protected_cn

Parameters

Returns string

Protected_destroy

Returns void

_getMutable

Returns { __mutableProp: true; duration: number; easing: false | number[] | TEasingFunction;}

__mutableProp: true

duration: number

Default

easing: false | number[] | TEasingFunction

Default

_getStatic

Returns { __staticProp: true }

Protected_handleProps

Parameters

Returns void

destroy

Returns void

on

Type Parameters

Parameters

Returns () => void

onDestroy

Parameters

Returns void

pause

Returns void

play

Returns void

reset

Returns void

reverse

Returns void

updateProps

Parameters

Returns void

Settings

On This Page

`Protected`_addTempClassName

`Protected`_cn

`Protected`_destroy

Returns {
__mutableProp: true;
duration: number;
easing: false | number[] | TEasingFunction;
}

`Protected`_handleProps