Update src/components/cardStack/hooks/useCardAnimation.ts

src/components/cardStack/hooks/useCardAnimation.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 interface Depth3DAnimationOptions {
   rotationX?: number;
@@ -11,6 +11,10 @@ interface Depth3DAnimationOptions {
 interface AnimationState {
   transform: string;
   transition: string;
+  itemRefs?: React.MutableRefObject<(HTMLElement | null)[]>;
+  containerRef?: React.MutableRefObject<HTMLDivElement | null>;
+  perspectiveRef?: React.MutableRefObject<HTMLDivElement | null>;
+  bottomContentRef?: React.MutableRefObject<HTMLDivElement | null>;
 }
 
 export const useCardAnimation = (
@@ -19,6 +23,11 @@ export const useCardAnimation = (
   const [state, setState] = useState<AnimationState>({
     transform: "",    transition: ""});
 
+  const itemRefs = useRef<(HTMLElement | null)[]>([]);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const perspectiveRef = useRef<HTMLDivElement | null>(null);
+  const bottomContentRef = useRef<HTMLDivElement | null>(null);
+
   const {
     rotationX = 0,
     rotationY = 0,
@@ -32,6 +41,10 @@ export const useCardAnimation = (
     setState({
       transform,
       transition: `transform ${duration}s ease-out`,
+      itemRefs,
+      containerRef,
+      perspectiveRef,
+      bottomContentRef,
     });
   }, [rotationX, rotationY, rotationZ, perspective, duration]);