From 76e08ceb17c34ac7084cbf85102145c5bd2e3f33 Mon Sep 17 00:00:00 2001
From: Greyson Parrelli <greyson@signal.org>
Date: Sun, 26 Jul 2026 23:27:20 -0400
Subject: [PATCH] Improve drag and drop animation.

---
 web/src/anim.ts                     | Bin 6180 -> 6988 bytes
 web/src/components/ArrangePhase.tsx |   8 +++++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/anim.ts b/web/src/anim.ts
index 82ac0110f531e9514652ea207c7826af0483ca50..ccf34cc4750c9384e30847c1edbb8772cd41e913 100644
GIT binary patch
delta 959
zcmZvb!D<vi5Qf1ZY=Rea^-|zv7m`U(@gS^%F@mTl3OQ<OdunEy?dcl2da@ZjtT!KE
z1z*66o`l?d2G2f#Phxdv*IeAwF5Ugt|9^k&*TY};f4m=Ei@f?Yy1lh?aIpG5nyh}0
zV5#3B*t&_(IW$zjsmyKnoQ6~I*pdKy0)wH1$Ux`D^(8?SxP{mdynJ<X3>}KVqOp#W
zm_+Lw1Tq{->ua!4pkuMovWGt(KSM86Ld78qEVJ~C(#<kpT~oQIS}X+CdkRT$5wPnh
z0J=a}4*J$PUPyl5vGtL{9tgwJ7tdbri?jd6&iEV_+`AG=?q`mm?}{Bd?>I!LdT-Ry
zYIpl&7hs+F(F3&~)XPP+eRpfAvyadla)5qNKl_!-q;hKXw#5`mU`85;pe2+(y;g`d
z#mC(HWaY?N^6?Fsc)A1nQB~_RM*#$9&q(EymSTwky{K550xho;FY)U2jLXU;<&9ju
z&YbW_25$Ngbm$d$>m}+baFx#kX-$e;9LHSBV98}}xDlQ4vhD>+auF3ZM(uQeZB(+4
zT)Jt%(^+cA#2%d+pye|v3wV-IsO1VJZbVbXFgAfjbiCv<eXH_5*LmmOVJndG&;*uw
zYDHAe(9FRxcVM{f5?9$MVitpBVSvC3WvLi-HFb%!aRoZ)&w$d96!6yTDy86hLpPW;
zljttkaAk2$)JfKRr&)5P)FzgV{u3k?d9Y?wm12##(8i9@G~+Q&VEPcSFnMjplga;X
p8%G$%lZ(}j;`%LH!FWysOsCV$7EaVv?1NwZy!qwg!|u21e*w^;P0;`V

delta 119
zcmX?Ow!~mVJcouxs$RODLU~4JPO3tpLP}9$x<Y2LLS~*qK~a8sQEG9qrb0<Rm%jew
zL=NT2?HroSAod0h1s;W>%=C;Bg@T;K<kZRgIMX&;a2YahKFP1aI$2nB!sJjf{>dA}
WIJoTfk`wciQ*$&lH_sB?#0mfs*(OQ=

diff --git a/web/src/components/ArrangePhase.tsx b/web/src/components/ArrangePhase.tsx
index c4d5355..2538543 100644
--- a/web/src/components/ArrangePhase.tsx
+++ b/web/src/components/ArrangePhase.tsx
@@ -39,9 +39,11 @@ export function ArrangePhase({ view, you, send }: Props) {
   const locked = you.ready
 
   // The arrow buttons reorder `order` and the cards glide to their new slot.
-  // Drag-and-drop reorders instantly instead: a drag fires continuously, so
-  // animating every crossing looks frantic — we suppress it while dragging.
-  const arrangeAnim = useCardAnimations(order, (c) => c.id, !dragging)
+  // A drag reorders live too, and the neighbors the dragged card passes should
+  // glide into the gap it opens — so animation stays on. Only the dragged card
+  // itself is excluded (`dragId`): its inner wrapper already tracks the finger,
+  // so FLIP-sliding its box on top of that would fight the follow transform.
+  const arrangeAnim = useCardAnimations(order, (c) => c.id, true, dragId ?? undefined)
 
   // Resync only if the deck's actual contents changed — every broadcast
   // creates a fresh array, and blindly resetting would wipe an in-progress