mastering-animate-presence

Run the audit on your component files to check each motion element against 12 AnimatePresence rules. Findings are reported in file:line format with rule IDs like exit-requires-wrapper, plus a severity summary table.

The most common cause is a conditional motion element not wrapped in AnimatePresence, or a missing exit prop on the motion element. The exit-requires-wrapper and exit-prop-required rules detect both cases.

Use popLayout for list reordering so exiting elements leave the layout flow, and use wait when sequencing enter and exit animations, but halve durations since wait nearly doubles total animation time. The mode-selection rules flag misuse of each.

Nested AnimatePresence components need the propagate prop so child exit animations run before the parent unmounts. The nested-propagate-required rule detects missing propagate, and nested-consistent-timing flags mismatched exit durations.

The audit performs static rule-based review of Motion code and does not execute animations or measure runtime behavior. It covers exit animations, presence hooks, mode selection, and nested exits only, not general animation performance or styling.