moving start of anim again + resize of img

src/components/HomeAnimation.tsx

@@ -22,7 +22,7 @@ export function HomeAnim() {
 
     const main = gsap.timeline({
       scrollTrigger: {
-        trigger: "svg",
+        trigger: "animStarterClass",
         scrub: true,
         start:"top middle",
         end: "+=4000"
@@ -43,7 +43,7 @@ export function HomeAnim() {
  
   return (
     <div className="row col">
-      <svg id="svg" viewBox="0 0 2160 4000">
+      <svg id="svg" viewBox="0 0 2000 2500">
         <path className="homeAnimLine"  d="
         M 50 50 
         C 500 -50 1000 100 1870 50 

src/components/test.css

@@ -34,11 +34,15 @@
   }
   
   .vector {
-    height: 100px;
-    width: 100px;
+    width: 20px;
+    height: 40px;
     background-color: white;
   }
   
+  .animStarterClass {
+    visibility: hidden;
+  }
+
   #payload {
     height: 100px;
     width: 100px;

src/contents/Home.tsx

@@ -34,7 +34,7 @@ export function Home() {
 
   return (
     <>
-      <div className="row">
+      <div className="row animStarterClass">
         <div className="col">
           <HomeAnim/>
         </div>