motion/types/targets/dom/types.d.ts

The Motion library for the web

import { OptionResolver } from "../../utils/stagger";
import { NextTime } from "./timeline/types";
export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
export declare type AcceptedElements = Element | Element[] | NodeListOf<Element> | string;
export declare type BezierDefinition = [number, number, number, number];
export interface CSSStyleDeclarationWithTransform extends Omit<CSSStyleDeclaration, "direction"> {
    x: number;
    y: number;
    z: number;
    rotateX: number;
    rotateY: number;
    rotateZ: number;
    scaleX: number;
    scaleY: number;
    scaleZ: number;
    skewX: number;
    skewY: number;
}
export declare type StyleAnimationOptions = {
    [K in keyof CSSStyleDeclarationWithTransform]?: AnimationOptions;
};
export declare type VariableAnimationOptions = {
    [key: `--${string}`]: AnimationOptions;
};
export declare type AnimationOptionsWithOverrides = StyleAnimationOptions & VariableAnimationOptions & AnimationOptions;
export declare type ValueKeyframe = string | number;
export declare type UnresolvedValueKeyframe = ValueKeyframe | null;
export declare type ValueKeyframesDefinition = ValueKeyframe | ValueKeyframe[] | UnresolvedValueKeyframe[];
export declare type StyleKeyframes = {
    [K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframe | ValueKeyframe[];
};
export declare type VariableKeyframes = {
    [key: `--${string}`]: ValueKeyframe | ValueKeyframe[];
};
export declare type MotionKeyframes = StyleKeyframes & VariableKeyframes;
export declare type StyleKeyframesDefinition = {
    [K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframesDefinition;
};
export declare type VariableKeyframesDefinition = {
    [key: `--${string}`]: ValueKeyframesDefinition;
};
export declare type MotionKeyframesDefinition = StyleKeyframesDefinition & VariableKeyframesDefinition;
export declare type Easing = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "steps-start" | "steps-end" | `steps(${number}, ${"start" | "end"})` | BezierDefinition;
export declare type SpringOptions = {
    stiffness?: number;
    damping?: number;
    mass?: number;
    velocity?: number;
    restSpeed?: number;
    restDelta?: number;
};
export declare type KeyframeOptions = {
    duration?: number;
    easing?: Easing | Easing[];
    offset?: number[];
};
export declare type PlaybackOptions = {
    delay?: number;
    endDelay?: number;
    repeat?: number;
    direction?: "normal" | "reverse" | "alternate" | "alternate-reverse";
};
export declare type AnimationOptions = SpringOptions & KeyframeOptions & PlaybackOptions & {
    allowWebkitAcceleration?: boolean;
};
export interface AnimationWithCommitStyles extends Animation {
    commitStyles: () => void;
}
export interface BasicAnimationControls {
    pause: () => void;
    play: () => void;
    commitStyles: () => void;
    cancel: () => void;
}
export declare type AnimationListOptions = Omit<AnimationOptionsWithOverrides, "delay"> & {
    delay?: number | OptionResolver<number>;
    at?: NextTime;
};
export interface AnimationControls {
    play: VoidFunction;
    pause: VoidFunction;
    stop: VoidFunction;
    finish: VoidFunction;
    reverse: VoidFunction;
    cancel: VoidFunction;
    finished: Promise<any>;
    currentTime: number | null;
    playbackRate: number;
}
export interface CssPropertyDefinition {
    syntax: `<${string}>`;
    initialValue: string | number;
    toDefaultUnit: (v: number) => string | number;
}
export declare type CssPropertyDefinitionMap = {
    [key: string]: CssPropertyDefinition;
};
export interface PregeneratedAnimation {
    keyframes: Array<string | number>;
    duration: number;
}
export interface KeyframeGenerator {
    isKeyframeGenerator: true;
    generate: (keyframes: number[]) => false | PregeneratedAnimation;
}