14 Smooth Reorder. 14 of 95.
14/GESTURE PHYSICS/14 of 95
Smooth Reorder
Items should slide to their new place, not teleport.
The problem
When a list reorders, items jumping instantly to new positions make it hard to follow what moved where.
The solution
Items animate smoothly from their old to new positions.
Experiment
Play with the values
300ms
How it works
- A reorder changes which slot each item occupies.
- Each item's position before the change is recorded.
- The new order is applied in the DOM, which is the final layout.
- The visual difference is inverted so items still appear where they were.
- That inverse is played back to zero, so items slide into their new places.
Seen in
Playlists
Songs glide to their new spot so you can track where a track landed.
Priority lists
Reordering tasks animates neighbours, making the change legible.
Ranking tables
Leaderboard rows slide as scores update rather than flickering into place.
Board columns
Cards shift smoothly to accommodate an inserted item.