[BUG] AnimatePresence not working with layout animations

[nandanmen]

1. Read the FAQs 👇

2. Describe the bug

Not sure if I'm just doing something wrong here but it seems AnimatePresence doesn't reliably perform the exit animation when the children has the layout prop:

https://user-images.githubusercontent.com/31267630/221367592-ed5eafd0-674f-470b-9e7d-38ac2b114217.mp4

---

More specifically, it seems that the animation won't happen if a current exit animation is in progress. If you click on "remove" slowly (i.e. wait for the exit animation to finish and the element to be removed from the DOM), then the exit animations work as expected.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/affectionate-alex-mjc72j?file=/src/App.js

4. Steps to reproduce

1. Click on "add" to extend the list
2. Click on "remove" a few times quickly

5. Expected behavior

Multiple numbers can perform the exit animation at the same time.

7. Environment details

MacOS Monterey 12.6.3, Chrome 110.0.5481.177

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>

[Rikveet]

Might not be related. In my project, I had a similar issue. I might have not have implemented it correctly

<form>
 <motion.div layout={'position'}>Title</motion.div>
 <motion.div layout={'position'}>Users</motion.div>
 <motion.div layout={'position'}>Inputs</motion.div>
 <AnimatePresence>conditional component</AnimatePresence>
</form>

https://user-images.githubusercontent.com/62815232/226228771-e221b8a7-ebd0-4494-9d86-bf7abf12a903.mp4

if I add the mode type poplayout it starts to work in a way.

<form>
 <motion.div layout={'position'}>Title</motion.div>
 <motion.div layout={'position'}>Users</motion.div>
 <motion.div layout={'position'}>Inputs</motion.div>
 <AnimatePresence mode={'popLayout'}>conditional component</AnimatePresence>
</form>

https://user-images.githubusercontent.com/62815232/226228497-6446c90a-f098-40c2-beed-a3f366d91b1c.mp4

I think the reason why it doesn't work in the first case is that the layout does not wait for animate presence to conclude. It's code either runs concurrently or before animate presence is concluded. I might have just implemented it incorrectly. Thought this would be helpful.

[tarngerine]

not sure if it's the same issue but i had a layoutId animation + animatepresence exit animation that used to work, but broke upon updating to latest.

i bisected it to v9.0.3 as the culprit. try downgrading to 9.0.2 (if you were previously on an old version like me) and see if it works

[g-popovic]

I also have this issue. Seemingly when rendering a motion.div with the layout prop inside of an AnimatePresence component, if the motion div child has a change in width or something, it's not animated at all, it just snaps into place. Rendering this motion elsewhere in my project resulted in it working correctly. So yes it seems rendering motion.div with layout={true} inside of AnimatePresence is currently broken (even on v9.0.2), quite unfortunate.

[mattgperry]

The upcoming version in the linked ticket will fix this - but highlights a wontfix with the y being non-numerical. Changing this to a number in tandem with the fix will fix the sandbox