title: useInView for multiple animations
body: <p>I'm trying to animate a few elements to slide into view from off page when it's parent container is in view. Everything works as planned when only animating a single element, however when there are multiple the animation is interrupted if scrolling too fast. I believe this is because inView is updated to false when there are multiple references and scrolling is actively occurring.</p>
  <p>I've tried adding multiple ref instances within the useInView hook with no success.</p>
  <p>How can I have each animation take place independently, without getting interrupted by other refs?</p>
  <p>Note: I'm using framer-motion v 4.1.17 (Or something similar) because the newest version has a bug that is causing compilation errors.</p>
  <p>useCustomAnimation.js</p>
  <pre><code>import { useEffect } from &quot;react&quot;;
  
  // Animation &amp; Motions
  import { useAnimation } from &quot;framer-motion&quot;;
  import { useInView } from &quot;react-intersection-observer&quot;;
  
  /**
   * This is a custom hook to toggle a Framer Motion animation 
   * when an element is in view or out of view
   * 
   * @param {object} start - the framer motion animation object when IN view
   * @param {object} end - the framer motion animation object when OUT of view
   * @param {number} threshold - the threshold for when IN view
   * @returns {object} an object with the ref and the animation 
   */
  const useCustomAnimation = (start, end, threshold = 0.25) =&gt; {
    const animation = useAnimation();
    const { ref, inView } = useInView({ threshold });
    console.log(inView)
  
    /**
     * This effect toggles when the animation is
     * in view. When in view, the start variable
     * is animated and when out of view the end
     * variable is used to animate.
     */
    useEffect(() =&gt; {
      if (inView) animation.start(start);
      else animation.start(end);
    }, [inView, animation, start, end]);
  
    return { ref, animation };
  };
  
  export default useCustomAnimation;
  </code></pre>
  <p>Home.js</p>
  <pre><code>const start = {
    x:0,
    y: 0,
    transition: {
      type: &quot;spring&quot;,
      duration: 1.75,
      bounce: 0.2,
    },
  };
  const end = { x: &quot;100vw&quot;, y: -500};
  
  const divOneAnimation = useCustomAnimation(start, end, 0.8);
  const divTwoAnimation = useCustomAnimation(start, endSecondScreenshot, 0.8);
  
  return (
    &lt;ProjectTextWrap ref={divOneAnimation.ref}&gt;
      &lt;ProjectText animate={divOneAnimation.animation}&gt;
      Text
      &lt;/ProjectText&gt;
    &lt;/ProjectTextWrap&gt;
    &lt;LogoWrap ref={divTwoAnimation.ref}&gt;
      &lt;LogoPic animate={divTwoAnimation.ref src={pic}&gt;
      &lt;/LogoPic&gt;
    &lt;/LogoWrap&gt;
  </code></pre>