fix: gsap scroll fixes at routing

src/components/big/ImageSection.vue

@@ -13,7 +13,6 @@ 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);
@@ -50,9 +49,7 @@ const createTween = () => {
     .add(flip);
 };
 
-
 onMounted(() => {
-
   ctx = gsap.context(() => {
     createTween();
 
@@ -69,8 +66,6 @@ onMounted(() => {
 onUnmounted(() => {
   ctx?.revert();
 });
-
-
 </script>
 <template>
   <section class="image-section" ref="section">
@@ -107,7 +102,7 @@ onUnmounted(() => {
       </div>
     </div>
     <div class="text">
-      <h2>Was ist Kunst?</h2>
+      <h2>Tom Herpel</h2>
       <p>
         Nach Schelling ist die Kunst das Erzeugnis oder die Folge jener
         Weltanschauung, nach der das Subjekt sich in sein Objekt verwandelt oder

src/components/big/IntroductionSection.vue

@@ -111,12 +111,7 @@ function getTimeDate() {
     <div class="b-three"></div>
     <div class="b-four"></div>
     <div class="b-five"></div>
-    <div class="b-six" text>
-      Die Schweizer**
-      <a href="https://en.wikipedia.org/wiki/Swiss_Style_(design)">
-        https://en.wikipedia.org/wiki/Swiss_Style_(design)
-      </a>
-    </div>
+    <div class="b-six" text></div>
     <div class="textblock text">
       <h4 class="text fontStyle">Tom Alexander Herpel</h4>
 

src/components/big/MonitorModel.vue

@@ -215,7 +215,7 @@ onUnmounted(() => {
   resizeObserver.disconnect();
   renderer?.dispose();
   gsapCtx?.revert();
-  ScrollTrigger.getAll().forEach((t) => t.kill());
+  // ScrollTrigger.getAll().forEach((t) => t.kill());
 });
 </script>
 <template>

src/components/big/TextSection.vue

@@ -69,11 +69,11 @@ window.addEventListener("resize", createTimeline);
 
       <div class="container second">
         <div class="experience-text">
-          <h2>Enten?</h2>
+          <h2>About Me</h2>
         </div>
         <div class="marker"></div>
-        <router-link to="/books">
-          <button class="btn second-btn">Books i've read</button>
+        <router-link to="/motion/me">
+          <button class="btn second-btn">Get to know me</button>
         </router-link>
       </div>
       <div class="container third">
@@ -193,7 +193,7 @@ body {
 
 .experience-text h2 {
   font-size: 1.2rem;
-  color: white;
+  color: #7c7c6f;
   margin: 0;
 }
 

src/components/big/WelcomeSection.vue

@@ -78,6 +78,9 @@ onMounted(async () => {
   ctx = gsap.context(() => {
     initParallax(parallaxRef.value);
     // initChild();
+    requestAnimationFrame(() => {
+      ScrollTrigger.refresh();
+    });
     initLenis();
   });
 });
@@ -213,6 +216,7 @@ onUnmounted(() => {
   left: 0;
 }
 .parallax__title {
+  color: antiquewhite;
   pointer-events: auto;
   text-align: center;
   text-transform: none;

src/components/slim/AboutMe.vue

@@ -3,12 +3,12 @@
     <div class="parent">
       <!-- TOP LEFT -->
       <div class="div3">
-        <span>Portfolio / 01</span>
+        <span>About me / 01</span>
       </div>
 
       <!-- TOP CENTER -->
       <div class="div12">
-        <span>About me</span>
+        <span>TH</span>
       </div>
 
       <!-- TOP RIGHT -->

src/components/slim/Main.vue

@@ -80,7 +80,7 @@
         <span class="arrow">↓</span>
       </section>
 
-      <section class="div22 location">
+      <section class="div22 location" @click="$router.push('/motion')">
         <span>Location</span>
 
         <div class="location-name">