dnd-kit sortable animation is triggering twice on DragEnd

Question

When I swap two distant items on a grid it 'redoes' the swap animation (going backwards then forwards again). It works fine when the items are very near as you can see in the following gif:

I've followed the Sortable docs but I can't figure out why it is redoing the animation. I just want to drop it on the grid cell and keep the old item on the position it already is, not doing the animation over again

Here's the link to the code sample

Garett

Answer 1

Apparently I solved it setting animateLayoutChanges: () => false on the useSortable hook

Garett

How to solve this for class based components? – Ludwigshafen

Answer 2

  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({
      id: image,
      transition: {
        duration: 500,
        easing: "cubic-bezier(0.25, 1, 0.5, 1)",
      },
    });

This is a better solution I found because animateLayoutChanges: () => false sets all the transition to false.

Peasecod