moving code to Home.tsx for testing

src/contents/Home.tsx

 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { openFromOtherPage } from "../utils/openFromOtherpAge";
-import { HomeAnim } from "../components/HomeAnimation";
 
 export function Home() {
   const location = useLocation();
@@ -32,16 +31,61 @@ export function Home() {
         }
     }, [location.search]);
 
+    gsap.registerPlugin(ScrollTrigger);
+  gsap.registerPlugin(useGSAP);
+  gsap.registerPlugin(MotionPathPlugin);
+
+  const vectorRef = useRef(null);
+  
+  useGSAP(
+    () => {
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.registerPlugin(useGSAP);
+    gsap.registerPlugin(MotionPathPlugin);
+    gsap.defaults({ease: "none"});
+    
+    gsap.defaults({ease: "none"});
+
+    const main = gsap.timeline({
+      scrollTrigger: {
+        trigger: "animStarterClass",
+        scrub: true,
+        start:"top middle",
+        end: "+=4000"
+      }
+    })
+    .from(".homeAnimLine", {drawSVG: 0}, 0)
+    .to(vectorRef.current, {motionPath:{
+      path:".homeAnimLine",
+      align:".homeAnimLine",
+      alignOrigin:[0.5, 0.5],
+    }}, 0)
+    
+    
+    console.log(main)
+  },
+  );
+
   return (
     <>
-      <div className="row animStarterClass">
-        <div className="col">
-          <HomeAnim/>
+      <div className="animStarterClass">
+        <div className="row col">
+          <svg id="svg" viewBox="0 0 2000 2500">
+            <path className="homeAnimLine"  d="
+            M 50 50 
+            C 500 -50 1000 100 1870 50 
+            C 1820 220 2024 528 1870 590 
+            C 1351 678 118 451 54 561 
+            C 3 672 12 985 55 985 
+            C 586 1090 1342 898 1881 1038 
+            C 1994 1194 1986 1568 1890 1681 
+            C 1751 1803 281 1481 168 1646 
+            C 81 1794 21 1977 168 2142 
+            C 499 2246 1403 2325 1081 2142"/>
+          </svg>
+          <img className="vector" ref={vectorRef} src={"https://static.igem.wiki/teams/5247/placeholders/vector.webp"} alt="vectorImg"/>
         </div>
       </div>
-      <div className="row">
-    
-      </div>
     </>
   );
 }