Motion

Animation · 4 stages · 28 units in the full series · 28 published in English

Series goal

Connect state, layout, and gestures with the modern Motion React API and implement accessible transitions.

Prerequisites

React state, CSS transform

Practice approach and scope

Learning units are not calendar days. Read the explanation and tasks, check the completion criteria, then move on. Use each example as a starting point: change variables and observe the results. Built-in examples and tasks requiring a separate environment are identified separately. Opening an example does not complete a unit.

Existing unit IDs and notes are preserved. The original 01, 02, and 03 examples occupy positions 1, 14, and 28 in the expanded sequence, so the number in the address may differ from the learning order.

Only published English units are linked below. The full series has 28 units.

Learning path

Stage 1 · State and Transition

01. State-Based Animation — Editable example
02. Initial and Animate — Editable example
03. Configuring Transition — Editable example
04. Physical Spring Parameters — Editable example
05. Keyframes — Editable example
06. Variants — Editable example
07. Child Entrance Order — Editable example

Stage 2 · Layout and Presence

08. Measuring Layout — Editable example
09. Stable Keys — Editable example
10. AnimatePresence Basics — Editable example
11. Presence Modes — Editable example
12. Sharing LayoutId — Editable example
13. Focus During Deletion — Editable example
14. Layout and Exit — Editable example

Stage 3 · Gestures and Equivalent Interaction

15. Hover and Focus — Editable example
16. Tap Feedback — Editable example
17. Drag Coordinates and Bounds — Editable example
18. Inertia and Elasticity — Editable example
19. Reordering with Buttons — Editable example
20. MotionValue — Editable example
21. Connecting Transform and Spring — Editable example

Stage 4 · Validating a Motion System

22. Scroll-Linked Animation — Editable example
23. In-View Animation — Editable example
24. UseAnimate Cleanup — Editable example
25. Reduced Motion Policy — Editable example
26. Observing Renders and Performance — Editable example
27. Remounting and State Restoration — Editable example
28. Gestures and Accessibility — Editable example

Capstone project and deliverables

Implement button alternatives, exit, reduced motion, and restoration in a reorderable learning card board.

Keep the implementation, run instructions, baseline and changed conditions, failure cases, and recovery steps together. Do not report unmeasured performance or tests you have not run as results.