Class Timeline

Timeline for time-based progress with easing.

  • Operates in the 0 → 1 range with configurable duration and easing
  • play, reverse, pause, and reset control playback
  • Emits update on every progress change plus lifecycle callbacks (start, end, play, pause, reverse, reset, resume)
  • Does not touch the DOM — drive animation from callbacks or progress / eased

Documentation

Hierarchy (View Summary)

Constructors

Accessors

  • get duration(): number

    Duration in milliseconds.

    Non-finite or negative values are treated as 0 (instant completion).

    Returns number

  • get eased(): number

    Eased progress derived from progress and the easing prop.

    Returns number

  • get isDestroyed(): boolean

    Indicates whether the instance has been destroyed.

    After destruction, destroy is a no-op.

    Returns boolean

  • get isPaused(): boolean

    Whether playback is paused.

    Returns boolean

  • get isPlaying(): boolean

    Whether a requestAnimationFrame loop is active.

    Returns boolean

  • get isReversed(): boolean

    Whether playback direction is reversed.

    Returns boolean

  • get name(): string

    The name of the module, derived from the class name

    Returns string

  • get prefix(): string

    Optional prefix for classnames used by the module

    Returns string

  • get progress(): number

    Linear progress (0 → 1).

    Assigning a value clamps, recalculates eased, and fires callbacks.

    Returns number

  • set progress(val: number): void

    Parameters

    • val: number

    Returns void

Methods

  • Adds prefixed classes to an element and removes them on destroy.

    Skips classes that are already present on the element.

    Parameters

    • element: Element

      Target DOM element.

    • ...classes: string[]

      Unprefixed class name segments.

    Returns void

  • Builds one or more prefixed class names.

    Parameters

    • ...classes: string[]

      Unprefixed class name segments.

    Returns string

    Space-separated prefixed class string.

  • Internal method to handle the destruction of the module. It removes all callbacks, destroys properties, and cleans up event listeners and class names.

    Returns void

  • Set default mutable props

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

    • __mutableProp: true
    • duration: number

      Timeline duration in milliseconds.

      1000
      
    • easing: false | number[] | TEasingFunction

      Easing applied to linear ITimelineProgressArg.progress.

      Accepts a named easing type, bezier control points, or false for linear.

      inherited from core settings
      
  • Get default static props

    Returns { __staticProp: true }

  • Destroys the instance and runs all registered cleanup actions.

    Safe to call multiple times; subsequent calls are ignored.

    Execution order:

    1. _destroy
    2. all onDestroy callbacks, in registration order
    3. isDestroyed is set to true

    Returns void

  • Registers a function to run when the instance is destroyed.

    If the instance is already destroyed, action runs immediately.

    Parameters

    • action: () => void

      Cleanup function (for example remove listeners or DOM classes).

    Returns void

  • Pauses playback without resetting progress.

    Emits pause only when a rAF loop is active.

    Returns void

  • Plays forward toward progress = 1.

    No-op when destroyed or when progress is already 1.

    Returns void

  • Pauses and sets progress to 0.

    Returns void

  • Plays backward toward progress = 0.

    No-op when destroyed or when progress is already 0.

    Returns void