Animate from a list

I’m not sure this is an issue related to Moti but I can’t find a way to animate an array of cards. All our code is doing is updating a state called currentDiscoverIndex to update a list of artworks. I have a correct animation on mount but when I update the state the animation is very junky. I’m not sure if this is due to keys not being added correctly. I just can’t figure out what I’m doing wrong.

Here is my code:

Container

const Wrapper = styled(AnimatePresence)<{ containerHeight: number }>(
  ({ containerHeight }) => ({
    width: '100%',
    height: containerHeight,
  }),
);

const newArtworks = useMemo(
  () => artworks.slice(currentDiscoverIndex, currentDiscoverIndex + count),
  [artworks, currentDiscoverIndex],
);

return (
  <Wrapper containerHeight={containerHeight}>
    {newArtworks.map((card) => (
      <Card
        key={card.id}
        artwork={card}
        containerHeight={containerHeight}
      />
    ))}
  </Wrapper>
)

Card component

const Wrapper = styled(MotiView)({
  width: '100%',
  height: '100%',
});

<Wrapper
  key={artwork.id}
  from={{
    opacity: 0,
    translateX: -40,
  }}
  animate={{
    opacity: 1,
    translateX: 0,
  }}
  exit={{
    opacity: 0,
    translateX: -40,
  }}>
{ ... }
</Wrapper>

Any chance someone has an idea where I could do something wrong?

[nandorojo]

I see. For starters, AnimatePresence doesn’t accept styles, so that doesn’t apply

[cdedreuille]

It is indeed working correctly now 👍 Thanks a lot for your help.