Move a removed group as one

Lift each removed row by the selected rows below it.

Sam Selikoffbuildui.com
Without the correction, the text from consecutive items move at different rates while their parent's height animates to 0.
Animated ListRead article ↗
Sam Selikoffbuildui.com
This gives the appearance that the group of selected items is being pushed up under the items above it.
Animated ListRead article ↗

Slow motion helps: the text in the bad pane slides at a different speed per row.

1 · Archive a run of rows

Tick rows, press Archive, then Restore. Try Slow motion.

Each row aloneBad
Selected0
Moves as one blockGood
Selected0
// for each selected row, count the selected rows directly below it
const after = run.length - 1 - indexInRun;

row.animate([{ height: "44px" }, { height: "0px" }], opts);
item.animate([
  { transform: "none" },
  { transform: `translateY(${-after * 44}px)` },   // the correction
], opts);
// unselected rows sit above (z-index: 1) and cover the sliding block

Why it matters, pros and cons

Why it matters

Collapsing each row alone moves every row's text at its own speed. Shifting by the rows below makes them share one.

Pros

  • A run of rows reads as one object leaving, not several rows squashing.
  • It is a single extra transform per row, with no layout measuring.
  • Rounding only the outer corners keeps the group looking like one block.

Cons

  • You need to know the run: consecutive selected rows, recomputed for each archive.
  • Rows above must be opaque and stacked higher, or the block shows through.
  • Rows that are very tall or variable need their real heights, not a fixed constant.