/** * @file Animation Orchestrator * @description Performance-safe animation utilities with reduced motion support, * sequencing, and frame budget management. * * Features: * - Reduced motion support * - Animation sequencing * - Frame budget management * - CSS animation helpers * - Intersection-based animations * - Stagger animations */ /** * Animation timing function */ export type TimingFunction = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring' | string; /** * Animation state */ export type AnimationState = 'idle' | 'running' | 'paused' | 'finished' | 'cancelled'; /** * Animation options */ export interface AnimationOptions { /** Duration in ms */ duration: number; /** Timing function */ easing: TimingFunction; /** Delay before start in ms */ delay?: number; /** Number of iterations */ iterations?: number; /** Direction */ direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'; /** Fill mode */ fill?: 'none' | 'forwards' | 'backwards' | 'both'; /** Respect reduced motion preference */ respectReducedMotion?: boolean; /** Reduced motion fallback duration */ reducedMotionDuration?: number; } /** * Keyframe definition */ export interface AnimationKeyframe { offset?: number; opacity?: number; transform?: string; [property: string]: string | number | undefined; } /** * Animation sequence item */ export interface SequenceItem { element: HTMLElement | string; keyframes: AnimationKeyframe[] | PropertyIndexedKeyframes; options?: Partial; offset?: number; } /** * Stagger options */ export interface StaggerOptions extends AnimationOptions { /** Delay between each item in ms */ stagger: number; /** Direction of stagger */ staggerDirection?: 'forward' | 'reverse' | 'center' | 'random'; /** Starting index for stagger */ startIndex?: number; } /** * Animation controller */ export interface AnimationController { play: () => void; pause: () => void; reverse: () => void; cancel: () => void; finish: () => void; getState: () => AnimationState; getCurrentTime: () => number; setCurrentTime: (time: number) => void; onFinish: (callback: () => void) => void; onCancel: (callback: () => void) => void; } /** * Intersection animation options */ export interface IntersectionAnimationOptions extends AnimationOptions { /** Root element for intersection */ root?: Element | null; /** Root margin */ rootMargin?: string; /** Intersection threshold */ threshold?: number | number[]; /** Animate only once */ once?: boolean; /** Animate on exit as well */ animateOnExit?: boolean; /** Exit keyframes */ exitKeyframes?: AnimationKeyframe[]; } /** * Common easing functions */ export declare const EASING: { linear: string; ease: string; easeIn: string; easeOut: string; easeInOut: string; easeInQuad: string; easeOutQuad: string; easeInOutQuad: string; easeInCubic: string; easeOutCubic: string; easeInOutCubic: string; easeInQuart: string; easeOutQuart: string; easeInOutQuart: string; spring: string; bounce: string; }; /** * Common animation presets */ export declare const PRESETS: { fadeIn: { opacity: number; }[]; fadeOut: { opacity: number; }[]; slideUp: { transform: string; opacity: number; }[]; slideDown: { transform: string; opacity: number; }[]; slideLeft: { transform: string; opacity: number; }[]; slideRight: { transform: string; opacity: number; }[]; scaleIn: { transform: string; opacity: number; }[]; scaleOut: { transform: string; opacity: number; }[]; rotate: { transform: string; }[]; shake: { transform: string; }[]; pulse: { transform: string; }[]; }; /** * Animation orchestrator for coordinating animations */ export declare class AnimationOrchestrator { private animations; private reducedMotion; private frameCallbacks; private rafId; constructor(); /** * Animate an element with keyframes */ animate(element: HTMLElement | string, keyframes: AnimationKeyframe[] | PropertyIndexedKeyframes, options?: Partial): AnimationController; /** * Run animation sequence */ sequence(items: SequenceItem[]): AnimationController; /** * Stagger animations across elements */ stagger(elements: HTMLElement[] | NodeListOf | string, keyframes: AnimationKeyframe[] | PropertyIndexedKeyframes, options?: Partial): AnimationController; /** * Create intersection-triggered animation */ onIntersect(element: HTMLElement | string, keyframes: AnimationKeyframe[] | PropertyIndexedKeyframes, options?: Partial): { observe: () => void; disconnect: () => void; }; /** * Animate with spring physics */ spring(element: HTMLElement | string, from: Record, to: Record, options?: { stiffness?: number; damping?: number; mass?: number; velocity?: number; respectReducedMotion?: boolean; }): AnimationController; /** * Cancel all running animations */ cancelAll(): void; /** * Get reduced motion preference */ isReducedMotion(): boolean; private checkReducedMotion; private setupReducedMotionListener; private animateReduced; private resolveEasing; private calculateStaggerDelays; private applyState; private addFrameCallback; private startFrameLoop; private createController; private createGroupController; private createNoopController; private generateId; } /** * Get or create the global animation orchestrator */ export declare function getAnimationOrchestrator(): AnimationOrchestrator; /** * Animate an element */ export declare function animate(element: HTMLElement | string, keyframes: AnimationKeyframe[] | PropertyIndexedKeyframes, options?: Partial): AnimationController; /** * Run animation sequence */ export declare function animateSequence(items: SequenceItem[]): AnimationController; /** * Stagger animations */ export declare function animateStagger(elements: HTMLElement[] | NodeListOf | string, keyframes: AnimationKeyframe[] | PropertyIndexedKeyframes, options?: Partial): AnimationController; /** * Spring animation */ export declare function animateSpring(element: HTMLElement | string, from: Record, to: Record, options?: Parameters[3]): AnimationController;