heropage matrix

src/components/sections/HeroSection.vue

@@ -7,37 +7,63 @@ gsap.registerPlugin(ScrollTrigger)
 
 
 
-
 const main = ref(null);
 let tl;
 let ctx;
 
+
+function setBoxes() {
+
+  const wrapper = main.value.querySelector('.content-wrapper');
+  const rect = wrapper.getBoundingClientRect();
+
+  const boxes = gsap.utils.toArray(".box");
+
+  gsap.set(".title", { y: 200 });
+
+  boxes.forEach((box) => {
+
+    const randomX = gsap.utils.random(0, rect.width);
+    const randomY = gsap.utils.random(0, rect.height);
+
+    gsap.set(box, {
+      x: randomX,
+      y: randomY,
+      xPercent: -50,
+      yPercent: -50
+    });
+
+  });
+}
+
+
+
+
 function toggleTimeline() {
     tl.reversed(!tl.reversed())
 }
 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 00%",
-        end: "bottom 30%",
-        scrub: 1
+        end: "bottom 35%",
+        scrub: 2
       }
     })
 
-    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", {
+    tl.to(boxes, {
+      y: () => gsap.utils.random(-400, -150),
+
+      rotate: () => gsap.utils.random(-180, 180),
+      ease: "none",
+      stagger: 0.05
+    }).to(".title", {
         y: window.innerHeight - 130,
         duration: 4.0,
         ease: "power2.inOut"
@@ -47,6 +73,7 @@ function startNextAnimation() {
 }
 
 onMounted(() => {
+  setBoxes();
   startNextAnimation();
 });
 
@@ -57,22 +84,36 @@ onUnmounted(() => {
 
 </script>
 <template>
-<section class="container" ref="main">
-  <h1 class="title">Welcome</h1>
-  <div>
-      </div>
+  <section class="container" ref="main">
+    <div class="content-wrapper">
+      <h1 class="title">Welcome</h1>
+      <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"></div>
-      <div class="box"></div>
-      <div class="box"></div>
-      <div class="box"></div>
-      <div class="box"></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>   
+       
 
-</section>
+    </div>
+  </section>
 </template>
 
 <style scoped>
+
   .container {
     background: radial-gradient(
       129% 99% at 20% 85%,
@@ -88,43 +129,37 @@ onUnmounted(() => {
   align-items: center;
   }
 
-  
+
+.content-wrapper {
+  position: relative;
+  width: 100%;
+  height: 80vh;          
+
+}
+
 .title {
-  font-display: block;
-  font-style: normal;
-  font-weight: bold;
-  color: #ffffff;
-  
+  position: relative;   
+  z-index: 1;
+  text-align: center;
 
-  
   font-size: clamp(2rem, 12rem, 5vw);
-  box-sizing: border-box;
-   font-display: block;
-  font-style: normal;
-  font-weight: bold;
-
+  margin: 0;
 }
+
+
+
 .box {
-  width: 100px;
-  height: 100px;
-  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%);
-}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-weight: 600;
+  color: var(--green);
 
-.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%);
+  line-height: 1.2;
+  will-change: transform;
+  position: absolute;
 }