Make slider responsive

frontend/components/home/Hero.vue

@@ -11,7 +11,7 @@ import useHomeData from "~/composables/api/home/useHomeData";
 const { data: homeData } = useHomeData();
 const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
 const swiper_instance = ref<SwiperClass | null>(null);
-const showLoadingOverlay = useState('showLoadingOverlay');
+const showLoadingOverlay = useState("showLoadingOverlay");
 
 const observerTarget = ref(null);
 const shouldPauseVideos = ref(false);
@@ -27,6 +27,7 @@ const isMuted = ref(true);
 const slidesPerView = ref(1);
 
 let gsapTimeline: gsap.core.Timeline;
+let scrollTrigger: ScrollTrigger;
 
 // methods
 
@@ -55,11 +56,7 @@ watch(() => [shouldPauseVideos.value, swiper_instance.value?.realIndex], () => {
 
 // lifecycle
 
-onMounted(() => {
+const initializeGsapAnimation = () => {
-    updateVideoStates();
-
-    gsapTimeline = gsap.timeline();
-
     gsap.to("#header-navbar", {
         background: "transparent",
         filter: "invert(100%)"
@@ -100,8 +97,27 @@ onMounted(() => {
             },
             scale: 1
         }, "=");
+};
 
-    ScrollTrigger.create({
+const resetTimelineForMobile = () => {
+    gsap.to("#header-navbar", {
+        background: "white",
+        filter: "invert(0%)"
+    });
+    gsap.set(".header-slider-item", {
+        borderRadius: "20px",
+        height: "450px"
+    });
+};
+
+onMounted(() => {
+    updateVideoStates();
+
+    gsapTimeline = gsap.timeline();
+
+    initializeGsapAnimation();
+
+    scrollTrigger = ScrollTrigger.create({
         trigger: "#header-slider-container",
         animation: gsapTimeline,
         scrub: 1,
@@ -110,6 +126,25 @@ onMounted(() => {
         // markers: true,
         end: "bottom top"
     });
+
+    setTimeout(() => {
+        if (window.innerWidth > 768) {
+            scrollTrigger.enable();
+        } else {
+            resetTimelineForMobile();
+            scrollTrigger.disable();
+        }
+    }, 100);
+
+    window.addEventListener("resize", () => {
+        if (window.innerWidth > 768) {
+            scrollTrigger.enable();
+        } else {
+            resetTimelineForMobile();
+            scrollTrigger.disable();
+        }
+    });
+
 });
 
 onUnmounted(() => {
@@ -122,18 +157,16 @@ onUnmounted(() => {
 <template>
     <div
         id="header-slider-container"
-        class="w-full mb-20 z-50"
+        class="w-full mb-20 z-50 max-md:mt-[80px]"
     >
-
         <div id="header-slider-wrapper" class="relative">
             <Swiper
                 ref="observerTarget"
                 :slides-per-view="slidesPerView"
                 :loop="true"
-                :space-between="20"
                 :centered-slides="true"
                 :breakpoints="{
-                    1024 : {
+                    768: {
                         spaceBetween : 40
                     }
                 }"
@@ -142,9 +175,10 @@ onUnmounted(() => {
                 <SwiperSlide
                     v-for="(slide, index) in homeData!.sliders"
                     :key="slide.id"
+                    class="max-md:container"
                 >
                     <div
-                        class="header-slider-item relative w-full overflow-hidden"
+                        class="header-slider-item relative w-full overflow-hidden max-md:rounded-[20px]"
                     >
                         <template v-if="!!slide.video">
                             <video