Back to product momentsMotion Pack 23 · Change Kanban move: Moved In progress
Kanban move
When a task crosses columns, let pickup, target column, and completion count explain its new location together.
Backlog
In progress
Review motion
Done
Build a Kanban move: a task can be dragged to the adjacent column or moved with a button. Emphasize pickup while dragging; after drop, place the task in the target column and update column counts. Keep both columns stable and provide a reduced-motion treatment.
Input feedbackDrag to reorderThe dragged card and destination column clearly express pickup and drop.Spatial continuityTranslateThe task uses small travel when it lands in the adjacent column to retain spatial context.State changeScale inA slight scale at the destination emphasizes that the task reached its new state.Continuous inputCompositingDrag and landing favor transform and opacity to reduce layout cost.Reduced motionReduced motionReduced motion retains column, count, and task-position changes.
Motion rules
The destination column and its count jointly confirm the task's new position.
Reduced motion
Keep the moved result and count changes while omitting drag opacity and scale.
Implementation
Copy HTML, CSS, and the JavaScript required for behavior together.