3d tv

src/components/sections/WelcomeSection.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted, ref, nextTick } from "vue";
 
 import MonitorModel from "/src/components/sections/MonitorModel.vue";
 
@@ -12,9 +12,11 @@ import Lenis from "lenis";
 
 gsap.registerPlugin(ScrollTrigger);
 
-let ctx;
+let ctx, lenis;
+const childRef = ref(null);
+const parallaxRef = ref(null);
 
-function initParallax() {
+function initParallax(triggerElement) {
   const layers = [
     { layer: "1", yPercent: 70 },
     { layer: "2", yPercent: 50 },
@@ -22,8 +24,6 @@ function initParallax() {
     { layer: "4", yPercent: 10 },
   ];
 
-  const triggerElement = document.querySelector(".parallax");
-
   const tl = gsap.timeline({
     scrollTrigger: {
       trigger: triggerElement,
@@ -46,6 +46,17 @@ function initParallax() {
     );
   });
 }
+
+function initChild() {
+  gsap.to(childRef.value, {
+    scrollTrigger: {
+      trigger: childRef.value,
+      start: "top center",
+    },
+    scale,
+  });
+}
+
 function initLenis() {
   lenis = new Lenis({
     duration: 1.1,
@@ -61,20 +72,23 @@ function initLenis() {
 
   gsap.ticker.lagSmoothing(0);
 }
-onMounted(() => {
+onMounted(async () => {
+  await nextTick();
+
   ctx = gsap.context(() => {
-    initParallax();
+    initParallax(parallaxRef.value);
+    // initChild();
     initLenis();
   });
 });
-
 onUnmounted(() => {
   ctx?.revert();
+
   lenis?.destroy();
 });
 </script>
 <template>
-  <div class="parallax">
+  <div ref="parallaxRef" class="parallax">
     <section class="parallax__header">
       <div class="parallax__visuals">
         <div class="parallax__layers">
@@ -91,7 +105,7 @@ onUnmounted(() => {
           />
 
           <div data-parallax-layer="3" class="parallax__layer-title">
-            <h2 class="parallax__title">WELCOM</h2>
+            <h2 class="parallax__title">TOM HERPEL</h2>
           </div>
 
           <img data-parallax-layer="4" class="parallax__layer-img" />
@@ -102,7 +116,9 @@ onUnmounted(() => {
     </section>
 
     <section class="parallax__content">
-      <MonitorModel />
+      <div ref="childRef" class="model__wrapper">
+        <MonitorModel />
+      </div>
     </section>
   </div>
 </template>
@@ -151,7 +167,7 @@ onUnmounted(() => {
 .parallax__content {
   justify-content: center;
   align-items: center;
-  min-height: 100svh;
+  min-height: 200svh;
   display: flex;
   position: relative;
 }
@@ -249,6 +265,7 @@ onUnmounted(() => {
   top: -17.5%;
   left: 0;
 }
+
 @font-face {
   font-family: "ArtDystopia";
   src: url("/src/assets/fonts/Art_Dystopia.woff2") format("opentype");