motion path test

src/components/data/test-path-home.svg

+
+<svg width="1080" height="4000" fill="none" xmlns="test-namespace">
+<path 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
+" stroke="#850F78" stroke-width="10"/>
+</svg>
+

src/contents/Home.tsx

 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { openFromOtherPage } from "../utils/openFromOtherpAge";
+import vectorImg from "https://static.igem.wiki/teams/5247/placeholders/vector.webp"
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { useGSAP } from '@gsap/react';
+import { useRef } from 'react';
+import { MotionPathPlugin } from 'gsap/all';
 
 export function Home() {
   const location = useLocation();
@@ -31,13 +36,48 @@ export function Home() {
         }
     }, [location.search]);
 
+    const vectorRef = useRef(null);
+  const payloadRef = useRef(null);
+  const inhalatorRef = useRef(null);
+
+  useGSAP(
+    () => {
+    gsap.registerPlugin(ScrollTrigger);
+    gsap.registerPlugin(useGSAP);
+    gsap.registerPlugin(MotionPathPlugin);
+    
+    gsap.defaults({ease: "none"});
+
+    const mainTimeline = gsap.timeline({
+      scrollTrigger: {
+        trigger: "svg",
+        scrub: true,
+        start:"top center",
+        end: "bottom center"
+      }
+    })
+    .from(".theLine", {drawSVG: 0}, 0)
+    .to(payloadRef.current, {motionPath:{
+      path:".theLine",
+      align:".theLine",
+      alignOrigin:[0.5, 0.5],
+    }}, 0)
+  },
+  );
+
   return (
     <>
       <div className="row">
         <div className="col">
-        
+          <svg id="svg" xmlns="" viewBox="0 0 1980 4400">
+            <path class="theLine" d="
+            M 50 50 S 540 200 540 1000 S -300 1200 540 2000 S -600 2200 540 3000 S 0 4000 540 4000 L 540 4500"
+            file="none" stroke="white" stroke-width="10px"></path>
+          </svg>
+          <img ref={vectorRef} src={vectorImg} alt="vectorImg"/>
         </div>
       </div>
+
       <div className="row">
     
       </div>