reducing viewBox width + adding movable image

src/components/HomeAnimation.tsx

 import gsap from "gsap"; 
 import { useGSAP } from "@gsap/react";
 import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
-/*import { useRef } from 'react';*/
+import { useRef } from 'react';
 import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";
-/*import vectorImg from "https://static.igem.wiki/teams/5247/placeholders/vector.webp"*/
+import vectorImg from "https://static.igem.wiki/teams/5247/placeholders/vector.webp";
 
 export function HomeAnim() {
   gsap.registerPlugin(useGSAP);
   gsap.registerPlugin(MotionPathPlugin);
   gsap.registerPlugin(ScrollTrigger);
-  /*
+  
   const vectorRef = useRef(null);
-  */
+  
   useGSAP(
     () => {
     gsap.registerPlugin(ScrollTrigger);
@@ -28,7 +28,6 @@ export function HomeAnim() {
         end: "bottom middle"
       }
     })
-    /* Disabled for now
     .from(".homeAnimLine", {drawSVG: 0}, 0)
     .to(vectorRef.current, {motionPath:{
       path:".homeAnimLine",
@@ -36,9 +35,7 @@ export function HomeAnim() {
       alignOrigin:[0.5, 0.5],
     }}, 0)
     
-    Add this in return after svg later
-      <img ref={vectorRef} src={vectorImg} alt="vectorImg"/>
-    */
+    
     console.log(main)
   },
   );
@@ -46,7 +43,7 @@ export function HomeAnim() {
  
   return (
     <div className="row col">
-      <svg id="svg" viewBox="0 0 1500 4000">
+      <svg id="svg" viewBox="0 0 1200 4000">
         <path d="
         M 50 50 
         C 500 -50 1000 100 1870 50 
@@ -59,6 +56,7 @@ export function HomeAnim() {
         C 81 1794 21 1977 168 2142 
         C 499 2246 1403 2325 1081 2142"/>
       </svg>
+      <img ref={vectorRef} src={vectorImg} alt="vectorImg"/>
     </div>
   );
 }