Reordering with motion

Uses Motion for Vue

This example shows how to use the Motion for Vue library to animate a reordering of a list of items. This can be helpful as compared to an instant reorder to make it clearer to users what has just happened, which items stayed in place, which items moved, and where they moved to.

Try changing the "Sort by" segmented control below to see how it looks. This particular transition animation is one of many different transitions available with Motion for Vue, along with many different types of motion supported.

Sort by:

August

$60,000

July

$50,000

June

$30,000

March

$80,000

October

$10,000

September

$20,000