From 5bc9649525b824b650938e024c82f765cd7aaf52 Mon Sep 17 00:00:00 2001
From: Barchakuz <behroze.barcha@gmail.com>
Date: Sun, 12 May 2024 17:51:38 +0500
Subject: [PATCH] Final

---
 app/components/ui/infinite-moving-cards.tsx | 41 ++++++++++-----------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/app/components/ui/infinite-moving-cards.tsx b/app/components/ui/infinite-moving-cards.tsx
index f28b85a..a2b265e 100644
--- a/app/components/ui/infinite-moving-cards.tsx
+++ b/app/components/ui/infinite-moving-cards.tsx
@@ -22,7 +22,27 @@ export const InfiniteMovingCards = ({
 }) => {
   const containerRef = React.useRef<HTMLDivElement>(null);
   const scrollerRef = React.useRef<HTMLUListElement>(null);
+
+  useEffect(() => {
+    addAnimation();
+  }, []);
   const [start, setStart] = useState(false);
+  function addAnimation() {
+    if (containerRef.current && scrollerRef.current) {
+      const scrollerContent = Array.from(scrollerRef.current.children);
+
+      scrollerContent.forEach((item) => {
+        const duplicatedItem = item.cloneNode(true);
+        if (scrollerRef.current) {
+          scrollerRef.current.appendChild(duplicatedItem);
+        }
+      });
+
+      getDirection();
+      getSpeed();
+      setStart(true);
+    }
+  }
   const getDirection = () => {
     if (containerRef.current) {
       if (direction === "left") {
@@ -48,27 +68,6 @@ export const InfiniteMovingCards = ({
         containerRef.current.style.setProperty("--animation-duration", "80s");
       }
     }
-    useEffect(() => {
-      const addAnimation = () => {
-        if (containerRef.current && scrollerRef.current) {
-          const scrollerContent = Array.from(scrollerRef.current.children);
-    
-          scrollerContent.forEach((item) => {
-            const duplicatedItem = item.cloneNode(true);
-            if (scrollerRef.current) {
-              scrollerRef.current.appendChild(duplicatedItem);
-            }
-          });
-    
-          getDirection();
-          getSpeed();
-          setStart(true);
-        }
-      };
-    
-      addAnimation();
-    }, [containerRef, scrollerRef, getDirection, getSpeed, setStart]);
-    
   };
   return (
     <div