Invert navbar when categories inside the viewport

frontend/components/home/Categories.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
 
-// types
+// imports
 
 import { Swiper, SwiperSlide } from "swiper/vue";
 import type { SwiperClass } from "swiper/react";
 import useHomeData from "~/composables/api/home/useHomeData";
 
-type Props = {}
-
-// props
-
-const props = defineProps<Props>();
-const {} = toRefs(props);
-
 // state
 
+const { $gsap: gsap } = useNuxtApp();
+
 const { data: homeData } = useHomeData();
 
-const swiper_instance = ref<SwiperClass | null>(null);
+const sectionTarget = ref(null);
+const isSectionInsideViewport = useElementVisibility(sectionTarget, {
+    rootMargin: "0% 0px -100% 0px"
+});
 
+const swiper_instance = ref<SwiperClass | null>(null);
 
 // methods
 
@@ -26,10 +25,35 @@ const onSwiper = (swiper: SwiperClass) => {
     swiper_instance.value = swiper;
 };
 
+// watch
+
+watch(() => isSectionInsideViewport.value, (newValue) => {
+    if (newValue) {
+        gsap.fromTo("#header-navbar", {
+            background: "white",
+            filter: "invert(0%)"
+        }, {
+            background: "transparent",
+            filter: "invert(100%)"
+        });
+    } else {
+        gsap.fromTo("#header-navbar", {
+            background: "transparent",
+            filter: "invert(100%)"
+        }, {
+            background: "white",
+            filter: "invert(0%)"
+        });
+    }
+});
+
 </script>
 
 <template>
-    <section class="flex flex-col justify-center gap-4 bg-black h-[150svh] mt-40 relative overflow-hidden">
+    <section
+        ref="sectionTarget"
+        class="flex flex-col justify-center gap-4 bg-black h-[150svh] mt-40 relative overflow-hidden"
+    >
 
         <div class="w-full flex justify-center items-center relative z-10">
             <span class="text-white typo-h-4">