CODEWITHSUNDEEP
reactjsreact-spring
hellogoodnight
hellogoodnight

Reputation: 2129

react-spring, animate list items individually

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>
  )

Upvotes: 0

Views: 2413

Answers (2)

hellogoodnight
hellogoodnight

Reputation: 2129

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>
  )

Upvotes: 3

Girgetto
Girgetto

Reputation: 1086

You can add, a function into lifecycles object:

const transitions = useTransition(banks, (bank) => bank.bic, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: (item) => ({
      duration: 1000 * item.bic
    })
  });

Assuming that we can use bic as a incrementing value, the duration of each div will be progressive. Whether bic isn't a value to use for incrementing an other solution could to initialize a counter variable.

  let counter = 0;

  const transitions = useTransition(banks, (bank) => bank.bic, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: () => {
      counter++;
      return {
        duration: 1000 * counter
      };
    }
  });

Here is an example: https://codesandbox.io/s/animate-list-items-individually-5uri8?file=/src/App.js:571-612

Upvotes: 1

Related Questions