resig.js/build/main/animation/dom.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.

/**
 * DOM Animation Adapter
 * Extends DOM adapter with animation capabilities for CSS properties and transforms
 */
import { EasingFunction } from './core';
import { AnimatedSignal } from './signals';
export interface CSSAnimationConfig {
    readonly property: string;
    readonly from: string | number;
    readonly to: string | number;
    readonly duration: number;
    readonly easing: EasingFunction;
    readonly unit?: string;
}
export interface TransformConfig {
    translateX?: number;
    translateY?: number;
    translateZ?: number;
    scaleX?: number;
    scaleY?: number;
    scaleZ?: number;
    rotateX?: number;
    rotateY?: number;
    rotateZ?: number;
    skewX?: number;
    skewY?: number;
}
export interface AnimatedElement {
    readonly element: HTMLElement;
    readonly style: Record<string, AnimatedSignal<string | number>>;
    readonly transform: AnimatedSignal<TransformConfig>;
    readonly opacity: AnimatedSignal<number>;
    readonly visibility: AnimatedSignal<boolean>;
    readonly animate: (config: CSSAnimationConfig) => Promise<void>;
    readonly animateTransform: (to: Partial<TransformConfig>, duration?: number, easing?: EasingFunction) => Promise<void>;
    readonly fadeIn: (duration?: number) => Promise<void>;
    readonly fadeOut: (duration?: number) => Promise<void>;
    readonly slideIn: (direction: 'left' | 'right' | 'up' | 'down', duration?: number) => Promise<void>;
    readonly slideOut: (direction: 'left' | 'right' | 'up' | 'down', duration?: number) => Promise<void>;
    readonly scale: (to: number, duration?: number) => Promise<void>;
    readonly rotate: (to: number, duration?: number) => Promise<void>;
    readonly shake: (intensity?: number, duration?: number) => Promise<void>;
    readonly bounce: (intensity?: number, duration?: number) => Promise<void>;
}
export declare const animatedElement: (element: HTMLElement) => AnimatedElement;
export declare const fadeIn: (element: HTMLElement, duration?: number) => Promise<void>;
export declare const fadeOut: (element: HTMLElement, duration?: number) => Promise<void>;
export declare const slideIn: (element: HTMLElement, direction: 'left' | 'right' | 'up' | 'down', duration?: number) => Promise<void>;
export declare const slideOut: (element: HTMLElement, direction: 'left' | 'right' | 'up' | 'down', duration?: number) => Promise<void>;
export declare const scale: (element: HTMLElement, to: number, duration?: number) => Promise<void>;
export declare const rotate: (element: HTMLElement, to: number, duration?: number) => Promise<void>;
export declare const shake: (element: HTMLElement, intensity?: number, duration?: number) => Promise<void>;
export declare const bounce: (element: HTMLElement, intensity?: number, duration?: number) => Promise<void>;
export declare const animateElements: (elements: HTMLElement[], animation: (element: AnimatedElement) => Promise<void>, stagger?: number) => Promise<void>;
export declare const animateOnScroll: (element: HTMLElement, animation: (element: AnimatedElement) => Promise<void>, options?: IntersectionObserverInit) => (() => void);