starting to animate imagesection

src/components/sections/HeroSection.vue

@@ -3,6 +3,8 @@ import { onMounted, onUnmounted, ref } from "vue"
 import gsap from "gsap"
 
 import ScrollTrigger from "gsap/ScrollTrigger"
+
+
 gsap.registerPlugin(ScrollTrigger)
 
 
@@ -51,15 +53,16 @@ function startNextAnimation() {
     tl = gsap.timeline({
       scrollTrigger: {
         trigger: ".scroll-trigger-ready__worm-wrap",
-        start: "top 00%",
+        start: "top top",
         end: "bottom 35%",
-        scrub: 2
+        scrub: 2,
+        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
@@ -79,6 +82,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   ctx?.revert()
+  scrollTrigger.getAll().forEach(t => t.kill())
 })