Exit animations

This skill reviews how conditional Motion elements leave the screen. It checks the wrapper, the exit props, the list keys and the presence mode.

Every check is a pair. The broken line sits beside the line that replaces it.

A conditional motion element with an exit and no AnimatePresence is a finding. Mode choice is a finding when it doubles the wait or makes two layout boxes fight. Curve choice and the 300ms cap belong to timing-functions. This skill only applies that cap to mode="wait", which plays exit and enter in series.

When to use

Use this when a component should animate out, a list should reorder, or an exit prop seems ignored. Use timing-functions for the easing of that exit. Use pseudo-elements when the transition is a shared element across a page, via view-transition-name.

1. Find conditional motion

Read the files in scope. List every motion element rendered with &&, a ternary or a .map inside a presence boundary. If the project does not use Motion, say so and stop.

2. Check the wrapper

A conditional element with exit sits inside AnimatePresence. That is exit-requires-wrapper. An element inside AnimatePresence defines exit. That is exit-prop-required. A list uses a stable id as key, not the array index. That is exit-key-required. exit mirrors initial. An enter of { opacity: 0, y: 20 } exits to the same value. That is exit-matches-initial.