fix: gsap scroll fixes at routing

src/App.vue

@@ -1,10 +1,13 @@
 <script setup lang="js"></script>
 <template>
-  <router-view />
+  <router-view v-slot="{ Component }">
+    <Transition name="page" mode="out-in">
+      <component :is="Component" />
+    </Transition>
+  </router-view>
 </template>
 
 <style>
-/* Global Reset */
 *,
 *::before,
 *::after {
@@ -29,4 +32,14 @@ body {
     url("/src/assets/retro_cursor.svg") 2 0,
     auto;
 }
+
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.4s ease;
+}
+
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+}
 </style>

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">

src/router/index.ts

@@ -1,13 +1,16 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
 import HomeBig from '../views/HomeBig.vue'
-import DucksInfo from '../views/InfoDucks.vue'
+// import DucksInfo from '../views/InfoDucks.vue'
 import BooksShow from '../views/BooksShow.vue'
 import SlimMain from '../views/HomeSlime.vue'
+import BigMeImg from '../views/ImageSection.vue'
 
 
 const routes: RouteRecordRaw[] = [
   { path: '/', component: SlimMain },
-  {path: '/ducks', component: DucksInfo},
+  { path: '/motion', component: HomeBig },
+
+  {path: '/motion/me', component: BigMeImg},
   {path: '/books', component: BooksShow}
 
   // { path: '/ducks',

src/views/HomeBig.vue

@@ -3,7 +3,7 @@ import WelcomeSection from "../components/big/WelcomeSection.vue";
 
 import TextSection from "../components/big/TextSection.vue";
 
-import { onMounted, nextTick } from "vue";
+import { onMounted, nextTick, onUnmounted } from "vue";
 import gsap from "gsap";
 import ScrollTrigger from "gsap/ScrollTrigger";
 import ScrollSmoother from "gsap/ScrollSmoother";
@@ -13,6 +13,8 @@ import IntroductionSection from "../components/big/IntroductionSection.vue";
 
 gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
+let smoother: ScrollSmoother | null = null;
+
 onMounted(async () => {
   await nextTick();
 
@@ -25,6 +27,13 @@ onMounted(async () => {
 
   ScrollTrigger.refresh();
 });
+
+onUnmounted(() => {
+  smoother?.kill();
+  smoother = null;
+
+  ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+});
 </script>
 
 <template>
@@ -33,7 +42,7 @@ onMounted(async () => {
       <WelcomeSection id="welcome" />
       <!-- <NewTextSection id="newText" /> -->
 
-      <IntroductionSection id="welcome" />
+      <IntroductionSection />
       <MonitorModel id="model" />
       <!-- <HeroSection id="hero" /> -->
       <!-- <ImageSection id="image" /> -->

src/views/HomeSlime.vue

@@ -4,10 +4,9 @@ import AboutMe from "../components/slim/AboutMe.vue";
 
 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(ScrollSmoother);
 
 onMounted(async () => {
   await nextTick();
@@ -15,11 +14,9 @@ onMounted(async () => {
   ScrollSmoother.create({
     wrapper: "#smooth-wrapper",
     content: "#smooth-content",
-    smooth: 0.2,
+    smooth: 1.5,
     effects: true,
   });
-
-  ScrollTrigger.refresh();
 });
 </script>
 

src/views/ImageSection.vue

@@ -0,0 +1,249 @@
+<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 { 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);
+const img_daten = ref(null);
+
+let ctx;
+let flipCtx;
+
+const createTween = () => {
+  const galleryElement = gallery.value;
+  const galleryItems = galleryElement.querySelectorAll(".gallery__item");
+
+  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)",
+  });
+
+  gsap
+    .timeline({
+      scrollTrigger: {
+        trigger: galleryElement,
+        start: "center center",
+        end: "+=100%",
+        scrub: true,
+        pin: galleryElement.parentNode,
+        invalidateOnRefresh: true,
+      },
+    })
+    .add(flip);
+};
+
+onMounted(() => {
+  ctx = gsap.context(() => {
+    createTween();
+
+    window.addEventListener("resize", () => {
+      ScrollTrigger.refresh();
+    });
+  }, section.value);
+
+  requestAnimationFrame(() => {
+    ScrollTrigger.refresh();
+  });
+});
+
+onUnmounted(() => {
+  ctx?.revert();
+});
+</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="ski" alt="" />
+        </div>
+        <div class="gallery__item">
+          <img :src="schnee" alt="" />
+        </div>
+        <div class="gallery__item">
+          <img :src="schnee" alt="" />
+        </div>
+        <div class="gallery__item">
+          <img :src="schnee" alt="" />
+        </div>
+        <div class="gallery__item">
+          <img :src="schnee" 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>Was ist Kunst?</h2>
+      <p>
+        Nach Schelling ist die Kunst das Erzeugnis oder die Folge jener
+        Weltanschauung, nach der das Subjekt sich in sein Objekt verwandelt oder
+        das Objekt selbst 45 zum Subjekt wird. Die Schönheit ist die Darstellung
+        des Unendli- chen im Endlichen. Und der Grundcharakter eines Kunstwerkes
+        ist die bewußtlose Unendlichkeit. Die Kunst ist die Vereinigung des
+        Subjektiven mit dem Objektiven, – der Natur mit der Vernunft, der
+        Bewußtlosigkeit mit dem Bewußten. Und deshalb ist die Kunst das höchste
+        Mittel der Erkenntnis. Die Schönheit ist die Betrachtung der Dinge an
+        sich, wie sie in Urbildern sind. Das Schöne erzeugt nicht der Künstler
+        vermöge seines Wissens oder seines Willens, sondern die Idee der
+        Schönheit selbst schafft in ihm. (Schaßler)
+      </p>
+      <p>
+        In der Welt erblicken wir nur die Entartung der Grundidee, die Kunst
+        jedoch kann ver- möge der Phantasie sich bis zur Höhe der Grundidee
+        erheben. Und deshalb ist die Kunst das Ebenbild der Schöpfung
+        (Schaßler).
+      </p>
+      <p>
+        Nach einem anderen Anhänger Schellings, Krause (1781–1832), ist die
+        wahre reale Schönheit die Erzeugung der Idee in der indivi- duellen
+        Form; die Kunst ist aber die Verwirklichung der Schönheit in der Sphäre
+        des freien menschlichen Geistes. Die höchste Stufe der Kunst ist die
+        Kunst des Lebens, die ihre Thätigkeit auf die Verschö- nerung des Lebens
+        richtet, damit dies ein schön belebter Wohnort für die selber in
+        Schönheit vollendete Menschheit sei. (Ebd.)
+      </p>
+      <p>
+        Nach Hegel (1770–1831) offenbart sich Gott in Natur und Kunst unter der
+        Form der Schönheit. Gott äußert sich auf zweierlei Weise: in dem Objekt
+        und in dem Subjekt, – in der Natur und im Geiste. Die Schönheit ist
+        jedoch das Durch- scheinen der Idee durch den Stoff. Das wahrhaft Schöne
+        ist nur der Geist und alles das, was dem Geiste teilhaftig ist. Deshalb
+        ist die Schönheit der Natur nur der Schein der dem Geiste eigenen Schön-
+        heit: das Schöne hat nur als Geistiges wahrhaften Gehalt. Aber das
+        Geistige muß in der sinnlichen Form erscheinen. Die sinnliche Äu- ßerung
+        des Geistes jedoch ist nur der Schein. Und dieser Schein ist die
+        eigentliche Wirklichkeit des Schönen. Sodaß die Kunst die 46
+        Verwirklichung dieses Scheines der Idee und zugleich mit der Reli- gion
+        und Philosophie das Mittel ist, die tiefsten Interessen der Men- schen
+        und die umfassendsten Wahrheiten des Geistes zum Bewußt- sein zu bringen
+        und auszusprechen. Wahrheit und Schönheit sind nach Hegel ein und
+        dasselbe: der Unterschied besteht nur darin, daß die Wahrheit die Idee
+        ist, wie diese an sich und dem allgemeinen Prinzip nach ist und als
+        solches gedacht wird. Die Idee jedoch, die äußerlich existiert, wird für
+        das Bewußtsein nicht blos wahr, son- dern auch schön. Das Schöne ist das
+        Scheinen der Idee
+      </p>
+      <p>
+        --- Was ist Kunst?, Leo N. Tolstoi, Aus dem Russischen von Michail
+        Feofanov (1902) ---
+      </p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+p {
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+}
+
+.gallery-wrap {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.gallery {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  flex: none;
+}
+
+.gallery__item {
+  background-position: 50% 50%;
+  background-size: cover;
+  flex: none;
+  position: relative;
+  img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.gallery--bento {
+  display: grid;
+  gap: 1vh;
+  grid-template-columns: repeat(3, 32.5vw);
+  grid-template-rows: repeat(4, 23vh);
+  justify-content: center;
+  align-content: center;
+}
+
+.gallery--final.gallery--bento {
+  grid-template-columns: repeat(3, 100vw);
+  grid-template-rows: repeat(4, 49.5vh);
+  gap: 1vh;
+}
+
+.gallery--bento .gallery__item:nth-child(1) {
+  grid-area: 1 / 1 / 3 / 2;
+}
+
+.gallery--bento .gallery__item:nth-child(2) {
+  grid-area: 1 / 2 / 2 / 3;
+}
+
+.gallery--bento .gallery__item:nth-child(3) {
+  grid-area: 2 / 2 / 4 / 3;
+}
+
+.gallery--bento .gallery__item:nth-child(4) {
+  grid-area: 1 / 3 / 3 / 3;
+}
+
+.gallery--bento .gallery__item:nth-child(5) {
+  grid-area: 3 / 1 / 3 / 2;
+}
+
+.gallery--bento .gallery__item:nth-child(6) {
+  grid-area: 3 / 3 / 5 / 4;
+}
+
+.gallery--bento .gallery__item:nth-child(7) {
+  grid-area: 4 / 1 / 5 / 2;
+}
+
+.gallery--bento .gallery__item:nth-child(8) {
+  grid-area: 4 / 2 / 5 / 3;
+}
+
+.text {
+  font-family: Courier New;
+  padding: 2rem 5rem;
+}
+</style>