updating textsection

src/assets/bird-claw.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

src/assets/crow-dive-svgrepo-com.svg

@@ -0,0 +1,9 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#000000">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier">

src/components/sections/TextSection.vue

@@ -4,70 +4,104 @@ 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;
 
-let ctx, renderer, scene, camera, mesh, canvasEl;
+const createTimeline = () => {
+  flipCtx && flipCtx.revert(); // alte Flip-Timeline zurücksetzen
 
+  flipCtx = gsap.context(() => {
+    const flipConfig = { ease: "none", duration: 1  };
 
-function initThree(canvas) {
+    // Flip-States der Marker holen
-  renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+    const secondState = Flip.getState(".second .marker");
-  renderer.outputColorSpace = THREE.SRGBColorSpace;
+    const thirdState = Flip.getState(".third .marker");
 
-  scene = new THREE.Scene();
+    // Timeline mit ScrollTrigger
-  camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
+    const tl = gsap.timeline({
-  camera.position.set(0, 0, 3);
+      scrollTrigger: {
-
+        trigger: ".container.initial",
-  const mat = new THREE.MeshBasicMaterial({ map: makeGradientNoiseTexture() });
+        start: "clamp(top center)",
-  mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), mat);
+        endTrigger: ".final",
-  scene.add(mesh);
+        end: "clamp(bottom center)",
-
+        scrub: 1,
-  gsap.ticker.add(render);
-  onResize();
-
-  buildTimeline();
       }
+    });
+
+    // initial -> second
+    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");
+  });
+};
+
+
+
+
+onMounted(() => {
+
+ createTimeline();
+
+  window.addEventListener("resize", createTween)
+  ScrollTrigger.refresh()
+
+})
+
+onUnmounted(() => {
+  flipCtx?.revert()
+  window.removeEventListener("resize", createTween);
+  gsap.ticker.remove(updateMorph)
+})
+
+window.addEventListener("resize", createTimeline)
 
 </script>
 
 <template>
-  <div class="spacer">scroll down</div>
 
 <div class="main">
   <div class="container initial">
-    <h2 class="fade-text">
+    <div class="circle"></div>
-      Do you want to see where I used to study?
+    </div>
-      <!-- A blog that <span class="highlight">moves with you</span> -->
+      
-    </h2>
+
-    <p class="fade-text">
+
-    </p>
+    <div class="container second">
+      <div class="experience-text">
+    <h2>Do you want to see where I used to study?</h2>
+      </div>
+    <div class="marker"></div>
     <router-link to="/experience">
-    <button class="btn">Zur Experience</button>
+      <button class="btn second-btn">Zur Experience</button>
     </router-link>
   </div>
     
-  <div class="container second">
-    <div class="marker"></div>
-  </div>
     
     <div class="container third">
+      <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>
-.text-section {
+
-  min-height: 100vh;
+
-  background: #111;
-  color: white;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 6rem 10%;
-}
 
 h2 {
   font-size: 1.2rem;
@@ -81,6 +115,8 @@ h2 {
   background-position: left;
   padding: 0 0.3rem;
 }
+
+
 .btn {
   background-color: white;
   color: #1a1a2e; /* dunkler Text */
@@ -91,6 +127,7 @@ h2 {
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+  opacity: 0;
 }
 
 .btn:hover {
@@ -104,10 +141,8 @@ h2 {
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
 
-:root {
+
-  --grid-line: rgba(255, 255, 255, 0.08);
+
-  --box-border: rgba(255, 255, 255, 0.25);
-}
 
 
 body {
@@ -131,38 +166,69 @@ body {
 .spacer {
   width: 100%;
   height: 20vh;
-  display: grid;
+  display: flex;
-  place-items: center;
+  align-items: center;
-  font-weight: 600;
+  justify-content: center;
-  letter-spacing: 0.02em;
-  opacity: 0.8;
 }
 
+
+
 .main {
   position: relative;
   height: 200vh;
+   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: grid;
+  display: flex;
-  place-items: center;
+  flex-direction: column; /* Items untereinander */
-  border: 2px dashed var(--box-border);
+  align-items: center;    /* horizontal zentrieren */
-  border-radius: 12px;
+  justify-content: center; /* vertikal zentrieren, kann auch flex-start sein */
+}
+
+
+.experience-text {
+  width: 200px;
+  text-align: center;
+}
+
+.experience-text h2 {
+  font-size: 1.2rem;
+  color: white;
+  margin: 0;
 }
 
 .initial {
   left: 60%;
-  top: 10%;
+  top: 0%;
 }
 
-.container.second {
+.circle {
-  left: 10%;
-  top: 50%;
   width: 100px;
   height: 100px;
+  position: relative;
+  z-index: 10;
+  border-radius: 10px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  background-image: url("../../assets/bird-claw.svg");
+}
+
+.second {
+  left: 10%;
+  top: 50%;
+}
+
+.marker {
+  border-radius: 10px;
+
 }
 
 .second .marker {
@@ -175,24 +241,13 @@ body {
   bottom: 3rem;
 }
 
-.marker {
+.third .marker {
-  width: 200px;
+  width: 100px;
-  height: 200px;
+  height: 100px;
-  border-radius: 10px;
-  outline: 1px dashed var(--grid-line);
-  outline-offset: -6px;
-  opacity: 0.6;
 }
 
 
-canvas.box {
+
-  width: 200px;
+
-  height: 200px;
-  border: dashed 1px #d2ceff;
-  display: block;
-  border-radius: 10px;
-  background: transparent;
-  z-index: 2;
-}
 
 </style>