Sync Issues with DnD-Kit and Framer Motion: Animating Container Height Changes

[yuenwally]

I followed the documentation and successfully set up a basic sortable list with multiple containers. Everything works perfectly—I can drag and drop items anywhere, and the updates work as expected.

However, I’m encountering an issue when trying to animate the container height changes with Framer Motion. If the dragged item comes from below, it works fine since the height increases from the bottom and doesn’t affect the items inside the container. But when dragging an item from the top, the height animation also adjusts the positions of the items. This creates a sync issue between the on-screen item positions and where dnd-kit thinks the items are.

I've tried using a flag to detect when the height animation has finished, but not sure how to force dnd-kit to update all the item positions. I’ve created an example showcasing this behavior and included a GIF to illustrate the problem.

Is there a way to resolve this issue while using dnd-kit with Framer Motion?

example in CodeSandbox