working on start page

src/components/sections/HeroSection.vue

@@ -1,55 +1,62 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue"
+<script setup lang="js">
+import { onMounted, onUnmounted, ref } from "vue"
 import gsap from "gsap"
 
 
 
 
-const box = ref<HTMLElement | null>(null)
+const main = ref(null);
+let tl;
+let ctx;
 
-const heroText = ref<HTMLElement | null>(null)
-const c = ref<HTMLElement | null>(null)
-//section.value = document.querySelector(".hero")
+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);
+}
 
 onMounted(() => {
-  if (box.value) {
-    gsap.fromTo(box.value, { yPercent: 100 , delay : 1 }, { x: () => window.innerWidth * 0.4 , y:  () => window.innerHeight * 0.1 ,rotate: 90,  duration: 4, repeat: 8, yoyo: true, delay : 1})
-  }
-  if (heroText.value) {
-  gsap.fromTo(
-    heroText.value,
-    { 
-      x: 0,        
-      y: 0,
+  startNextAnimation();
+  tl.reversed(false);
+});
+
+onUnmounted(() => {
+  ctx.revert()
+}) 
+
 
-    },
-    { 
-      // x: () => window.innerWidth / 2 - heroText.value!.offsetWidth / 2,  
-      y: () => window.innerHeight / 2 - heroText.value!.offsetHeight / 2 + 25,
-      duration: 4,
-      ease: "power2.inOut"
-    }
-  )
-}
-  if (c.value) {
-    gsap.fromTo(c.value, {delay: 1}, {
-        x: () => window.innerWidth * 0.1,
-        y: () => window.innerHeight * 0.1,
-      })
-  }
-})
 </script>
 <template>
-<div class="container">
-  <div ref="box" class="box green"></div>
-  <section ref="section" class="hero">
-    <div ref="heroText" class="hero-text">
-      <div class="titel" >Welcome</div>
-      <div>to my website</div>
-    </div>
-    <!-- <p class="hero-sub">Tom Herpel</p> -->
-  </section>
-</div>
+<section class="container" ref="main">
+  <h1 class="title">Welcome</h1>
+  <div>
+      </div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>    
+      <div class="box"></div>    
+
+</section>
 </template>
 
 <style scoped>
@@ -60,18 +67,16 @@ onMounted(() => {
       rgb(0, 0, 0) 90%
     );
   background-blend-mode: color-dodge;
-  }
-
-  
-.hero {
-  min-height: 100vh;
+    min-height: 100vh;
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-}
-.hero-text {
+  }
+
+  
+.title {
   font-display: block;
   font-style: normal;
   font-weight: bold;
@@ -80,7 +85,10 @@ onMounted(() => {
   
   font-size: clamp(2rem, 12rem, 5vw);
   box-sizing: border-box;
-  width: 100%;
+   font-display: block;
+  font-style: normal;
+  font-weight: bold;
+
 }
 .titel { 
   font-weight: 900;