From 5779f2ca988d3274701302ade1ad7054d26d29fe Mon Sep 17 00:00:00 2001 From: IM23a-spirgif Date: Thu, 13 Mar 2025 10:28:46 +0100 Subject: [PATCH] Small Bug Fixes --- src/app/components/FadeInSection.js | 86 ++++++++++++++--------------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/src/app/components/FadeInSection.js b/src/app/components/FadeInSection.js index 097c71d..8b06085 100644 --- a/src/app/components/FadeInSection.js +++ b/src/app/components/FadeInSection.js @@ -1,50 +1,50 @@ "use client"; -import { useRef, useState, useEffect } from 'react'; +import {useRef, useState, useEffect} from 'react'; -const FadeInSection = ({ children }) => { - const domRef = useRef(); - const [hasBeenVisible, setHasBeenVisible] = useState(false); - const [opacity, setOpacity] = useState(0); - useEffect(() => { - const thresholds = Array.from({ length: 101 }, (_, i) => i / 100); - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.intersectionRatio >= 0.3 && !hasBeenVisible) { - setHasBeenVisible(true); - setOpacity(1); - } else if (!hasBeenVisible) { - setOpacity(entry.intersectionRatio); - } - }); - }, - { - threshold: thresholds, - rootMargin: "0px 0px -20% 0px", - } +const FadeInSection = ({children}) => { + const domRef = useRef(); + const [hasBeenVisible, setHasBeenVisible] = useState(false); + const [opacity, setOpacity] = useState(0); + useEffect(() => { + const thresholds = Array.from({length: 101}, (_, i) => i / 100); + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.intersectionRatio >= 0.3 && !hasBeenVisible) { + setHasBeenVisible(true); + setOpacity(1); + } else if (!hasBeenVisible) { + setOpacity(entry.intersectionRatio); + } + }); + }, + { + threshold: thresholds, + rootMargin: "0px 0px -20% 0px", + } + ); + if (domRef.current) { + observer.observe(domRef.current); + } + return () => { + observer.disconnect(); + }; + }, [hasBeenVisible]); + + return ( +
+ {children} +
); - if (domRef.current) { - observer.observe(domRef.current); - } - return () => { - observer.disconnect(); - }; - }, [hasBeenVisible]); - - return ( -
- {children} -
- ); }; export default FadeInSection; \ No newline at end of file