How can I use useSprings together with useChain?

[DamianPereira]

Hi! I want to make a staggering animation, which triggers animations sequentially for a big number of elements. I can use useSprings to make all animations work at the same time, but how can I make them run one after the other so the next one only starts after the previous one finished? useTrail seems to run them one after the other, but overlapping them, not sequentially.

Here's a codesandbox with the useSprings code I'm working on: https://codesandbox.io/s/use-web-animations-bug-psxmq?file=/src/App.js

I'll copy it here just in case:

const SpringAnimated = () => {
  const springs = useSprings(
    5,
    [...Array(5).keys()].map(() => ({
      from: { top: "0%" },
      to: { top: `${Math.random() * 100}%` },
    })),
    // Is there any way to register a ref here for each element? with regular useRef I can use `const refs = useRef([])` and then push refs inside the array, but I don't see a way to do that with useSpringRefs.
  );
  useChain(); // Here I need an array of all the refs from useSprings()

  return (
    <div className="boxes">
      <div className="container">
        {springs.map((styles, index) => (
          <animated.div className="box" key={index} style={styles} />
        ))}
      </div>
    </div>
  );
};

[Emiliano-Bucci]

@DamianPereira Hi! Did you find a solution for this? I'm also trying to combine useTrail and useChain, maybe it's related to this? -> #1512

[DamianPereira]

I was not able to find a solution for this usecase in useSpring. This was just an example, but thankfully I did not need code like this in real world yet, but if/when I do I have no idea on how I would do it.