paralaxx content height

src/components/sections/ImageSection.vue

@@ -52,7 +52,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="" />
-        </div>
-        <div class="gallery__item">
-          <img :src="gopro" alt="" />
+          <img :src="ski" 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>