resig.js/build/main/animation/advanced.d.ts

Universal reactive signal library with complete platform features: signals, animations, CRDTs, scheduling, DOM integration. Works identically across React, SolidJS, Svelte, Vue, and Qwik.

/**
 * Advanced Animation Features
 * Keyframes, spring physics, and timeline coordination systems
 */
import { Signal } from '../core/signal';
import { Animation, EasingFunction, Interpolator } from './core';
import { SpringSignal } from './signals';
export interface Keyframe<T> {
    readonly time: number;
    readonly value: T;
    readonly easing?: EasingFunction;
}
export interface KeyframeAnimation<T> extends Animation<T> {
    readonly keyframes: Keyframe<T>[];
    readonly addKeyframe: (keyframe: Keyframe<T>) => KeyframeAnimation<T>;
    readonly removeKeyframe: (time: number) => KeyframeAnimation<T>;
}
export interface PathPoint {
    readonly x: number;
    readonly y: number;
    readonly time?: number;
}
export interface PathAnimation extends Animation<PathPoint> {
    readonly path: PathPoint[];
    readonly length: number;
    readonly getPointAt: (t: number) => PathPoint;
}
export interface PhysicsSpring<T> extends SpringSignal<T> {
    readonly addForce: (force: number) => void;
    readonly setTarget: (target: T) => void;
    readonly reset: () => void;
}
export interface GestureRecognizer {
    readonly element: HTMLElement;
    readonly onSwipe: Signal<{
        direction: 'left' | 'right' | 'up' | 'down';
        velocity: number;
    }>;
    readonly onPinch: Signal<{
        scale: number;
        velocity: number;
    }>;
    readonly onRotate: Signal<{
        angle: number;
        velocity: number;
    }>;
    readonly onPan: Signal<{
        deltaX: number;
        deltaY: number;
        velocity: number;
    }>;
    readonly destroy: () => void;
}
export declare const keyframeAnimation: <T>(keyframes: Keyframe<T>[], duration: number, interpolator: Interpolator<T>) => KeyframeAnimation<T>;
export declare const pathAnimation: (path: PathPoint[], duration: number) => PathAnimation;
export declare const physicsSpring: <T>(initial: T, interpolator: Interpolator<T>, config?: {
    tension: number;
    friction: number;
    mass: number;
    precision: number;
}) => PhysicsSpring<T>;
export declare const gestureRecognizer: (element: HTMLElement) => GestureRecognizer;
export declare const presets: {
    fadeInUp: (_element: HTMLElement, duration?: number) => KeyframeAnimation<{
        opacity: number;
        translateY: number;
    }>;
    fadeInDown: (_element: HTMLElement, duration?: number) => KeyframeAnimation<{
        opacity: number;
        translateY: number;
    }>;
    slideInLeft: (_element: HTMLElement, duration?: number) => KeyframeAnimation<{
        translateX: number;
        opacity: number;
    }>;
    pulse: (_element: HTMLElement, duration?: number) => KeyframeAnimation<{
        scaleX: number;
        scaleY: number;
    }>;
    wobble: (_element: HTMLElement, duration?: number) => KeyframeAnimation<{
        rotateZ: number;
    }>;
    fadeOutUp: (_element: HTMLElement, duration?: number) => KeyframeAnimation<{
        opacity: number;
        translateY: number;
    }>;
};
export declare const timelineBuilder: () => {
    to: <T>(_target: T, _duration: number, _interpolator: Interpolator<T>, _offset?: number) => any;
    from: <T_1>(from: T_1, to: T_1, duration: number, interpolator: Interpolator<T_1>, offset?: number) => any;
    stagger: (animations: Animation<any>[], delay: number) => any;
    build: () => import("./composer").Timeline;
};