To-do list
A draggable to-do list with animated checkboxes and strikethrough effects using Motion for React's Reorder component.
Introduction
The To-do list example demonstrates how to create an interactive to-do list with Motion for React's Reorder component.
Items can be freely reordered, but when a task is checked off, it animates with a strikethrough effect before moving to the bottom of the list.
In this tutorial, we'll learn to use:
Reorder.GroupandReorder.Itemfor drag-to-reorder functionalitymotioncomponents for animated strikethrough and opacity effectsuseMotionValueandanimatefor animated drag shadows