title: How to fade in element on scroll using React Hooks/React Spring
body: <p>I'm attempting to create an animation in which one element fades based upon the scroll position of another. I was able to get the scrolling element to work using React Spring, but I'm struggling to wrap my head around how to leverage state hooks without conditionals and only being able to set state at a component top level.</p>
  <p><a href="https://codesandbox.io/s/crazy-bash-phwgx?file=/src/App.js:352-1790" rel="nofollow noreferrer">SandBox</a></p>
  <pre><code>const HomeView = () =&gt; {
    const ref = useRef();
    const [isVisible, setVisible] = useState(true);
    const [{ offset }, set] = useSpring(() =&gt; ({ offset: 0 }));
  
    const calc = (o) =&gt; {
      if (o &lt; 1004) {
        return `translateY(${o * 0.08}vh)`;
      } else {
        // this won't work b/c im trying to useState in a Fn
        setVisible(false);
        return `translateY(${1012 * 0.08}vh)`;
      }
    };
  
    const handleScroll = () =&gt; {
      const posY = ref.current.getBoundingClientRect().top;
  
      const offset = window.pageYOffset - posY;
      set({ offset });
    };
  
    useEffect(() =&gt; {
      window.addEventListener(&quot;scroll&quot;, handleScroll);
  
      return () =&gt; {
        window.removeEventListener(&quot;scroll&quot;, handleScroll);
      };
    });
  
    return (
      &lt;div ref={ref} className=&quot;home-view&quot; style={homeViewStyles}&gt;
        &lt;div style={topSectionStyles} className=&quot;top-content-container&quot;&gt;&lt;/div&gt;
        &lt;animated.div
          className=&quot;well-anim&quot;
          style={{
            width: &quot;100vw&quot;,
            height: &quot;500px&quot;,
            transform: offset.interpolate(calc),
            zIndex: 300,
            top: &quot;340px&quot;,
            position: &quot;absolute&quot;
          }}
        &gt;
          &lt;h1&gt;Well,&lt;/h1&gt;
        &lt;/animated.div&gt;
        {/* Trying to fade this component when above animated.div is right above it */}
        &lt;h2 style={{ paddingTop: &quot;90px&quot; }} fade={isVisible}&gt;
          Hello There!
        &lt;/h2&gt;
        {/***************************************/}
      &lt;/div&gt;
    );
  };
  </code></pre>