react-spring, animate list items individually

Question

I have a component that renders a dynamic list. I wan't to delay every item individually, so that every items gets rendered with a delay relative to the previous item. How would I achieve this in react-spring?

Here is the code so far:

  const transitions = useTransition(banks, bank => bank.bic, {
    opacity: 0,
    to: { opacity: 1 }
  })

  return (
    <div>
      {transitions.map(({ item, props, key }) =>
        <animated.div key={key} style={props}>
          <Bank bank={item} />
        </animated.div>
      )}
    </div>
  )

Answer 1

Apparently I should have read the docs better. There is a property called trail. To let each item animate with 50 ms delay relative to the previous, do:

const transitions = useTransition(banks, bank => bank.bic, {
    opacity: 0,
    to: { opacity: 1 },
    trail: 50
  })

  return (
    <div>
      {transitions.map(({ item, props, key }) =>
        <animated.div key={key} style={props}>
          <Bank bank={item} />
        </animated.div>
      )}
    </div>
  )