From a4cff85c1010c6cc919511d3e429ecc42dbe528d Mon Sep 17 00:00:00 2001
From: T-A-H-prog <tomherpel.de>
Date: Fri, 3 Apr 2026 21:02:48 +0200
Subject: [PATCH] refector code and kill all scrollTrigger

---
 src/components/sections/ImageSection.vue | 251 ++++++++++++++---------
 src/components/sections/TextSection.vue  | 136 +++++-------
 src/views/HomeView.vue                   |  46 ++---
 3 files changed, 227 insertions(+), 206 deletions(-)

diff --git a/src/components/sections/ImageSection.vue b/src/components/sections/ImageSection.vue
index d6fc818..1f85679 100644
--- a/src/components/sections/ImageSection.vue
+++ b/src/components/sections/ImageSection.vue
@@ -1,132 +1,184 @@
 <script setup lang="js">
-import ski from '../../assets/myself/ski.png'
-import book from '../../assets/myself/SmartTom.jpeg'
-import surf from '../../assets/myself/surf.png'
-import boxen from '../../assets/myself/TOm.jpg'
-import florencs from '../../assets/myself/15.jpg'
-import schnee from '../../assets/myself/DSCN1921.jpg'
-import water from '../../assets/myself/27-2.jpg'
-import gopro from '../../assets/myself/GOPR0521.png'
+import ski from "../../assets/myself/ski.png";
+import book from "../../assets/myself/SmartTom.jpeg";
+import surf from "../../assets/myself/surf.png";
+import boxen from "../../assets/myself/TOm.jpg";
+import florencs from "../../assets/myself/15.jpg";
+import schnee from "../../assets/myself/DSCN1921.jpg";
+import water from "../../assets/myself/27-2.jpg";
+import gopro from "../../assets/myself/GOPR0521.png";
 
+import { ref, onMounted, onUnmounted } from "vue";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import Flip from "gsap/dist/Flip";
 
-import { ref, onMounted, onUnmounted } from "vue"
-import gsap from "gsap"
-import ScrollTrigger from "gsap/ScrollTrigger"
-import Flip from 'gsap/dist/Flip'
-
-gsap.registerPlugin(ScrollTrigger),
-gsap.registerPlugin(Flip);
-
-const section = ref(null)
-const gallery = ref(null)
-
-let ctx
-let flipCtx
+(gsap.registerPlugin(ScrollTrigger), gsap.registerPlugin(Flip));
 
+const section = ref(null);
+const gallery = ref(null);
 
+let ctx;
+let flipCtx;
 
 const createTween = () => {
-  let galleryElement = gallery.value
+  ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+
+  let galleryElement = gallery.value;
   let galleryItems = galleryElement.querySelectorAll(".gallery__item");
 
   flipCtx && flipCtx.revert();
   galleryElement.classList.remove("gallery--final");
 
   flipCtx = gsap.context(() => {
-
-    galleryElement.classList.add("gallery--final")
-    const state = Flip.getState(galleryItems)
-    galleryElement.classList.remove("gallery--final")
+    galleryElement.classList.add("gallery--final");
+    const state = Flip.getState(galleryItems);
+    galleryElement.classList.remove("gallery--final");
 
     const flip = Flip.to(state, {
       simple: true,
-      ease: "expoScale(1,5)"
-    })
+      ease: "expoScale(1,5)",
+    });
+
     const tl = gsap.timeline({
       scrollTrigger: {
         trigger: galleryElement,
         start: "center center",
         end: "+=100%",
         scrub: true,
-        pin: galleryElement.parentNode
-      }
-    })
-    tl.add(flip)
-  }, section.value)
-}
-  
-onMounted(() => {
+        pin: galleryElement.parentNode,
+      },
+    });
 
-  ctx = gsap.context(() => {
-    createTween()
-  }, section.value)
+    tl.add(flip);
+  }, section.value);
+};
+onUnmounted(() => {
+  ctx.revert();
+  flipCtx?.revert();
 
-  window.addEventListener("resize", createTween)
-  ScrollTrigger.refresh()
-})
+  ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+
+  window.removeEventListener("resize", createTween);
+});
 
 onUnmounted(() => {
-  ctx.revert()
-  flipCtx?.revert()
-
-  window.removeEventListener("resize", createTween)
-})
-
-
-
+  ctx.revert();
+  flipCtx?.revert();
 
+  window.removeEventListener("resize", createTween);
+});
 </script>
 <template>
-<section class="image-section" ref="section">
-<div class="gallery-wrap">
-  <div class="gallery gallery--bento gallery--switch" id="gallery-8" ref="gallery">
-    <div class="gallery__item">
-      <img :src=boxen alt="" />
+  <section class="image-section" ref="section">
+    <div class="gallery-wrap">
+      <div
+        class="gallery gallery--bento gallery--switch"
+        id="gallery-8"
+        ref="gallery"
+      >
+        <div class="gallery__item">
+          <img :src="boxen" alt="" />
+        </div>
+        <div class="gallery__item">
+          <img :src="gopro" alt="" />
+        </div>
+        <div class="gallery__item">
+          <img :src="schnee" alt="" />
+        </div>
+        <div class="gallery__item">
+          <img :src="surf" alt="" />
+        </div>
+        <div class="gallery__item">
+          <img :src="florencs" alt="" />
+        </div>
+        <div class="gallery__item">
+          <img :src="book" alt="" />
+        </div>
+        <div class="gallery__item">
+          <img :src="ski" alt="" />
+        </div>
+        <div class="gallery__item">
+          <img :src="water" alt="" />
+        </div>
+      </div>
     </div>
-    <div class="gallery__item">
-      <img :src=gopro alt="" />
+    <div class="text">
+      <h2>Here is some content</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </p>
     </div>
-    <div class="gallery__item">
-      <img :src=schnee alt="" />
-    </div>
-    <div class="gallery__item">
-      <img :src=surf alt="" />
-    </div>
-    <div class="gallery__item">
-      <img :src="florencs" alt="" />
-    </div>
-    <div class="gallery__item">
-      <img :src=book alt="" />
-    </div>
-    <div class="gallery__item">
-      <img :src=ski alt="" />
-    </div>
-    <div class="gallery__item">
-      <img :src=water alt="" />
-    </div>
-
-  </div>
-</div>
-<div class="text">
-  <h2>Here is some content</h2>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-</div>
-</section>
+  </section>
 </template>
 
 <style scoped>
@@ -214,5 +266,4 @@ p {
 .text {
   padding: 2rem 5rem;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/sections/TextSection.vue b/src/components/sections/TextSection.vue
index 3d9c31c..10707c2 100644
--- a/src/components/sections/TextSection.vue
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index bcef94f..ce2b339 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,45 +1,37 @@
 <script setup lang="ts">
-import HeroSection from '../components/sections/HeroSection.vue'
-import ImageSection from '../components/sections/ImageSection.vue'
-import TextSection from '../components/sections/TextSection.vue'
+import HeroSection from "../components/sections/HeroSection.vue";
+import ImageSection from "../components/sections/ImageSection.vue";
+import TextSection from "../components/sections/TextSection.vue";
 
-import { onMounted, nextTick } from "vue"
-import gsap from "gsap"
-import ScrollTrigger from "gsap/ScrollTrigger"
-import ScrollSmoother from "gsap/ScrollSmoother"
+import { onMounted, nextTick } from "vue";
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import ScrollSmoother from "gsap/ScrollSmoother";
 
-gsap.registerPlugin(ScrollTrigger, ScrollSmoother)
+gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
 onMounted(async () => {
-  await nextTick()
+  await nextTick();
 
   ScrollSmoother.create({
     wrapper: "#smooth-wrapper",
     content: "#smooth-content",
     smooth: 0.2,
-    effects: true
-  })
-
-  ScrollTrigger.refresh()
-})
-
-
+    effects: true,
+  });
 
+  ScrollTrigger.refresh();
+});
 </script>
 
 <template>
- <div id="smooth-wrapper">
+  <div id="smooth-wrapper">
     <div id="smooth-content">
-  <HeroSection id="hero" />
-  <ImageSection id="image" />
-  <TextSection id="text" />
-  </div>
+      <HeroSection id="hero" />
+      <ImageSection id="image" />
+      <TextSection id="text" />
+    </div>
   </div>
 </template>
 
-
-
-
-<style lang="css" scoped>
-
-</style>
\ No newline at end of file
+<style lang="css" scoped></style>