@tempots/dom/dom/tween.d.ts

Fully-typed frontend framework alternative to React and Angular

import { Signal, EasingFn, Interpolate } from '@tempots/core';
/**
 * Configuration for a tween animation.
 * @typeParam T - The type of the tweened value.
 * @public
 */
export type TweenConfig<T> = {
    /** Duration in milliseconds. Default: 300. */
    readonly duration?: number;
    /** Easing function. Default: easeOutQuad. */
    readonly easing?: EasingFn;
    /** Custom interpolation function. Default: auto-detected via guessInterpolate. */
    readonly interpolate?: Interpolate<T>;
    /** When true, tweenTo() sets the value immediately (skips animation). */
    readonly reducedMotion?: Signal<boolean>;
};
/**
 * Handle returned by {@link createTween}.
 * @typeParam T - The type of the tweened value.
 * @public
 */
export type TweenHandle<T> = {
    /** The reactive signal holding the current tweened value. */
    readonly value: Signal<T>;
    /** Animate from the current value to `target`. Cancels any in-flight tween. */
    tweenTo: (target: T) => void;
    /** Cancel any in-flight animation. The value stays at its current interpolated position. */
    cancel: () => void;
    /** Dispose the tween and its internal signal. */
    dispose: () => void;
};
/**
 * Creates an imperative tween that drives a reactive signal from its current
 * value to a target using an easing function over a fixed duration.
 *
 * Complements `animateSignal` (declarative) with explicit `tweenTo()` control.
 *
 * @typeParam T - The type of the tweened value.
 * @param initial - The initial value.
 * @param config - Optional tween configuration.
 * @returns A tween handle.
 * @public
 */
export declare function createTween<T>(initial: T, config?: TweenConfig<T>): TweenHandle<T>;