title: Start animation in react-spring when component is in view
body: <p>I am using <code>react-spring</code> for animation and all the animations start once the page is loaded. I want to control the start of the animation. The desired outcome is to let the components down in the screen start the animation once they are in view (i.e the user scrolled down). The code follows something like this :</p>
  <pre><code>const cols = [
  /*Components here that will be animated ..*/
  {component: &lt;div&gt;&lt;p&gt;A&lt;p&gt;&lt;/div&gt; , key:1},
  {component: &lt;div&gt;&lt;p&gt;B&lt;p&gt;&lt;/div&gt; , key:2},
  {component: &lt;div&gt;&lt;p&gt;C&lt;p&gt;&lt;/div&gt; , key:3},
  
  ]
  
  export default function foocomponent(){
    const [items, setItems] = React.useState(cols);
    const [appear, setAppear] = React.useState(false); // Should trigger when the component is in view
  
    const transitions = useTransition(items, (item) =&gt; item.key, {
      from: { opacity: 0, transform: 'translateY(70px) scale(0.5)', borderRadius: '0px' },
      enter: { opacity: 1, transform: 'translateY(0px) scale(1)', borderRadius: '20px', border: '1px solid #00b8d8' },
      // leave: { opacity: 1, },
      delay: 200,
      config: config.molasses,
    })
  
  
    React.useEffect(() =&gt; {
      if (items.length === 0) {
        setTimeout(() =&gt; {
          setItems(cols)
        }, 2000)
      }
    }, [cols]);
  
    return (
          &lt;Container&gt;
            &lt;Row&gt;
              {appear &amp;&amp; transitions.map(({ item, props, key }) =&gt; (
                &lt;Col className=&quot;feature-item&quot;&gt;
                  &lt;animated.div key={key} style={props} &gt;
                    {item.component}
                  &lt;/animated.div&gt;
                &lt;/Col&gt;
              ))}
            &lt;/Row&gt;
          &lt;/Container&gt;
    );
  }
  </code></pre>
  <p>I tried using <code>appear &amp;&amp; transitions.map(...)</code> but unfortunately that doesn't work. Any idea how should I control the start of the animation based on a condition?</p>