Testing different start trigger

src/contents/Home.tsx

@@ -54,7 +54,7 @@ export function Home() {
 
     const main = gsap.timeline({
       scrollTrigger: {
-        trigger: "svg",
+        trigger: "animStarterClass",
         scrub: true,
         start:"top middle",
         end: "bottom middle"
@@ -74,24 +74,26 @@ export function Home() {
 
   return (
     <>
-      <div className="row col">
-        <H2 text="iGEM Bielefeld-CeBiTec 2024"/>
-      </div>
-      <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 className="animStarterClass">
+        <div className="row col">
+          <H2 text="iGEM Bielefeld-CeBiTec 2024"/>
+        </div>
+        <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>
     </>
   );