Discussion on: How to fade in content as it scrolls into view

[Rick Gove]

How would I reverse this effect once it's about to leave the viewport?

I have it disappearing, but without any effects this way:

 .fade-out-observe {
    width: 100%;
    position: absolute;
  }



function vh() {
    var h = Math.max(
      document.documentElement.clientHeight,
      window.innerHeight || 0
    );
    return h;
  }

useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => setVisible(entry.isIntersecting));
    });
    observer.observe(fadeOutRef.current);
    return () => observer.unobserve(fadeOutRef.current);
  }, []);


 <div
        ref={fadeOutRef}
        className="fade-out-observe"
        style={{ top: vh() * 0.4 }}
      />