clauderic / clauderic/dnd-kit

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

Open
#2,104 3 comments 1 reaction 0 assignees View on GitHub
dom enhancement react
Dominant language
TypeScript
Stars
17.6k
Forks
924
Avg merge
2d 10h
Merged PRs (30d)
2

Description

As the title said, I tried with this:
```ts
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((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?

Contributor guide

Open the contributing guide

Research direction

Start with the DragOverlay dropAnimation context, especially the moved, translate, and feedbackElement values shown in the issue, and reproduce the sortable-position-change case. Trace how the overlay returns to its previous position when the item moved, then verify that stationary overlays do not visibly animate while moved overlays retain their drop behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.