title: React-spring how to animate letters of an array correctly
body: <p>In this code with <code>react-spring</code> I am getting an animation where each letter waits until the previous animation ends, and also in the meantime it is being animated</p>
  <p>Why is this happening, and how could I fix it?</p>
  <pre class="lang-js prettyprint-override"><code>  const text = [...'hey there how are you']
    const from = { transform: 'rotateX(0deg) translateY(0px) rotate(0deg) scale(1)' }
    const to = inView
      ? [
          { transform: 'rotateX(30deg) translateY(10px) rotate(-13deg) scale(1)' },
          { transform: 'rotateX(0deg) translateY(-22px) rotate(3deg) scale(1.1)' },
          { ...from },
        ]
      : from
  
    const trail = useTrail(text.length, {
      config: { mass: 5, tension: 2000, friction: 200 },
      from: from,
      to: to,
    })
  
    return (
      &lt;&gt;
        &lt;Div ref={handleRef}&gt;
          {trail.map((props, i) =&gt; (
            &lt;animated.span key={`char${i}`} style={props}&gt;
              {text[i] === ' ' ? &lt;&gt;&amp;nbsp;&lt;/&gt; : text[i]}
            &lt;/animated.span&gt;
          ))}
        &lt;/Div&gt;
      &lt;/&gt;
    )
  </code></pre>