refector code and kill all scrollTrigger

src/components/sections/TextSection.vue

@@ -1,12 +1,11 @@
-
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue"
-import gsap from "gsap"
-import ScrollTrigger from "gsap/ScrollTrigger"
-import Flip from 'gsap/dist/Flip'
-import { checkCompatEnabled } from "@vue/compiler-core"
+import { ref, onMounted, onUnmounted } from "vue";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import Flip from "gsap/dist/Flip";
+import { checkCompatEnabled } from "@vue/compiler-core";
 
-gsap.registerPlugin(Flip, ScrollTrigger)
+gsap.registerPlugin(Flip, ScrollTrigger);
 
 let flipCtx;
 
@@ -14,7 +13,7 @@ const createTimeline = () => {
   flipCtx && flipCtx.revert(); // alte Flip-Timeline zurücksetzen
 
   flipCtx = gsap.context(() => {
-    const flipConfig = { ease: "none", duration: 1  };
+    const flipConfig = { ease: "none", duration: 1 };
 
     // Flip-States der Marker holen
     const secondState = Flip.getState(".second .marker");
@@ -28,81 +27,69 @@ const createTimeline = () => {
         endTrigger: ".final",
         end: "clamp(bottom center)",
         scrub: 1,
-      }
+      },
     });
 
     // initial -> second
-    tl.add(Flip.fit(".circle", secondState, flipConfig))
-      .add(() => {
-        gsap.set(".second-btn", { opacity: 1, pointerEvents: "auto" , zIndex: 1000});
-      }, "+=0.1");
+    tl.add(Flip.fit(".circle", secondState, flipConfig)).add(() => {
+      gsap.set(".second-btn", {
+        opacity: 1,
+        pointerEvents: "auto",
+        zIndex: 1000,
+      });
+    }, "+=0.1");
 
     // second -> third
-    tl.add(Flip.fit(".circle", thirdState, flipConfig)) 
-      .add(() => {
-        gsap.set(".third-btn", { opacity: 1, pointerEvents: "auto" });
-      }, "+=0.01");
+    tl.add(Flip.fit(".circle", thirdState, flipConfig)).add(() => {
+      gsap.set(".third-btn", { opacity: 1, pointerEvents: "auto" });
+    }, "+=0.01");
   });
 };
 
-
-
-
 onMounted(() => {
+  createTimeline();
 
- createTimeline();
-
-  window.addEventListener("resize", createTween)
-  ScrollTrigger.refresh()
-
-})
+  window.addEventListener("resize", createTween);
+  ScrollTrigger.refresh();
+});
 
 onUnmounted(() => {
-  flipCtx?.revert()
+  flipCtx?.revert();
   window.removeEventListener("resize", createTween);
-  gsap.ticker.remove(updateMorph)
-})
-
-window.addEventListener("resize", createTimeline)
+  gsap.ticker.remove(updateMorph);
+});
 
+window.addEventListener("resize", createTimeline);
 </script>
 
 <template>
-
-<div class="main">
-  <div class="container initial">
-    <div class="circle"></div>
+  <div class="main">
+    <div class="container initial">
+      <div class="circle"></div>
     </div>
-      
-
 
     <div class="container second">
       <div class="experience-text">
-    <h2>Do you want to see where I used to study?</h2>
+        <h2>Do you want to see where I used to study?</h2>
       </div>
-    <div class="marker"></div>
-    <router-link to="/experience">
-      <button class="btn second-btn">Zur Experience</button>
-    </router-link>
-  </div>
-    
-    
+      <div class="marker"></div>
+      <router-link to="/experience">
+        <button class="btn second-btn">Zur Experience</button>
+      </router-link>
+    </div>
+
     <div class="container third">
-      <div class="experience-text"> 
-    <h2>Here is the final step!</h2>
-  </div>
+      <div class="experience-text">
+        <h2>Here is the final step!</h2>
+      </div>
       <div class="marker"></div>
       <button class="btn third-btn">Next</button>
     </div>
   </div>
   <div class="spacer final"></div>
-
 </template>
 
 <style scoped>
-
-
-
 h2 {
   font-size: 1.2rem;
   margin-bottom: 2rem;
@@ -116,7 +103,6 @@ h2 {
   padding: 0 0.3rem;
 }
 
-
 .btn {
   background-color: white;
   color: #1a1a2e; /* dunkler Text */
@@ -126,35 +112,37 @@ h2 {
   border-radius: 8px;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   opacity: 0;
 }
 
 .btn:hover {
   background-color: #f0f0f0;
   transform: translateY(-2px);
-  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }
 
 .btn:active {
   transform: translateY(0);
-  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
-
-
-
-
 body {
-  background-image: linear-gradient(
-      rgba(255, 255, 255, 0.05) 2px,
-      transparent 2px
-    ),
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.05) 2px, transparent 2px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px),
     linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
     linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
-  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
-  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+  background-size:
+    100px 100px,
+    100px 100px,
+    20px 20px,
+    20px 20px;
+  background-position:
+    -2px -2px,
+    -2px -2px,
+    -1px -1px,
+    -1px -1px;
 }
 
 * {
@@ -171,28 +159,24 @@ body {
   justify-content: center;
 }
 
-
-
 .main {
   position: relative;
   height: 200vh;
-   min-height: 800px;
+  min-height: 800px;
   --grid-line: rgba(255, 255, 255, 0.08);
   --box-border: rgba(255, 255, 255, 0.25);
 }
 
-
 .container {
   position: absolute;
   width: 200px;
   height: 200px;
   display: flex;
   flex-direction: column; /* Items untereinander */
-  align-items: center;    /* horizontal zentrieren */
+  align-items: center; /* horizontal zentrieren */
   justify-content: center; /* vertikal zentrieren, kann auch flex-start sein */
 }
 
-
 .experience-text {
   width: 200px;
   text-align: center;
@@ -228,7 +212,6 @@ body {
 
 .marker {
   border-radius: 10px;
-
 }
 
 .second .marker {
@@ -245,9 +228,4 @@ body {
   width: 100px;
   height: 100px;
 }
-
-
-
-
-
-</style>
+</style>