scrollTrigger second section

src/components/sections/HeroSection.vue

@@ -3,8 +3,6 @@ import { onMounted, onUnmounted, ref } from "vue"
 import gsap from "gsap"
 
 import ScrollTrigger from "gsap/ScrollTrigger"
-
-
 gsap.registerPlugin(ScrollTrigger)
 
 
@@ -38,9 +36,6 @@ function setBoxes() {
   });
 }
 
-
-
-
 function toggleTimeline() {
     tl.reversed(!tl.reversed())
 }
@@ -48,28 +43,28 @@ function startNextAnimation() {
   const centerX = window.innerWidth / 2
   const centerY = window.innerHeight / 2
   const radius = 250
+
   ctx = gsap.context(() => {
     const boxes = gsap.utils.toArray(".box")
     tl = gsap.timeline({
       scrollTrigger: {
-        trigger: ".scroll-trigger-ready__worm-wrap",
+
         start: "top top",
-        end: "bottom 35%",
-        scrub: 2,
-        pin: true
+        end: "+=100%",
+        scrub: true,
+        pin: true,
       }
     })
 
     tl.to(boxes, {
       y: () => gsap.utils.random(-400, -150),
-      duration : 3.5,
       rotate: () => gsap.utils.random(-180, 180),
       ease: "none",
       stagger: 0.05
     }).to(".title", {
         y: window.innerHeight - 130,
-        duration: 4.0,
-        ease: "power2.inOut"
+        ease: "power2.inOut",
+        duration: 2.0
       }, 0)
 
   }, main.value)
@@ -82,7 +77,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   ctx?.revert()
-  scrollTrigger.getAll().forEach(t => t.kill())
+  // scrollTrigger.getAll().forEach(t => t.kill())
 }) 
 
 
@@ -110,6 +105,26 @@ onUnmounted(() => {
       <div class="box">o</div>
       <div class="box">T</div>      
       <div class="box">r</div>   
+      <div class="box">l</div>
+      <div class="box">e</div>
+      <div class="box">e</div>
+      <div class="box">r</div>
+      <div class="box">p</div>
+      <div class="box"></div>
+      <div class="box">H</div>
+      <div class="box">e</div>
+      <div class="box">d</div>
+      <div class="box">n</div>
+      <div class="box">a</div>
+      <div class="box">e</div>
+      <div class="box">l</div>
+      <div class="box">A</div>
+      <div class="box">x</div>
+      <div class="box">m</div>
+      <div class="box">o</div>
+      <div class="box">T</div>      
+      <div class="box">r</div>   
+      
        
 
     </div>