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) => {
+  ctx = gsap.context(() => {
-    const boxes = gsap.utils.toArray('.box')
+
-    tl = gsap.timeline({delay:2})
+    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[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[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,
+        duration: 4.0,
         ease: "power2.inOut"
-  })
+      }, 0)
-    .reverse();
+
-  }, main.value);
+  }, main.value)
 }
 
 onMounted(() => {
   startNextAnimation();
-  tl.reversed(false);
 });
 
 onUnmounted(() => {
-  ctx.revert()
+  ctx?.revert()
 }) 
 
 
@@ -83,17 +96,13 @@ onUnmounted(() => {
   color: #ffffff;
   
 
+  
   font-size: clamp(2rem, 12rem, 5vw);
   box-sizing: border-box;
    font-display: block;
   font-style: normal;
   font-weight: bold;
 
-}
-.titel { 
-  font-weight: 900;
-   font-size: clamp(3rem, 6vw, 6rem); 
-  
 }
 .box {
   width: 100px;
@@ -102,6 +111,22 @@ onUnmounted(() => {
   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%);
+}
+