AnimatePresence Exit Animation Skipped When Child Keys Are Not Stable

Answer to the Core Questions

1. Key requirement: AnimatePresence matches exiting elements to previously rendered children by key. A stable, unique key is required on **every child that can exit** – not only on those that appear conditionally. If a child that might disappear is rendered without a stable key (or with a reused/array‑index key), React may reuse the same DOM node across renders, and Framer Motion cannot detect an exit, so the exit variant is never applied.

2. mode interaction with key changes: mode controls how exiting and entering children coexist. In sync mode, all exiting and entering children are rendered simultaneously; in wait mode, exiting children finish before new ones are mounted. Key changes occur *before* mode logic is applied: a new key is treated as a new element, and the previous element (with its exit variant) is scheduled to leave. Thus the mode does not alter the key‑matching logic; it only determines when the exit animation completes relative to the entrance.

3. Minimal reproduction to isolate key‑tracking failure:

import { AnimatePresence, motion } from "framer-motion";
import { useState } from "react";

const Item = ({ id, text }) => (
  
    {text}
  
);

export default function Demo() {
  const [items, setItems] = useState([
    { id: "a", text: "First" },
    { id: "b", text: "Second" },
  ]);

  const toggle = () => {
    setItems(prev => (prev.length === 2 ? prev.slice(1) : [...prev, { id: "c", text: "Third" }]));
  };

  return (
    
      Toggle
      
        {items.map(item => (
          
        ))}
      
    
  );
}

If you replace key={item.id} with key={index} or omit the key entirely, the exit animation will be skipped or applied to the wrong element. The same minimal snippet with stable keys demonstrates the exit animation correctly.

Steps to Verify and Fix Your Setup

1. Check your Framer Motion version – the behavior described applies to v10 and later. Run npm list framer-motion or yarn list framer-motion and confirm the major version.
2. Inspect keys – ensure every child that can be removed has a stable, unique key (e.g., a database ID or UUID). Avoid array indices or non‑unique strings.
3. Confirm exit props – each child component should expose an exit variant. If omitted, the component will mount/unmount instantly even if AnimatePresence is present.
4. Test mode settings – try mode="sync" and mode="wait" in a controlled environment. The exit animation should still run; wait simply delays the entrance until after exit completes.
5. Look for React key warnings – the console will log “Warning: Each child in a list should have a unique “key” prop.” This indicates unstable keys and is a strong clue for the issue.
6. Run the minimal reproduction – copy the snippet above, swap keys, and observe the difference. This isolates key‑tracking from missing exit props.

What to Do If the Problem Persists

After applying the above steps, if the exit animation is still not visible:

• Verify that the child component’s exit variant is correctly defined and not overridden by a parent animate prop.
• Check for CSS or JavaScript that might force a re‑render without unmounting (e.g., display: none instead of visibility: hidden).
• Ensure no other React key warnings appear for unrelated lists, as they can indicate a broader key management issue.

Missing Diagnostic Detail

To tailor the recommendation further, could you share the Framer Motion major version you’re using? This will confirm that the described behavior applies to your environment.