Updated

2025-03-19 18:00:37 +03:30
parent 211ecb6a8f
commit 9f45367305
1 changed files with 79 additions and 88 deletions
@@ -6,7 +6,7 @@ import useHomeData from "~/composables/api/home/useHomeData";

 // state

-const { data : homeData } = useHomeData();
+const { data: homeData } = useHomeData();

 const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();

@@ -17,71 +17,60 @@ let scrollTrigger: ScrollTrigger;

 onMounted(() => {
    gsapTimeline = gsap.timeline();
-
-    gsapTimeline
-        .fromTo("#header-navbar", {
-            background: "white",
-            filter: "invert(0%)"
-        }, {
-            background: "transparent",
-            filter: "invert(100%)"
-        });
-
    const showcaseElements = gsap.utils.toArray<HTMLElement>(".showcase-slide");

-    showcaseElements.forEach((element, index) => {
-
-        gsapTimeline.fromTo(element, index === 0 ? {
-            opacity: 1,
-            scale: 1,
-            // rotateX: -25,
-            y: 0,
-            ease: "none"
-        } : {
-            opacity: 0,
-            scale: 0.97,
-            // rotateX: -25,
-            y: 20,
-            ease: "none"
-        }, {
-            opacity: 1,
-            scale: 1,
-            // rotateX: 0,
-            y: 0,
-            ease: "none"
-        }, index === 0 ? "-=0%" : undefined);
-
-        if (index < showcaseElements.length - 1) {
-            gsapTimeline.to(element, {
-                opacity: 0,
-                scale: 1.03,
-                // rotateX: 25,
-                y: -20,
-                ease: "none"
-            });
-        }
-
-    });
-
-    gsapTimeline.to("#header-navbar", {
-        background: "white",
-        filter: "invert(0%)"
-    });
-
-    scrollTrigger = ScrollTrigger.create({
-        trigger: "#products-showcase-container",
-        animation: gsapTimeline,
-        scrub: 1,
-        pin: true,
-        start: "top top",
-        // markers: true,
-        end: "bottom top"
-    });
-
    setTimeout(() => {
-        scrollTrigger.refresh()
-    }, 1000);
+        showcaseElements.forEach((element, index) => {

+            gsapTimeline.fromTo(element, index === 0 ? {
+                opacity: 1,
+                scale: 1,
+                // rotateX: -25,
+                top: 0,
+                ease: "none"
+            } : {
+                opacity: 0,
+                scale: 1,
+                // rotateX: -25,
+                top: 20,
+                ease: "none"
+            }, {
+                opacity: 1,
+                scale: 1,
+                // rotateX: 0,
+                top: 0,
+                ease: "none"
+            }, index === 0 ? "-=0%" : undefined);
+
+            if (index < showcaseElements.length - 1) {
+                gsapTimeline.to(element, {
+                    opacity: 0,
+                    scale: 1.03,
+                    // rotateX: 25,
+                    top: -20,
+                    ease: "none"
+                });
+            }
+
+        });
+
+        scrollTrigger = ScrollTrigger.create({
+            trigger: "#products-showcase-container",
+            animation: gsapTimeline,
+            scrub: 1,
+            pin: true,
+            start: "top top",
+            anticipatePin: 1,
+            // markers: true,
+            end: "bottom top"
+        });
+
+        setTimeout(() => {
+            scrollTrigger.update();
+            scrollTrigger.refresh();
+        }, 1000);
+
+    }, 1000);
 });

 onUnmounted(() => {
@@ -92,33 +81,35 @@ onUnmounted(() => {
 </script>

 <template>
-    <div
+    <section
        id="products-showcase-container"
-        class="perspective-midrange w-full h-[125svh] bg-black flex items-center justify-center"
+        class="perspective-midrange relative z-[99999]"
    >
-        <NuxtLink
-            v-for="slide in homeData!.show_case_slider"
-            :key="slide.id"
-            :to="slide.link"
-            class="showcase-slide origin-bottom absolute size-full bg-transparent flex items-center justify-center"
-        >
+        <div class="w-full h-[125svh] bg-black">
+            <NuxtLink
+                v-for="slide in homeData!.show_case_slider"
+                :key="slide.id"
+                :to="slide.link"
+                class="showcase-slide origin-bottom absolute size-full bg-transparent flex items-center justify-center"
+            >

-            <img
-                class="w-[280px] xs:w-[350px] lg:w-[500px] xl:w-[650px] z-20 mb-30 sm:mb-20 lg:mb-30"
-                :src="slide.image"
-                :style="{
-                    mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0) 100%)',
-                }"
-                alt=""
-            />
-            <div class="flex flex-col items-center justify-center gap-4 text-center absolute z-20 mt-20">
-                <span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
-                    {{ slide.title }}
-                </span>
-                <p class="text-white max-w-[320px] xs:max-w-[360px] sm:max-w-[480px] lg:max-w-[550px] xl:max-w-[750px] typo-p-sm lg:typo-p-md xl:typo-p-lg">
-                    {{ slide.description }}
-                </p>
-            </div>
-        </NuxtLink>
-    </div>
+                <img
+                    class="w-[280px] xs:w-[350px] lg:w-[500px] xl:w-[650px] z-20 mb-30 sm:mb-20 lg:mb-30"
+                    :src="slide.image"
+                    :style="{
+                        mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0) 100%)',
+                    }"
+                    alt=""
+                />
+                <div class="flex flex-col items-center justify-center gap-4 text-center absolute z-20 mt-20">
+                    <span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
+                        {{ slide.title }}
+                    </span>
+                    <p class="text-white max-w-[320px] xs:max-w-[360px] sm:max-w-[480px] lg:max-w-[550px] xl:max-w-[750px] typo-p-sm lg:typo-p-md xl:typo-p-lg">
+                        {{ slide.description }}
+                    </p>
+                </div>
+            </NuxtLink>
+        </div>
+    </section>
 </template>