To-do list
Matt Perry
In this tutorial, we're going to build the To-do list example step-by-step.
This example is rated advanced difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The To-do list tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
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
