Class Raf

requestAnimationFrame loop with FPS throttling and frame-rate–independent easing.

  • Schedules a rAF chain while enabled is true
  • Throttles logical frames via fps (fixed cap or 'auto')
  • Measures real-time fps, duration, and frame index
  • Exposes lerpFactor and damp for refresh-rate–independent motion

Animation loop

play / enabled: true → rAF chain → throttled frame callbacks → pause / enabled: false → cancelAnimationFrame.

Each frame payload includes lerpFactor bound to the current duration.

Documentation

Hierarchy (View Summary)

Constructors

Accessors

  • get duration(): number

    Duration of the last processed frame in milliseconds.

    Returns number

  • get fps(): number

    Estimated real-time FPS (recalculated every fpsRecalcFrames).

    Returns number

  • get fpsFactor(): number

    Multiplier 60 / fps for physics tuned to a 60 Hz baseline.

    Returns number

  • get index(): number

    Count of processed frames since the last enabled / fps reset.

    Returns number

  • get isDestroyed(): boolean

    Indicates whether the instance has been destroyed.

    After destruction, destroy is a no-op.

    Returns boolean

  • get isPlaying(): boolean

    Whether the rAF chain is active (enabled and not paused).

    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 timestamp(): number

    High-resolution timestamp of the last processed frame (now()).

    Returns number

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.

  • Pauses the loop and clears the scheduled rAF.

    Returns void

  • Set default mutable props

    Returns {
        __mutableProp: true;
        enabled: boolean;
        fps: number | "auto";
        fpsRecalcFrames: number;
    }

    • __mutableProp: true
    • enabled: boolean

      Enables or disables the Raf animation loop.

      false
      
    • fps: number | "auto"

      Frames per second (FPS) for the animation. Set to 'auto' for dynamic adjustment.

      'auto'
      
    • fpsRecalcFrames: number

      The number of frames after which the FPS is recalculated. This value determines how often the FPS calculation is updated based on frame counts.

      10
      
  • Get default static props

    Returns { __staticProp: true }

  • Method that is called when the module's properties mutate. In most cases, used to handle callbacks.

    Parameters

    Returns void

  • lerp toward to using lerpFactor.

    Parameters

    • from: number
    • to: number
    • ease: number
    • Optionalapproximation: number

    Returns number

  • 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

  • Frame-rate–independent interpolation factor for the last duration.

    Non-finite ease falls back to 1.

    Parameters

    • ease: number

    Returns number

  • 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

  • Sets enabled: false and cancels the scheduled rAF.

    Returns void

  • Sets enabled: true and starts the loop when currently disabled.

    Returns void