@wbe/interpol/dist/interpol.d.ts

Interpolates values with a GSAP-like API ~ 3kB

type TickParams = {
    delta: number;
    time: number;
    elapsed: number;
};
type Handler = (e: TickParams) => void;
/**
 * Ticker
 */
declare class Ticker {
    #private;
    constructor();
    disable(): void;
    add(handler: Handler, rank?: number): () => void;
    remove(handler: Handler): void;
    play(): void;
    pause(): void;
    stop(): void;
    raf(t: number): void;
}

declare class Interpol<K extends string = string> {
    #private;
    readonly ID: number;
    ticker: Ticker;
    inTl: boolean;
    debugEnable: boolean;
    get duration(): number;
    get time(): number;
    get isReversed(): boolean;
    get isPlaying(): boolean;
    get isPaused(): boolean;
    get props(): Record<K, FormattedProp>;
    meta: Record<string, any>;
    constructor({ duration, ease, reverseEase, paused, delay, immediateRender, beforeStart, onStart, onUpdate, onComplete, debug, meta, ...inlineProps }: InterpolConstruct<K>);
    refreshComputedValues(): void;
    play(from?: number, allowReplay?: boolean): Promise<any>;
    reverse(from?: number, allowReplay?: boolean): Promise<any>;
    pause(): void;
    resume(): void;
    stop(): void;
    /**
     * Set progress to a specific value (between 0 and 1)
     */
    progress(value?: number, suppressEvents?: boolean): number | void;
}

declare const Power1: Power;
declare const Power2: Power;
declare const Power3: Power;
declare const Power4: Power;
declare const Expo: Power;
/**
 * Adaptor for gsap ease functions as string
 */
type EaseType = "power1" | "power2" | "power3" | "power4" | "expo";
type EaseDirection = "in" | "out" | "inOut";
type EaseName = `${EaseType}.${EaseDirection}` | "linear" | "none";
type EaseFn = (t: number) => number;
type Ease = EaseName | EaseFn;
type Power = Record<string, EaseFn>;
declare const easeAdapter: (ease: EaseName) => EaseFn;

/**
 * Common
 *
 *
 */
type El = HTMLElement | HTMLElement[] | Record<any, number> | null;
type Value = number | (() => number);
type PropsValues = Value | [Value, Value] | Partial<{
    from: Value;
    to: Value;
    ease: Ease;
    reverseEase: Ease;
}>;
type Props<K extends string = string> = Record<K, PropsValues>;
type PropKeys<T extends string> = keyof InterpolConstructBase<T> | (string & {});
type CallbackProps<K extends string, V = number> = Record<K, V>;
type FormattedProp = {
    from: Value;
    to: Value;
    _from: number;
    _to: number;
    value: number;
    ease: Ease;
    reverseEase: Ease;
};
/**
 * Interpol
 *
 *
 */
type CallBack<K extends string = string> = (props: CallbackProps<Exclude<K, keyof InterpolConstructBase<K>>>, time: number, progress: number, instance: Interpol<K>) => void;
type InterpolConstructBase<K extends string = string> = {
    duration?: Value;
    ease?: Ease;
    reverseEase?: Ease;
    paused?: boolean;
    immediateRender?: boolean;
    delay?: number;
    debug?: boolean;
    beforeStart?: CallBack<K>;
    onStart?: CallBack<K>;
    onUpdate?: CallBack<K>;
    onComplete?: CallBack<K>;
    meta?: Record<string, any>;
};
type InterpolConstruct<T extends PropKeys<T>> = InterpolConstructBase<T> & {
    [key in T]: key extends keyof InterpolConstructBase<T> ? InterpolConstructBase<T>[key] : PropsValues;
};
/**
 * Timeline
 *
 */
type TimelineCallback = (time: number, progress: number) => void;
interface TimelineConstruct {
    paused?: boolean;
    debug?: boolean;
    onUpdate?: TimelineCallback;
    onComplete?: TimelineCallback;
    ticker?: Ticker;
}

interface IAdd {
    itp: Interpol;
    time: {
        start: number;
        end: number;
        offset: number;
    };
    progress: {
        start?: number;
        end?: number;
        current: number;
        last: number;
    };
    _isAbsoluteOffset?: boolean;
}
declare class Timeline {
    #private;
    readonly ID: number;
    get time(): number;
    get isPlaying(): boolean;
    get isReversed(): boolean;
    get isPaused(): boolean;
    get adds(): IAdd[];
    get duration(): number;
    get ticker(): Ticker;
    constructor({ onUpdate, onComplete, debug, paused, }?: TimelineConstruct);
    /**
     * Add a new interpol obj or instance in Timeline or a callback function
     * @param interpol Interpol | InterpolConstruct<K> | (() => void),
     * @param offset Default "0" is relative position in TL
     */
    add<K extends keyof Props>(interpol: Interpol | InterpolConstruct<K> | (() => void), offset?: number | string): Timeline;
    play(from?: number): Promise<any>;
    reverse(from?: number): Promise<any>;
    pause(): void;
    resume(): void;
    stop(): void;
    progress(value?: number, suppressEvents?: boolean, suppressTlEvents?: boolean): number | void;
    refreshComputedValues(): void;
}

/**
 * global options in window object
 */
interface InterpolOptions {
    ticker: Ticker;
    durationFactor: number;
    duration: Value;
    ease: Ease;
}
declare const InterpolOptions: InterpolOptions;

/**
 * Styles function
 * @description Set CSS properties on DOM element(s) or object properties
 * @param element HTMLElement or array of HTMLElement or object
 * @param props Object of css properties to set
 * @param autoUnits Auto add "px" & "deg" units to number values, string values are not affected
 * @returns
 */
declare const styles: (element: El, props: CallbackProps<string, number | string>, autoUnits?: boolean) => void;

export { type Ease, type EaseDirection, type EaseFn, type EaseName, type EaseType, Expo, type IAdd, Interpol, type InterpolConstruct, InterpolOptions, type Power, Power1, Power2, Power3, Power4, type Props, Ticker, Timeline, type TimelineConstruct, type Value, easeAdapter, styles };