Skip to content

feat(dockview-core): add slide tab reorder mode with FLIP animations#1129

Open
KyDenZ wants to merge 3 commits intomathuo:masterfrom
KyDenZ:tab-drag-animation
Open

feat(dockview-core): add slide tab reorder mode with FLIP animations#1129
KyDenZ wants to merge 3 commits intomathuo:masterfrom
KyDenZ:tab-drag-animation

Conversation

@KyDenZ
Copy link

@KyDenZ KyDenZ commented Mar 4, 2026

Summary

Introduces smoothTabReorder: boolean — a new option that enables browser-tab-like slide animations during drag-and-drop tab reorder. Defaults to false (existing behavior unchanged).

Changes

During drag, tabs slide apart to open a gap showing where the dragged tab will land
On drop, tabs animate to their final positions
The dragged tab collapses in-place (dv-tab--dragging) so the gap is clearly visible
Respects prefers-reduced-motion media query

Docs

Added template with a toggle to enable/disable smoothTabReorder in tabview sandbox

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 4, 2026

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1034e93:

Sandbox Source
dockview-app Configuration
editor-gridview Configuration
externaldnd-dockview Configuration
fullwidthtab-dockview Configuration
iframe-dockview Configuration
keyboard-dockview Configuration
nativeapp-dockview Configuration
rendering-dockview Configuration

@mathuo
Copy link
Owner

mathuo commented Mar 4, 2026

@KyDenZ don't suppose you have a quick gif of the behavior?

@KyDenZ
Copy link
Author

KyDenZ commented Mar 5, 2026

Sure! Here are two recordings showing the feature in action:

Default behavior: smoothTabReorder: false
Screen Recording 2026-03-05 at 10 05 33

New behavior: smoothTabReorder: true
Screen Recording 2026-03-05 at 10 05 54

Enabling smoothTabReorder makes tabs slide apart during drag to reveal the insertion gap, then animate to their final positions on drop. The default behavior is unchanged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants