Merge version_2 into main #10
@@ -9,20 +9,21 @@ interface CardAnimationConfig {
|
||||
duration?: number;
|
||||
delay?: number;
|
||||
easing?: string;
|
||||
itemRefs?: React.MutableRefObject<HTMLElement | null>[];
|
||||
containerRef?: React.MutableRefObject<HTMLElement | null>;
|
||||
perspectiveRef?: React.MutableRefObject<HTMLElement | null>;
|
||||
bottomContentRef?: React.MutableRefObject<HTMLElement | null>;
|
||||
animationType?: string;
|
||||
itemRefs?: React.MutableRefObject<HTMLDivElement | null>[];
|
||||
containerRef?: React.MutableRefObject<HTMLDivElement | null>;
|
||||
perspectiveRef?: React.MutableRefObject<HTMLDivElement | null>;
|
||||
bottomContentRef?: React.MutableRefObject<HTMLDivElement | null>;
|
||||
}
|
||||
|
||||
const useCardAnimation = (config: CardAnimationConfig = {}): CardAnimationConfig => {
|
||||
const { duration = 0.6, delay = 0, easing = 'ease-out' } = config;
|
||||
const { duration = 0.6, delay = 0, easing = 'ease-out', animationType = 'none' } = config;
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
const { transform } = useDepth3DAnimation({ rotateX: 0, rotateY: 0, scale: 1 });
|
||||
const itemRefs = useRef<HTMLElement | null>(null);
|
||||
const containerRef = useRef<HTMLElement | null>(null);
|
||||
const perspectiveRef = useRef<HTMLElement | null>(null);
|
||||
const bottomContentRef = useRef<HTMLElement | null>(null);
|
||||
const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const perspectiveRef = useRef<HTMLDivElement | null>(null);
|
||||
const bottomContentRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setIsAnimating(true);
|
||||
@@ -34,6 +35,7 @@ const useCardAnimation = (config: CardAnimationConfig = {}): CardAnimationConfig
|
||||
duration,
|
||||
delay,
|
||||
easing,
|
||||
animationType,
|
||||
itemRefs: [itemRefs],
|
||||
containerRef,
|
||||
perspectiveRef,
|
||||
|
||||
Reference in New Issue
Block a user