Add smooth tab reorder animation during drag by Z-a-r-a-k-i · Pull Request #19598 · microsoft/terminal

Z-a-r-a-k-i · 2025-11-30T18:11:46Z

Summary of the Pull Request

Adds smooth tab reorder animation during same-window tab dragging. When a tab is dragged, other tabs animate to show where the tab will be inserted, similar to Chrome/Edge behavior.

References and Relevant Issues

Related to [MEGATHREAD] Tab drag/drop/tear-out gaps #14900 (Tab drag/drop/tear-out gaps megathread)

Detailed Description of the Pull Request / Additional comments

Implements TabReorderAnimator class that uses TranslateTransform to animate tabs
Same-window drags: tabs shift left/right to create visual gap at insertion point
Cross-window drags: also animates to show insertion point
On drop: transforms snap back immediately to avoid conflicting with TabView's reorder animation
Respects DisableAnimations global setting (checked at init and on settings reload)
Disables TabView's built-in ItemContainerTransitions during drag to prevent conflicts

Validation Steps Performed

Same-window tab reordering animates smoothly
Cross-window tab drops animate correctly
Animation respects DisableAnimations setting
Drag leave resets animations properly
Rapid pointer movement doesn't leave tabs stuck (storyboard conflicts resolved)
Settings reload updates animation preference

PR Checklist

Related to [MEGATHREAD] Tab drag/drop/tear-out gaps #14900
Tests added/passed (manual validation - UI animation feature)
Documentation updated (N/A - internal implementation)
Schema updated (N/A - no new settings)

src/cascadia/TerminalApp/TabReorderAnimator.cpp

src/cascadia/TerminalApp/TabReorderAnimator.h

Z-a-r-a-k-i · 2025-11-30T18:28:42Z

@microsoft-github-policy-service agree

DHowett · 2025-12-01T23:39:46Z

WHOA. Do you have a video of this? It sounds great!

DHowett · 2025-12-01T23:39:48Z

/azp run

azure-pipelines · 2025-12-01T23:39:58Z

Azure Pipelines successfully started running 1 pipeline(s).

Z-a-r-a-k-i · 2025-12-02T02:09:19Z

WHOA. Do you have a video of this? It sounds great!

carlos-zamora

Thanks for the contribution! Looks great! There's a few changes I've suggested that would simplify it a bit (i.e. remove possible extra vars or code).

Aside from that, I'm excited to see this merge soon. 😊

carlos-zamora · 2026-01-14T19:52:22Z

src/cascadia/TerminalApp/TerminalPage.cpp

+    void TerminalPage::_onTabStripDragLeave(const winrt::Windows::Foundation::IInspectable& /*sender*/,
+                                            const winrt::Windows::UI::Xaml::DragEventArgs& /*e*/)
+    {
+        // When the drag leaves the tab strip, reset the gap animation
+        if (_tabReorderAnimator)
+        {
+            _tabReorderAnimator->OnDragLeave();
+        }
    }


nit: perhaps this makes more sense in TabManagement.cpp

carlos-zamora · 2026-01-15T19:46:37Z

src/cascadia/TerminalApp/TabReorderAnimator.cpp

+        for (uint32_t i = 0; i < tabCount; i++)
+        {
+            if (static_cast<int>(i) != _draggedTabIndex)
+            {
+                if (const auto item = _tabView.ContainerFromIndex(i).try_as<MUX::TabViewItem>())
+                {
+                    return item.ActualWidth();
+                }
+            }
+        }
+
+        if (_draggedTabIndex >= 0 && _draggedTabIndex < static_cast<int>(tabCount))
+        {
+            if (const auto item = _tabView.ContainerFromIndex(_draggedTabIndex).try_as<MUX::TabViewItem>())
+            {
+                return item.ActualWidth();
+            }
+        }


Why do we need both? Why not just the second block?

carlos-zamora · 2026-01-15T19:52:11Z

src/cascadia/TerminalApp/TabReorderAnimator.cpp

+        _StopAllAnimations();
+        _transforms.clear();
+
+        const auto tabCount = _tabView.TabItems().Size();


Suggested change

const auto tabCount = _tabView.TabItems().Size();

const auto tabCount = _tabView.TabItems().Size();

_transforms.reserve(tabCount);

nit: set the size of _transforms to tabCount since it'll always be that.

carlos-zamora · 2026-01-15T20:03:02Z

src/cascadia/TerminalApp/TabReorderAnimator.cpp

+        const auto duration = DurationHelper::FromTimeSpan(
+            TimeSpan{ std::chrono::milliseconds(AnimationDurationMs) });


Suggested change

const auto duration = DurationHelper::FromTimeSpan(

TimeSpan{ std::chrono::milliseconds(AnimationDurationMs) });

const auto duration = DurationHelper::FromTimeSpan( TimeSpan{ std::chrono::milliseconds(AnimationDurationMs) });

nit: no need to split into 2 lines

carlos-zamora · 2026-01-16T00:11:32Z

src/cascadia/TerminalApp/TabReorderAnimator.h

+        Windows::UI::Xaml::Media::Animation::TransitionCollection _savedTransitions{ nullptr };
+        bool _transitionsSaved{ false };


Do we need _transitionsSaved? Can't we just check if _savedTransitions is null?

Z-a-r-a-k-i · 2026-01-20T14:16:59Z

Closing this PR - after further investigation, I discovered that the WinUI TabView control already provides smooth tab reorder animation natively via ReorderThemeTransition (defined in App.xaml). The gap preview during drag is built-in behavior when CanReorderTabs is enabled.

This means the TabReorderAnimator implementation is redundant and was essentially duplicating (and potentially conflicting with) existing functionality.

Thanks @carlos-zamora and @DHowett for the review feedback!

github-advanced-security bot found potential problems Nov 30, 2025

View reviewed changes

This comment has been minimized.

Sign in to view

Add smooth tab reorder animation during drag

b0e75de

Z-a-r-a-k-i force-pushed the feature/tab-reorder-animation branch from 2bcb73a to b0e75de Compare November 30, 2025 18:25

carlos-zamora requested changes Jan 16, 2026

View reviewed changes

microsoft-github-policy-service bot added the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Jan 16, 2026

Z-a-r-a-k-i closed this Jan 20, 2026

microsoft-github-policy-service bot added Needs-Attention The core contributors need to come back around and look at this ASAP. and removed Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something labels Jan 20, 2026

	const auto tabCount = _tabView.TabItems().Size();
	const auto tabCount = _tabView.TabItems().Size();
	_transforms.reserve(tabCount);

		const auto duration = DurationHelper::FromTimeSpan(
		TimeSpan{ std::chrono::milliseconds(AnimationDurationMs) });

		Windows::UI::Xaml::Media::Animation::TransitionCollection _savedTransitions{ nullptr };
		bool _transitionsSaved{ false };

Conversation

Z-a-r-a-k-i commented Nov 30, 2025

Summary of the Pull Request

References and Relevant Issues

Detailed Description of the Pull Request / Additional comments

Validation Steps Performed

PR Checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment has been minimized.

Z-a-r-a-k-i commented Nov 30, 2025

Uh oh!

DHowett commented Dec 1, 2025

Uh oh!

DHowett commented Dec 1, 2025

Uh oh!

azure-pipelines bot commented Dec 1, 2025

Uh oh!

Z-a-r-a-k-i commented Dec 2, 2025

Uh oh!

carlos-zamora left a comment

Choose a reason for hiding this comment

Uh oh!

carlos-zamora Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

carlos-zamora Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

carlos-zamora Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

carlos-zamora Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

carlos-zamora Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Z-a-r-a-k-i commented Jan 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants