Reordered list.
Move a proof earlier in the print queue. Its row keeps focus while its neighbors settle into their new positions.
- 1. Cover
- 2. Insert
- 3. Colophon
Insert is second in the queue.
- Resting states
- Cover, insert, colophon → Insert, cover, colophon
- Reduced motion
- The queue changes order immediately. The moved proof’s new position is announced.
Implementation excerpt
const offset = previousTop - row.getBoundingClientRect().top;
row.animate([{ transform: `translateY(${offset}px)` },
{ transform: "translateY(0)" }], { duration: 180 });Where Unvibed uses it
This public print-desk example is the site’s demonstration of reordered list.