From ae9691c78a6de4adee9be2a562a09411a4e92b4a Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Mon, 6 Jan 2025 17:56:17 -0800
Subject: [PATCH] fixed in-view

---
 src/components/core/InView.astro       | 34 ++++++++++++++------------
 src/components/main_page/Divider.astro | 26 +++++++++++---------
 tailwind.config.mjs                    |  8 +++++-
 3 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/components/core/InView.astro b/src/components/core/InView.astro
index 6d9e17e..447bf4d 100644
--- a/src/components/core/InView.astro
+++ b/src/components/core/InView.astro
@@ -1,16 +1,20 @@
 <script>
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          entry.target.classList.add("in-view");
-          console.log("Added 'in-view' class to:", entry.target);
-        } else {
-          entry.target.classList.remove("in-view");
-          console.log("Removed 'in-view' class from:", entry.target);
-        }
-      });
-    }, { threshold: 0.2 });
-  
-    document.querySelectorAll("[data-inview]").forEach((el) => observer.observe(el));
-  </script>
-  
\ No newline at end of file
+    const observer = new IntersectionObserver(
+        (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add("in-view");
+                    console.log("Added 'in-view' class to:", entry.target);
+                } else {
+                    entry.target.classList.remove("in-view");
+                    console.log("Removed 'in-view' class from:", entry.target);
+                }
+            });
+        },
+        { threshold: 0.2 }
+    );
+
+    document
+        .querySelectorAll("[data-inview]")
+        .forEach((el) => observer.observe(el));
+</script>
diff --git a/src/components/main_page/Divider.astro b/src/components/main_page/Divider.astro
index e982917..9f214be 100644
--- a/src/components/main_page/Divider.astro
+++ b/src/components/main_page/Divider.astro
@@ -1,20 +1,22 @@
 ---
-import InView from "../../components/core/InView.astro"
+import InView from "../../components/core/InView.astro";
 ---
-<InView />
 
+<InView />
+<!-- This is the parent div -->
 <div data-inview class="flex py-[15vh] px-[7vw] items-end w-full">
-    <div class="w-3/5">
-        <p class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-flip-down">
+    <!-- Notice that the data-inview can play as long as the in-view class is present -->
+    <div data-inview class="w-3/5 in-view:animate-flip-down">
+        <p
+            class="text-ieee-yellow text-[4.5vw] font-semibold in-view:animate-flip-down"
+        >
             02
         </p>
-        <p class="text-white text-[2.5vw] font-light">
-            Amet Consectetur
-        </p>
-
+        <p class="text-white text-[2.5vw] font-light">Amet Consectetur</p>
     </div>
-    <p class="text-white text-[1.5vw]">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
-        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+    <!-- Even if the data-inview is in the parent div, this animation will not play -->
+    <p class="text-white text-[1.5vw] in-view:animate-flip-down`">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim
     </p>
-</div >
+</div>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 924bb36..5d95d58 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -24,5 +24,11 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-motion"), require("tailwindcss-animated")],
+  plugins: [
+    require("tailwindcss-motion"),
+    require("tailwindcss-animated"),
+    function ({ addVariant }) {
+      addVariant("in-view", "&.in-view");
+    },
+  ],
 };