Estoy usando el observador de intersección para usar un desvanecimiento en la animación una vez, al principio estaba usando el observador de intersección de reacción, pero no sabía cómo usar el gancho personalizado no observado e intentaba hacer un contador de animación para activar solo la animación. una vez no funcionó.

Volver al observador de intersección normal en un useEffect se ve así:

 const aboutRef = useRef(); const [elementIsVisible, setElementIsVisible] = useState(); useEffect(() => { const observer = new IntersectionObserver((entries) => { const entry = entries[0]; setElementIsVisible(entry.isIntersecting); }); observer.observe(aboutRef.current); }, []);

 <section className="about" id="about" ref={aboutRef}> <div className={`styled-text ${ elementIsVisible ? "styled-text-animation" : "" }`} > </div> <div className={`styled-pic ${ elementIsVisible ? "styled-pic-animation" : "" }`} > </div> </section>

Intenté usar unobserve así:

 useEffect(() => { const observer = new IntersectionObserver((entries) => { const entry = entries[0]; setElementIsVisible(entry.isIntersecting); }); observer.observe(aboutRef.current); if (setElementIsVisible) { observer.unobserve(aboutRef.current); } }, []);

Como esto:

 useEffect(() => { const observer = new IntersectionObserver((entries) => { const entry = entries[0]; setElementIsVisible(entry.isIntersecting); }); observer.observe(aboutRef.current); observer.unobserve(aboutRef.current); }, []);

Y así:

 useEffect(() => { const observer = new IntersectionObserver((entries) => { const entry = entries[0]; setElementIsVisible(entry.isIntersecting); }); observer.observe(aboutRef.current); }, []); useEffect(() => { const observer = new IntersectionObserver((entries) => { observer.unobserve(aboutRef); }); }, [elementIsVisible]);

Y ambos no funcionaron, ¿cuál es la manera de hacer esto? O use unobserve con react-intersection-observer