Updated

frontend/components/home/Hero.vue

@@ -57,11 +57,6 @@ watch(() => [shouldPauseVideos.value, swiper_instance.value?.realIndex], () => {
 // lifecycle
 
 const initializeGsapAnimation = () => {
-    gsap.to("#header-navbar", {
-        background: "transparent",
-        filter: "invert(100%)"
-    });
-
     gsapTimeline
         .fromTo(".header-slider-item", {
             borderRadius: 0,
@@ -129,6 +124,10 @@ onMounted(() => {
 
     setTimeout(() => {
         if (window.innerWidth > 768) {
+            gsap.to("#header-navbar", {
+                background: "transparent",
+                filter: "invert(100%)"
+            });
             scrollTrigger.enable();
         } else {
             resetTimelineForMobile();
@@ -138,6 +137,10 @@ onMounted(() => {
 
     window.addEventListener("resize", () => {
         if (window.innerWidth > 768) {
+            gsap.to("#header-navbar", {
+                background: "transparent",
+                filter: "invert(100%)"
+            });
             scrollTrigger.enable();
         } else {
             resetTimelineForMobile();
@@ -148,8 +151,8 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-    gsapTimeline.progress(1).pause();
-    gsapTimeline.kill();
+    resetTimelineForMobile();
+    scrollTrigger.disable();
 });
 
 </script>