paralaxx content height

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "gsap": "^3.14.2",
-        "lenis": "^1.3.21",
+        "lenis": "^1.3.23",
         "pinia": "^3.0.4",
         "three": "^0.183.2",
         "vue": "^3.5.29",
@@ -1258,9 +1258,9 @@
       }
     },
     "node_modules/lenis": {
-      "version": "1.3.21",
+      "version": "1.3.23",
-      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.21.tgz",
+      "resolved": "https://registry.npmjs.org/lenis/-/lenis-1.3.23.tgz",
-      "integrity": "sha512-RXWTYm7KQE4Kv8ezxL6wvK0Oiv7aRr6FDo+eNaaniTeu7pLdHokqMIJ5CXO4x5ezvd+9ONdpSFkprLpXsVWmEw==",
+      "integrity": "sha512-YxYq3TJqj9sJNv0V9SkyQHejt14xwyIwgDaaMK89Uf9SxQfIszu+gTQSSphh6BWlLTNVKvvXAGkg+Zf+oFIevg==",
       "license": "MIT",
       "workspaces": [
         "packages/*",
@@ -1311,9 +1311,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
+      "version": "3.3.14",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.14.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "integrity": "sha512-U9kYi5bpVMEI31yC8iw4bJJp0avcHXA0W8/wNfLfnvJYzihQo2ZRPYPvpAAd570HAcCBjCTN7vnr+v4StKl1IQ==",
       "funding": [
         {
           "type": "github",
@@ -1391,9 +1391,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.8",
+      "version": "8.5.15",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz",
-      "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+      "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==",
       "funding": [
         {
           "type": "opencollective",
@@ -1410,7 +1410,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.11",
+        "nanoid": "^3.3.12",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "gsap": "^3.14.2",
-    "lenis": "^1.3.21",
+    "lenis": "^1.3.23",
     "pinia": "^3.0.4",
     "three": "^0.183.2",
     "vue": "^3.5.29",

src/components/sections/ImageSection.vue

@@ -53,7 +53,6 @@ const createTween = () => {
 
 onMounted(() => {
 
-
   ctx = gsap.context(() => {
     createTween();
 
@@ -70,6 +69,8 @@ onMounted(() => {
 onUnmounted(() => {
   ctx?.revert();
 });
+
+
 </script>
 <template>
   <section class="image-section" ref="section">
@@ -80,19 +81,19 @@ onUnmounted(() => {
         ref="gallery"
       >
         <div class="gallery__item">
-          <img :src="img_daten" alt="" />
+          <img :src="ski" 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="" />
+          <img :src="schnee" alt="" />
         </div>
         <div class="gallery__item">
-          <img :src="florencs" alt="" />
+          <img :src="schnee" alt="" />
+        </div>
+        <div class="gallery__item">
+          <img :src="schnee" alt="" />
         </div>
         <div class="gallery__item">
           <img :src="book" alt="" />

src/components/sections/NewTextSection.vue

@@ -0,0 +1,124 @@
+<script setup>
+import gsap from "gsap";
+import ScrollTrigger from "gsap/ScrollTrigger";
+import Lenis from 'lenis';
+import SplitType from 'split-type';
+
+
+const debounce = (func, timeout = 300) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => { func.apply(this, args); }, timeout);
+  };
+}
+
+gsap.registerPlugin(ScrollTrigger);
+
+const lenis = new Lenis({
+  lerp: 0.07
+});
+
+
+lenis.on('scroll', ScrollTrigger.update)
+gsap.ticker.add((time)=>{
+  lenis.raf(time * 1000)
+})
+const setTextRevealAnimations = () => {
+  ScrollTrigger.getAll().forEach(t => t.kill());
+
+  document.querySelectorAll('.text-reveal').forEach(text => {
+    let splitText = new SplitType(text);
+
+    splitText.lines.forEach(line => {
+      const lineWrapper = document.createElement('div');
+      lineWrapper.classList.add('line-wrapper');
+      line.parentNode?.insertBefore(lineWrapper, line);
+      lineWrapper.appendChild(line);
+    });
+
+    gsap.fromTo(splitText.lines, {
+      y: "100%"
+    }, {
+      y: "0%",
+      stagger: 0.15,
+      ease: "power1.inOut",
+      scrollTrigger: {
+        trigger: text,
+        start: 'top bottom',
+        toggleActions: 'play none none reset'
+      }
+    });
+  });
+};
+setTextRevealAnimations();
+
+// Handle resize
+const resizeObserver = new ResizeObserver(
+  debounce(([entry]) => {
+    setTextRevealAnimations();
+  }, 500)
+)
+resizeObserver.observe(document.body)
+
+
+</script>
+
+<template>
+  <div class="app">
+    <section>
+  <div class="container">
+    <p class="text-reveal">In the cosmic ballet, stars twirl, painting the night sky with celestial wonders and mysteries.</p>
+  </div>
+  </section>
+  <section>
+    <div class="container">
+      <p class="text-reveal">The vast expanse of space whispers tales of undiscovered realms, beckoning humanity's relentless exploration.</p>
+    </div>
+  </section>
+</div>
+</template>
+
+<style scoped>
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+  overflow: hidden;
+}
+
+.lenis.lenis-scrolling iframe {
+  pointer-events: none;
+}
+
+section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+.container {
+  position: relative;
+  max-width: 60%;
+  margin: 0 auto;
+}
+
+.text-reveal {
+  font-kerning: none;
+
+  .line-wrapper {
+    overflow: hidden;
+  }
+
+  .line {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+</style>

src/components/sections/WelcomeSection.vue

@@ -167,7 +167,7 @@ onUnmounted(() => {
 .parallax__content {
   justify-content: center;
   align-items: center;
-  min-height: 50svh;
+  min-height: 100svh;
   display: flex;
   position: relative;
 }

src/views/HomeView.vue

@@ -11,6 +11,7 @@ import ScrollTrigger from "gsap/ScrollTrigger";
 import ScrollSmoother from "gsap/ScrollSmoother";
 import MonitorModel from "../components/sections/MonitorModel.vue";
 import IntroductionSection from "../components/sections/IntroductionSection.vue";
+// import NewTextSection  from "../components/sections/NewTextSection.vue";
 
 gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
 
@@ -32,10 +33,12 @@ onMounted(async () => {
   <div id="smooth-wrapper">
     <div id="smooth-content">
       <WelcomeSection id="welcome" />
+      <!-- <NewTextSection id="newText" /> -->
+
       <IntroductionSection id="welcome" />
       <MonitorModel id="model" />
       <!-- <HeroSection id="hero" /> -->
-      <ImageSection id="image" />
+      <!-- <ImageSection id="image" /> -->
       <TextSection id="text" />
     </div>
   </div>