@studiometa/js-toolkit/utils/tween.d.ts

A set of useful little bits of JavaScript to boost your project! 🚀

import type { EasingFunction } from './math/createEases.js';
export type BezierCurve = [number, number, number, number];
/**
 * Controls for a tween.
 */
export interface Tween {
    /**
     * Start the tween from the beginning.
     */
    start: () => void;
    /**
     * Finish the tween and set its state to the end.
     */
    finish: () => void;
    /**
     * Pause the tween.
     */
    pause: () => void;
    /**
     * Start the tween from the current paused progress.
     */
    play: () => void;
    /**
     * Set and get the tween's progress.
     */
    progress: (progress?: number) => number;
}
export interface TweenOptions {
    /**
     * The duration, in seconds.
     * Defaults to `1`.
     */
    duration?: number;
    /**
     * The delay, in seconds.
     * Defaults to `0`.
     */
    delay?: number;
    /**
     * The easing function or bezier curve to use.
     * Defaults to a linear easing function.
     */
    easing?: EasingFunction | BezierCurve;
    /**
     * The smooth factor. Setting this option to `true` or a `number` will disable the `duration` option.
     */
    smooth?: true | number;
    /**
     * The precision for when to consider the tween finished.
     * Defaults to `0.0001`.
     */
    precision?: number;
    /**
     * A callback executed on start.
     */
    onStart?: (progress: number) => void;
    /**
     * A callback executed each time the progress is updated.
     */
    onProgress?: (progress: number) => void;
    /**
     * A callback executed when the tween is finished.
     */
    onFinish?: (progress: number) => void;
}
/**
 * Normalize a easing function with default fallbacks.
 */
export declare function normalizeEase(ease: EasingFunction | BezierCurve): EasingFunction;
/**
 * Tween from 0 to 1.
 */
export declare function tween(callback: (progress: number) => unknown, options?: TweenOptions): Tween;