@studiometa/js-toolkit/utils/css/animate.d.ts

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

import type { TransformProps } from './transform.js';
import type { EasingFunction } from '../math/index.js';
import type { BezierCurve, Tween, TweenOptions } from '../tween.js';
export type CSSCustomPropertyName = `--${string}`;
type KeyframeTransforms<Type> = {
    [Property in keyof Type]: number | [number, string];
};
export type Keyframe = Partial<KeyframeTransforms<TransformProps> & {
    opacity: number;
    transformOrigin: string;
    easing: EasingFunction | BezierCurve;
    offset: number;
    [key: CSSCustomPropertyName]: number;
}>;
export type NormalizedKeyframe = Keyframe & {
    easing: EasingFunction;
    offset: number;
    vars: string[];
};
export interface AnimateOptions extends Omit<TweenOptions, 'duration'> {
    /**
     * The duration of the tween, in seconds.
     * When using multiple targets, it can be a function which will be
     * called with the current target and its index and should return
     * the duration in seconds for this element.
     *
     * Defaults to `1`.
     */
    duration?: number | ((target: HTMLElement, index: number) => number);
    /**
     * Delay between the start of each target animation, in seconds.
     * When using multiple targets, it can be a function which will be called
     * with the current target and its index and should return the delay
     * in seconds for this element's tween.
     *
     * Defaults to `0`.
     */
    stagger?: number | ((target: HTMLElement, index: number) => number);
}
export type Animate = Tween;
/**
 * Animate one or more elements.
 * @link https://js-toolkit.studiometa.dev/utils/css/animate.html
*/
export declare function animate(elementOrElements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, keyframes: Keyframe[], options?: AnimateOptions): Animate;
export {};