Why framer-motion does not animate array of items, like single items? - reactjs

Question

I'm using framer-motion to animate a list.
I want items to slide from left, one by one.
Following the docs, I can animate the items one by one, when they are single, but not when mapping through an array.
const items = ["one", "two", "three"];
function App() {
const list = {
visible: {
opacity: 1,
transition: {
when: "beforeChildren",
staggerChildren: 0.3,
},
},
hidden: {
opacity: 0,
transition: {
when: "afterChildren",
},
},
};
const item = {
visible: { opacity: 1, x: 0 },
hidden: {
opacity: 0,
x: "-100vw",
},
};
return (
<motion.ul initial="hidden" animate="visible" variants={list}>
// This does not work as expected.
{items.map((item, i) => (
<motion.li variants={item}>{i}</motion.li>
))}
// This works fine!
<motion.li variants={item}>item</motion.li>
<motion.li variants={item}>item</motion.li>
<motion.li variants={item}>item</motion.li>
</motion.ul>
);
}
What am I doing wrong?
What is the way of using staggerChildren: 0.3, in an array?
Thanks

Answer 1

I've found a way!
Credits to Leigh
const items = ["one", "two", "three"];
function App() {
const itemVariants = {
initial: { x: "-100vw", opacity: 0 },
animate: { x: 0, opacity: 1 },
};
return (
<ul>
{items.map((item, i) => (
<motion.li
variants={itemVariants}
initial="initial"
animate="animate"
transition={{ duration: 0.3, delay: i * 0.8 }}>
{i}
</motion.li>
))}
</ul>
);
}