title: How to get useChain to run animations sequentially?
body: <p>I'm trying to use react-spring to run animation X and then do animation Y. I'm using the useChain feature. It seems to run everything in parallel. What am I doing wrong? This is a super-simple scenario and I'm surprised it doesn't work AND my Googling has not turned up a lot of other people with the same problem and/or a solution. There are bugs on useChain in react-spring but they seem to cover more limited scenarios.</p>
  <p>As an aside, I thought all React components needed to start with a capital letter so how does <code>animated.div</code> pass the compiler?</p>
  <p><a href="https://codesandbox.io/s/tryingsequentialanimation-74tpn?file=/src/Shaker.tsx" rel="nofollow noreferrer">code sandbox simple example</a></p>
  <p>This is my component. The box moves diagonally, not in the X axis and then in the Y axis.</p>
  <pre><code>export const Shaker = () =&gt; {
    const xRef = useSpringRef();
    const { x } = useSpring({
      from: { x: 0 },
      to: { x: 1 },
      config: config.molasses,
      ref: xRef
    });
    const yRef = useSpringRef();
    const { y } = useSpring({
      from: { y: 0 },
      to: { y: 1 },
      config: config.molasses,
      ref: yRef
    });
    useChain([xRef, yRef]);
    return (
      &lt;animated.div
        style={{
          width: &quot;10rem&quot;,
          height: &quot;10rem&quot;,
          backgroundColor: &quot;green&quot;,
          marginLeft: x.to((i) =&gt; i * 600 - 300),
          marginTop: y.to((i) =&gt; i * 600 - 300)
        }}
      &gt;&lt;/animated.div&gt;
    );
  };
  
  </code></pre>