Final

barchakuz · May 12, 2024 · 5bc9649 · 5bc9649
1 parent b9ad77b
commit 5bc9649
Showing 1 changed file with 20 additions and 21 deletions.
diff --git 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