ARTICLE AD BOX
I am building a dynamic list in React with Framer Motion. I want to achieve two goals:
When the list initially mounts, the items should animate in sequentially using the parent's staggerChildren.
When I dynamically append a new item to the list later, that specific new item should play its own entrance animation.
However, I am facing a tough situation with variant propagation:
Scenario A: If I rely on implicit variant inheritance (omitting initial and animate on the child), the staggerChildren works perfectly on the initial mount. However, when I add a new item, it skips the entrance animation because it inherits the parent's already "visible" state.
Scenario B: If I explicitly add initial="hidden" and animate="visible" to the child to force the dynamic item to animate, it acts as an independent animation root, variant will be invalid. This completely breaks the parent's staggerChildren on the initial mount (all items animate in at the exact same time).
Here is a simplified version of my setup:
// Parent Component const containerVariant = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.2 } } }; export const PlayList = ({ queue }) => { return ( <motion.div variants={containerVariant} initial="hidden" animate="visible"> <AnimatePresence> {queue.map((song) => ( <SongCard key={song.id} song={song} /> ))} </AnimatePresence> </motion.div> ); }; // Child Component(SongCard.tsx) const itemVariant = { hidden: { opacity: 0, x: -20 }, visible: { opacity: 1, x: 0 }, exit: { opacity: 0, scale: 0.8 } }; export const SongCard = ({ song }) => { return ( <motion.div variants={itemVariant} exit="exit" layout // If I add initial="hidden" here, stagger breaks. // If I don't, newly added items are invisible. > {song.name} </motion.div> ); };What is the best practice to achieve staggerChildren on the initial load, while ensuring newly appended items still play their own independent entrance animations?
