new import way

src/components/testsvganimation.tsx

-import gsap from "gsap";
-import '/home/lili/Dokumente/iGem/Wiki/bielefeld-cebitec/pubpub/extra_modules/gsap/ScrollTrigger.js';
-
+import gsap from "gsap"; 
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useGSAP } from '@gsap/react';
 import { useRef } from 'react';
-import "/home/lili/Dokumente/iGem/Wiki/bielefeld-cebitec/pubpub/extra_modules/gsap/dist/MotionPathPlugin.js";
+import { MotionPathPlugin } from "gsap/MotionPathPlugin";
+
+
 
 
 function TestSVG() {
+  gsap.registerPlugin(MotionPathPlugin);
+  gsap.registerPlugin(ScrollTrigger);
 console.log("Started TestSVG")
   const vectorRef = useRef(null);
   const payloadRef = useRef(null);
@@ -62,19 +65,19 @@ console.log("Started TestSVG")
         
         <path className="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>
+        /* file="none" */ stroke="white" strokeWidth="10px"></path>
 
         
 
         <path className="theLine2" d="
         M 1030 50 S 540 200 540 1000 S -300 1200 540 2000 S -600 2200 540 3000 S 540 4000 540 4000 L 540 3500"
-        /* file="none" */ stroke="white" stroke-width="10px"></path>
+        /* file="none" */ stroke="white" strokeWidth="10px"></path>
 
 
 
         <path className="theLine3" d="
         M 2000 600 S -300 1200 540 2000 S -600 2200 540 3000 S 540 4000 -100 4000 L -100 4200"
-        /* file="none" */ stroke="white" stroke-width="10px"></path>
+        /* file="none" */ stroke="white" strokeWidth="10px"></path>
 
       </svg>
       <img ref={vectorRef} src="https://static.igem.wiki/teams/5247/scientific-figures/antibiotics-capsule.svg" alt="vectorImg"/>