Is it impossible to use Framer Motion on instant Search Results? Animating an updating .map() functi-CodePudding

https://i.imgur.com/drQmJn5.mp4

The initial results are animated perfectly. Staggered fade-ins.

However, all results AFTER that just appear suddenly and without animation. I'm not understanding why the updated results aren't also animated.

The code currently looks like this:

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

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




<PostList  
  variants={container} 
  initial="hidden" 
  animate="show"
  as={motion.ul}>

{results && results.slice(0, 2).map((result, i) => (
  <PostListItem
    as={motion.li}
    variants={listItem}
    key={i}
  > blah blah
  
  </PostListItem>
 ))}

CodePudding user response：

You should not use the loop index as the key in your PostListItem. Since the indices (and thus the keys) will always be the same, it doesn't let Framer track when elements have been added or removed in order to animate them.

Instead use a value like a unique id property for each element. This way React (and Framer) will know when it's rendering a different element (vs the same element with different data). This is what triggers the animations.

Here's a more thorough explanation:
react key props and why you shouldn’t be using index