diff --git a/src/components/cardStack/hooks/useCardAnimation.ts b/src/components/cardStack/hooks/useCardAnimation.ts index 7502737..2cc0f4a 100644 --- a/src/components/cardStack/hooks/useCardAnimation.ts +++ b/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; + perspectiveRef?: React.MutableRefObject; + bottomContentRef?: React.MutableRefObject; } export const useCardAnimation = ( @@ -19,6 +23,11 @@ export const useCardAnimation = ( const [state, setState] = useState({ transform: "", transition: ""}); + const itemRefs = useRef<(HTMLElement | null)[]>([]); + const containerRef = useRef(null); + const perspectiveRef = useRef(null); + const bottomContentRef = useRef(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]);