aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
56 lines • 1.72 kB
TypeScript
import React from 'react';
export interface AnimationStep {
id: string;
duration: number;
delay?: number;
easing?: string;
transform?: {
x?: number;
y?: number;
scale?: number;
rotation?: number;
opacity?: number;
};
style?: Record<string, any>;
onStart?: () => void;
onComplete?: () => void;
onUpdate?: (progress: number) => void;
}
export interface AnimationSequenceConfig {
autoPlay?: boolean;
loop?: boolean;
reverse?: boolean;
speed?: number;
paused?: boolean;
}
export interface AnimationSequenceState {
isPlaying: boolean;
isPaused: boolean;
currentStep: number;
totalSteps: number;
progress: number;
elapsed: number;
totalDuration: number;
}
export declare function useAnimationSequence(steps: AnimationStep[], config?: AnimationSequenceConfig): {
ref: React.RefObject<HTMLElement>;
state: AnimationSequenceState;
play: () => void;
pause: () => void;
stop: () => void;
seek: (progress: number) => void;
totalDuration: number;
};
export declare const createFadeInSequence: (duration?: number) => AnimationStep[];
export declare const createSlideInSequence: (direction: "left" | "right" | "up" | "down", distance?: number, duration?: number) => AnimationStep[];
export declare const createScaleInSequence: (scale?: number, duration?: number) => AnimationStep[];
export declare const createComplexSequence: (config: {
fade?: boolean;
slide?: {
direction: "left" | "right" | "up" | "down";
distance?: number;
};
scale?: number;
duration?: number;
}) => AnimationStep[];
//# sourceMappingURL=useAnimationSequenceBasic.d.ts.map