18 / GESTURE PHYSICS
Smooth Reorder
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
Task: Move an item up or down the list.
NAIVE
- Ship onboarding
- Fix flaky tests
- Review RFC
- Plan Q3 roadmap
layout animFALSE
moves0
THOUGHTFUL
- Ship onboarding
- Fix flaky tests
- Review RFC
- Plan Q3 roadmap
layout animTRUE
moves0
Play with the values
300ms
How it works
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.