staggerChildren with framer motion

Question

I'm having some problems getting the framer motions "staggerChildren" transition to work on a simple list of items. It basically allows animations of child components to be staggered.

I got my animation properties set up like this, for the parent container and the children:

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.5
    }
  }
};

const listItem = {
  hidden: { opacity: 0 },
  show: { opacity: 1 }
};

Then i fetch an array of items and save it to my users state. And finally just a simple map to render out some data from that array.

export const Example = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get("https://reqres.in/api/users").then(res => {
      setUsers(res.data.data);
    });
  }, []);

  return (
    <motion.ul variants={container} initial="hidden" animate="show">
      {users.map((item, i) => (
        <motion.li key={i} variants={listItem}>
          {item.first_name}
        </motion.li>
      ))}
    </motion.ul>
  );
};

The problem is that those items, while getting rendered does not get staggered and end up getting faded in at the same time. And I'm not exactly sure why. Example of this: https://codesandbox.io/s/wispy-shape-9bfbr?file=/src/Example.js

I can get the transition working if i instead use a static array of items stored in variable and then just use the exact same loop. Like this working example: https://codesandbox.io/s/late-http-vz1s6?file=/src/Example.js

But i need this to work with the array i fetch in the useEffect Hook. Anyone knows how?

score 3 · Accepted Answer · answered May 25 '20 at 20:12

3

K, solved by removing the empty array in useState..

answered May 25 '20 at 20:12

qua1ity

475
1
7
20

2

@skiqh the staggering only takes place on the first render. So you should don't even render the list until it has content. – Víctor Navarro Aug 15 '20 at 15:06

score 1 · Answer 2 · answered Dec 22 '20 at 05:44

I know this has already been answered but still answering it for those who might read it later. So, this is what you need to do.

  <React.Fragment>
    {users && 
        <motion.ul variants={container} initial="hidden" animate="show">
          {users.map((item, i) => (
            <motion.li key={i} variants={listItem}>
              {item.first_name}
            </motion.li>
          ))}
        </motion.ul>
     }
  </React.Fragment>

staggerChildren with framer motion

2 Answers2