[FEATURE] Apply `staggerChildren` to components entering into an active variant

[damianszocik]

1. Describe the bug

Children components wrapped in AnimatePresence don't stagger as they should if they are not rendered initially. In provided example, you can see a comparison between child components mapped initially from static data array (works fine) and rendered conditionally, e.g. after some remote data is fetched, which is a common scenario.

2. CodeSandbox reproduction of the bug
https://codesandbox.io/s/staggerchildrenissue-tkkie?file=/src/App.js

3. Steps to reproduce
Refresh provided codesandbox example.

4. Expected behavior
Children components rendered conditionally should be staggered the same as the ones rendering initially.

5. Environment details
KDE neon 5.19, Chrome 85.0.4183.102 (Official Build) (64-bit)

[mattgperry]

staggerChildren currently only works when the parent variant actually changes, though I can see how this would be useful.

[focux]

Is there a workaround for this use case? I think this is a very common case.

[snehasis8]

Any resolution on this ?

[snehasis8]

It makes no sense if it's not able to perform on the dynamic data.

[steven-tey]

Facing the same issue as well – for some reason dynamically fetched data (from localStorage, with useSWR) don't stagger, even when I set a unique key for each of the list items 😕

Edit: Inspired by @mattgperry's comment above, I figured out the following workaround – by setting a key on the parent element to the length of the dynamic data, something like this:

<motion.ul
   key={data.length}
          initial="hidden"
          animate="show"
          variants={{
            hidden: {},
            show: {
              transition: {
                staggerChildren: 0.1,
              },
            },
          }}
>
  {data.map((d) => (
      <motion.li
      variants={variants}
     >
         {d.name}
     </motion.li>
  )}
</motion.ul>

[TimoP]

Edit: Inspired by @mattgperry's comment above, I figured out the following workaround – by setting a key on the parent element to the length of the dynamic data, something like this:

Yes but that only helps if the parent did not have their own transitions. A key change would reset this transition.

The use of this feature is limited if it did not work if children get added after the parent transition start.

I have made a small Sandbox for demonstration for my ticket: Example
Toggle Demo1: Expected behavior
Toggle Demo2: Example with children added after timeout

[DaviidMM]

Same issue here! I need to load a list of items dynamically with a "load more" button... This is my workaround:

const itemVariants = (index) => ({
  initial: {
    opacity: 0,
    y: -50 + index * 5,
  },
  animate: {
    opacity: 1,
    y: 0,
    transition: {
      delay: 0.025 * index,
    },
  },
});

<motion.div initial="initial" animate="animate" exit="initial">
  {items.map((item, index) => (
    <motion.span
      key={item.id}
      variants={itemVariants(index)}
    >
      Item #{index}
    </motion.span>
  ))}
</motion.div>