From cc55b0c954dcbe485699ef8f320063138e72194c Mon Sep 17 00:00:00 2001
From: Ploc300 <ploc300@hotmail.com>
Date: Tue, 18 Feb 2025 14:19:46 +0100
Subject: [PATCH] Fixed effects never trigger when using on screen with a width
 < 1080px

---
 src/components/RevealOnScroll.jsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/RevealOnScroll.jsx b/src/components/RevealOnScroll.jsx
index e3751cc..6257bdc 100644
--- a/src/components/RevealOnScroll.jsx
+++ b/src/components/RevealOnScroll.jsx
@@ -4,13 +4,19 @@ function RevealOnScroll({ children }) {
     const ref = useRef(null);
 
     useEffect(() => {
+        const isSmallScreen = window.innerWidth < 1080;
+        const observerOptions = {
+            threshold: 0.2,
+            rootMargin: isSmallScreen ? "0px" : "0px 0px -50px 0px"
+        };
+
         const observer = new IntersectionObserver(([entry]) => {
             if (entry.isIntersecting) {
                 ref.current.classList.add("visible");
             } else {
                 ref.current.classList.remove("visible");
             }
-        }, { threshold: 0.2, rootMargin: "0px 0px -50px 0px" });
+        }, observerOptions);
 
         if (ref.current) {
             observer.observe(ref.current);