[DragOverlay] Dont do drop animation if its not moved?

[hashfiputra]

As the title said, I tried with this:

  const dropAnimation: DropAnimation = async (context) => {
    const { feedbackElement, translate, moved } = context;
    if (!moved) return;

    const duration = 250;
    const start = performance.now();
    const ease = cubicBezier(0.25, 0.1, 0.25, 1.0);

    await new Promise<void>((resolve) => {
      function tick(now: number) {
        const valid = feedbackElement instanceof HTMLElement;
        const time = Math.min((now - start) / duration, 1);
        const eased = ease(time);
        if (!valid) return;

        const x = translate.x * (1 - eased);
        const y = translate.y * (1 - eased);
        feedbackElement.style.setProperty("--dnd-translate", `${x}px ${y}px`);

        if (time < 1) requestAnimationFrame(tick);
        if (time >= 1) resolve();
      }

      requestAnimationFrame(tick);
    });
  };

But it come with edge case I cant seem to fix, for example if I sort my element and the position changed, the overlay will be drop to its old position. Why I want to disable drop animation if its not moved? In my opinion if its not moved it will still ran the animation it will look like it "lagged" even though it run a drop animation, like its standing still. Have any solve for this?

[timagixe]

@hashfiputra, could you please share a minimal reproducible example via a repository code, CodeSandbox, or StackBlitz? I will try to look into it and advise if I have enough input and understanding of the problem. Thanks 🙌

[hashfiputra]

I cant give you the code right now, but you can go to example for the DragOverlay. Drag the draggable but dont move it and see the overlay behaviour it look like it "lagged". Let me know if that example is not enough. Thanks!

[clauderic]

Thanks for the detailed write-up — there are two separate things going on here, and reading the source clears both up.

1. Why your custom animation drops to the old position after a sort

Your function animates --dnd-translate from translate back to 0, which returns the feedback element to where the drag started. The built-in animation doesn't do that — it measures where the item actually ended up and animates there. From runDropAnimation():

const target = ctx.placeholder ?? ctx.element;
const current = new DOMRectangle(ctx.feedbackElement, options);
const final = new DOMRectangle(target, options);
const delta = Rectangle.delta(current, final, ctx.alignment);
const finalTranslate = {
  x: currentTranslate.x - delta.x,
  y: currentTranslate.y - delta.y,
};

So after a sort, the item's DOM position has changed and final reflects the new position. If you write a custom DropAnimationFunction, you need to measure placeholder ?? element against feedbackElement at drop time and animate toward that delta rather than toward 0. (Measuring here is fine — a drop animation runs once per drop, unlike a modifier's apply(), which runs on every pointer event.)

2. The "lag" when the item never moved

The built-in animation already zeroes the duration for an unmoved drag, but only when the feedback element is the source element:

duration: prefersReducedMotion(getWindow(ctx.feedbackElement))
  ? 0
  : ctx.moved || ctx.feedbackElement !== ctx.element
    ? duration
    : 0,

With DragOverlay, feedbackElement !== element, so the second branch is always taken and the full duration runs even when moved is false — which is exactly the standing-still-for-250ms effect you're describing in the Storybook example. That looks like a genuine gap rather than something you're doing wrong, so we've labelled this as an enhancement for @clauderic to weigh in on: whether DragOverlay should also skip the drop animation when the pointer never moved, or whether that needs to stay opt-in (an overlay isn't always rendered directly over its source, so a zero-duration drop would snap in those cases).

For reference, dropAnimation: null on the Feedback plugin disables the drop animation outright (Feedback.ts), and DropAnimationOptions only accepts duration / easing — there's currently no supported way to keep the default animation but conditionally skip it based on moved. Docs: https://dndkit.com/extend/plugins/feedback

Leaving this open for the maintainer.