3d tv

src/components/sections/TextSection.vue

@@ -48,45 +48,45 @@ const createTimeline = () => {
 
 onMounted(() => {
   createTimeline();
-
-  window.addEventListener("resize", createTween);
+  window.addEventListener("resize", createTimeline);
   ScrollTrigger.refresh();
 });
 
 onUnmounted(() => {
   flipCtx?.revert();
-  window.removeEventListener("resize", createTween);
-  gsap.ticker.remove(updateMorph);
+  window.removeEventListener("resize", createTimeline);
 });
 
 window.addEventListener("resize", createTimeline);
 </script>
 
 <template>
-  <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>
+  <section class="text-section">
+    <div class="main">
+      <div class="container initial">
+        <div class="circle"></div>
       </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 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 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="marker"></div>
+        <button class="btn third-btn">Next</button>
       </div>
-      <div class="marker"></div>
-      <button class="btn third-btn">Next</button>
     </div>
-  </div>
-  <div class="spacer final"></div>
+    <div class="spacer final"></div>
+  </section>
 </template>
 
 <style scoped>