Revert animation is no longer available after migrating from GridStack v3 to v12

[Pathmanaban-t]

Revert animation is no longer available after migrating from GridStack v3 to v12

Description

I'm currently migrating my application from GridStack v3 to GridStack v12.

In GridStack v3, the revert animation was available through the jQuery UI drag-and-drop implementation. Since GridStack v6 removed the jQuery UI dependency and adopted its own drag-and-drop engine, this revert animation is no longer present.

I'm looking for a way to achieve the same user experience in GridStack v12.

Expected Behavior

When a dragged widget is dropped on an invalid target or outside the grid, it should smoothly animate back to its original position (similar to the revert animation provided by jQuery UI).

Actual Behavior

The widget returns to its original position without the previous revert animation, resulting in a different user experience compared to GridStack v3.

Environment

• GridStack version: v12.x
• Previous version: v3.x
• Browser: (please fill in)
• OS: (please fill in)

Question

Is there a built-in configuration or recommended approach to implement the same revert animation in GridStack v12?

If not, would it be possible to support this behavior in a future release, or is there an example demonstrating how to implement it using the current drag-and-drop APIs?

Additional Context

This behavior was available when GridStack relied on jQuery UI. During migration to GridStack v12, preserving the same drag-and-drop user experience is desirable.

Below attached video for the reference how the revert animation been used from jquery UI

Screen.Recording.2026-07-14.at.3.17.46.PM.mov

[adumesny]

Root cause

The jQuery UI revert effect animated the dragging helper element (the floating ghost) back to the origin position on an invalid drop. In GridStack v12's native DD engine the helper is deliberately snapped back instantly, without a transition. The reason is in dd-draggable.ts lines 391–401, where there is already an explanatory TODO comment:

dd-draggable.ts
Lines 391-401

// don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'.
// TODO: this also removes resizing animation which doesn't have this issue, but others.
// Ideally both would animate ('move' would immediately restore 'absolute' and adjust coordinate to match,
// then trigger a delay (repaint) to restore to final dest with animate) but then we need to make sure 'resizestop'
// is called AFTER 'transitionend' event is received (see https://github.com/gridstack/gridstack.js/issues/2033)
const idxOf = DDDraggable.originStyleProp.indexOf('transition');
const transition = originStyle[idxOf] || null;
helper.style.transition = originStyle[idxOf] = 'none'; // can't be NULL #1973
const hStyle = helper.style as unknown as Record<string, string | null>;
DDDraggable.originStyleProp.forEach((prop, i) => hStyle[prop] = originStyle[i] || null);
setTimeout(() => helper.style.transition = transition || '', 50); // recover animation from saved vars after a pause (0 isn't enough #1973)