scrolltrigger hero page

src/components/sections/HeroSection.vue

@@ -2,6 +2,9 @@
 import { onMounted, onUnmounted, ref } from "vue"
 import gsap from "gsap"
 
+import ScrollTrigger from "gsap/ScrollTrigger"
+gsap.registerPlugin(ScrollTrigger)
+
 
 
 
@@ -13,32 +16,42 @@ function toggleTimeline() {
     tl.reversed(!tl.reversed())
 }
 function startNextAnimation() {
-  ctx = gsap.context((self) => {
-    const boxes = gsap.utils.toArray('.box')
-    tl = gsap.timeline({delay:2})
-    .to(boxes[0], {x: gsap.utils.random(300, 600), rotate :180})
-    .to(boxes[1], {x:-gsap.utils.random(300, 500), rotate: -180}, '<')
-    .to(boxes[2], {x: gsap.utils.random(300, 400) , rotate: 180})
-    .to(boxes[3], {x: gsap.utils.random(300, 500), rotate : 180})
-    .to(boxes[4], {x: - gsap.utils.random(300, 400), rotate: -180}, '<')
-    .to(boxes[5], {x: gsap.utils.random(300, 500) , rotate: 180})
-    .to(boxes[6], {x: -  gsap.utils.random(300, 600), rotate: 180})
-    .to(".title", { 
-    y: window.innerHeight - 130,
-    duration: 1.2,
-    ease: "power2.inOut"
-  })
-    .reverse();
-  }, main.value);
+  ctx = gsap.context(() => {
+
+    const boxes = gsap.utils.toArray(".box")
+
+    tl = gsap.timeline({
+      scrollTrigger: {
+        trigger: ".scroll-trigger-ready__worm-wrap",
+        start: "top 00%",
+        end: "bottom 30%",
+        scrub: 1
+      }
+    })
+
+    tl
+      .to(boxes[0], { x: gsap.utils.random(300, 600), rotate: 180 })
+      .to(boxes[1], { x: -gsap.utils.random(300, 500), rotate: -180 }, "<")
+      .to(boxes[2], { x: gsap.utils.random(300, 400), rotate: 180 })
+      .to(boxes[3], { x: gsap.utils.random(300, 500), rotate: 180 })
+      .to(boxes[4], { x: -gsap.utils.random(300, 400), rotate: -180 }, "<")
+      .to(boxes[5], { x: gsap.utils.random(300, 500), rotate: 180 })
+      .to(boxes[6], { x: -gsap.utils.random(300, 600), rotate: 180 })
+      .to(".title", {
+        y: window.innerHeight - 130,
+        duration: 4.0,
+        ease: "power2.inOut"
+      }, 0)
+
+  }, main.value)
 }
 
 onMounted(() => {
   startNextAnimation();
-  tl.reversed(false);
 });
 
 onUnmounted(() => {
-  ctx.revert()
+  ctx?.revert()
 }) 
 
 
@@ -82,6 +95,7 @@ onUnmounted(() => {
   font-weight: bold;
   color: #ffffff;
   
+
   
   font-size: clamp(2rem, 12rem, 5vw);
   box-sizing: border-box;
@@ -89,19 +103,30 @@ onUnmounted(() => {
   font-style: normal;
   font-weight: bold;
 
-}
-.titel { 
-  font-weight: 900;
-   font-size: clamp(3rem, 6vw, 6rem); 
-  
 }
 .box {
   width: 100px;
   height: 100px;
-  background: linear-gradient( 111.45deg,#ffffff 19.42%,#f7bdf8 73.08%);
+  background: linear-gradient(111.45deg, #ffffff 19.42%, #f7bdf8 73.08%);
   border-radius: 20%;
 }
 
+.box:nth-child(2) {
+  background: linear-gradient(111.45deg, #ffffff 19.42%, #39ffba 73.08%);
+}
+
+.box:nth-child(3) {
+  background: linear-gradient(111.45deg, #ffffff 56.42%, #aed1e3 73.08%);
+}
+
+.box:nth-child(4) {
+  background: linear-gradient(111.45deg, #ffffff 90.42%, #f8e3bd 12.08%);
+}
+
+.box:nth-child(5) {
+  background: linear-gradient(111.45deg, #ffffff 19.42%, #76aaee 73.08%);
+}
+