[BUG] Mapped SVG components are morphed into the same animation even though they're provided with different configs

[mkhatib]

1. Read the FAQs 👇

2. Describe the bug
I am trying to loop over some data and map them to an animated SVG morph but every component instance has different paths.

Framer motion seems to animate them exactly the same even though there paths are different. Any idea how do I make the animations between elements different instead of all of them matching?

Here's a codesandbox describing the issue. Notice that the repeated Dog blob is running through the exact paths animations, even though paths passed to <animated.path

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/p/github/mkhatib/laqta.photography/draft/epic-greider

4. Steps to reproduce

Steps to reproduce the behavior:

1. Open the sandbox
2. Notice all dog blobs are running through the exact animation even though they are provided different SVG paths

5. Expected behavior
Every item has a different animation

6. Video or screenshots

Screen.Recording.2022-11-10.at.3.45.18.PM.mov

7. Environment details

If applicable, let us know which OS, browser, browser version etc you're using.

FAQs

Framer Motion won't install

Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.

height: "auto" is jumping

Animating to/from auto requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.

The recommended solution is to move padding to a child element. See this issue for the full discussion.

Type error with AnimateSharedLayout

AnimateSharedLayout was deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.

Preact isn't working

Framer Motion isn't compatible with Preact.

AnimatePresence isn't working

Have all of its immediate children got a unique key prop that remains the same for that component every render?

// Bad: The index could be given to a different component if the order of items changes
<AnimatePresence>
  {items.map((item, index) => <Component key={index} />)}
</AnimatePresence>

// Good: The item ID is unique to each component
<AnimatePresence>
  {items.map((item, index) => <Component key={item.id} />)}
</AnimatePresence>

Is the AnimatePresence correctly outside of the controlling conditional? AnimatePresence must be rendered whenever you expect an exit animation to run - it can't do so if it's unmounted!

// Bad: AnimatePresence is unmounted - exit animations won't run
{isVisible && (
  <AnimatePresence>
    <Component />
  </AnimatePresence>
)}

// Good: Only the children are unmounted - exit animations will run
<AnimatePresence>
  {isVisible && <Component />}
</AnimatePresence>

[mkhatib]

Closing this, the bugs were in my component and svg code. The fix is here if anyone is curious.