[BUG] Layout animations do not animate completely when container is scrolled

1. Describe the bug

I have a scrollable div, within which I have a list of motion.divs. These use AnimatePresence to animate themselves away, and each has layout set so the remaining items will animate to fill the hole left by that item.

When the div is scrolled, removing an item results in incomplete transitions and overlapping items, or other items above the removed items will move down, e.g.:

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/framer-motion-layout-animation-bug-when-scrolled-pot7y3?file=/src/styles.css

4. Steps to reproduce

1. Scroll the items in the inner div
2. Then click an item to remove it.

Sometimes, they will overlap or leave a gap. This minimal repro renders lighter-weight components than my real app, so it can be a bit harder to see it mess up - try scrolling with a trackpad and clicking before the scroll fully settles (though in my full application, this happens reliably even when scrolling has settled).

5. Expected behavior

I expect the item that’s clicked to animate out, and the remaining items to animate into their place in the list.

6. Video or screenshots

https://user-images.githubusercontent.com/313208/156072905-5884d634-02aa-40e2-b1a3-2c7cc49e9712.mov

7. Environment details

Chrome 98 on an M1Max MacBook Pro.

[adred]

layoutScroll doesn’t fix the issue for me.

[RannyArcher]

i think you should use usePresence hook, and call safeToRemove function which is returned with isPresent which indicated the presence of element as boolean (doc: https://www.framer.com/docs/animate-presence/#usepresence) i am not sure will this work in your case or no, i wish it help you.