Examples · Lists & tables
Animated reorder
flip() records positions, list() moves the nodes, the animation plays from old to new.
FLIP: measure First, apply the change, measure Last, Invert and Play. flip(nodes) does the measuring; you make the change; the returned function animates each node from where it was. Since list() moves nodes instead of re-creating them, every row keeps its identity and can animate.
What to notice
- Shuffle moves the same
lielements: the numbers travel, nothing fades in or out. prefers-reduced-motionturns the animation into an instant move.- Sorting uses the same code path; only the comparator differs.
Shuffle a few times, then Sort.