Implementing Smooth Entry & Exit Animations in React with Framer Motion’s AnimatePresence

Goal: Seamless Mount & Unmount Animations

When a React component appears or disappears, developers often want a visual cue that the UI is changing. Framer Motion’s AnimatePresence component lets you animate components on unmount, turning abrupt jumps into fluid transitions. This guide walks through the exact setup, common pitfalls, runtime checks, and recovery strategies so you can reliably add entry/exit animations to any React list or conditional UI.

Prerequisites

• React 18+ (hooks support required)
• Framer Motion v10+ installed via npm i framer-motion
• Basic understanding of React functional components and JSX
• Knowledge of CSS or inline style objects for animation values

Step‑by‑Step Procedure

1. Wrap the parent container with AnimatePresence

   Place AnimatePresence around the part of the tree that will receive dynamic children. It must be a sibling of the motion elements that declare an exit prop.

   import { AnimatePresence, motion } from "framer-motion";
   
   const ItemList = ({ items }) => (
     <AnimatePresence>
       {items.map(item => (
         <motion.div
           key={item.id}
           layout
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: -20 }}
           transition={{ duration: 0.3 }}
         >
           {item.text}
         </motion.div>
       ))}
     </AnimatePresence>
   );
   

2. Define a stable key

   React uses the key to track element identity across renders. If the key changes or is omitted, Framer Motion cannot pair a mount with its eventual unmount, causing the exit animation to be skipped. Use a unique, stable identifier (e.g., item.id).

3. Set the exit prop on each motion child

   The exit prop tells Framer Motion what animation to run when the component is removed from the React tree. It can be a style object, a variant name, or a function that receives the component’s current state.

4. Ensure the component is actually unmounted

   Conditional rendering must remove the element from the DOM. If you hide it via CSS or a parent display:none, AnimatePresence will not trigger the exit animation. Use logic like {condition && …} or manipulate the array that feeds map.

5. Optional: Enable shared layout transitions

   For moving items (e.g., reordering a list), add layoutId to each motion element and wrap the parent with AnimateSharedLayout (or LayoutGroup in newer versions). This creates smooth positional transitions between mount and unmount.

Runtime Checks & Diagnostics

• Console warnings – Framer Motion logs a message if an exit prop is missing on a motion child inside AnimatePresence. Look for “Missing exit prop” warnings and add the prop immediately.
• Animation timeline – Open the browser’s developer tools, switch to the Animations panel, and watch the timeline. The exit animation should appear after the component is removed.
• React DevTools – Inspect the component tree after triggering a removal. The motion element should disappear only after the animation’s duration has elapsed.

Common Pitfalls & Recovery Strategies

• Missing exit prop

  Result: component vanishes instantly. Fix: add an exit style or variant.

• Improper parent element

  Result: exit animation may not play because the parent isn’t a motion element. Fix: wrap the parent with motion.div or use LayoutGroup.

• Unstable keys

  Result: Framer Motion cannot match mount/unmount pairs, skipping exit. Fix: ensure keys are stable across renders.

• Excessive nesting of AnimatePresence

  Result: performance overhead and potential animation glitches. Fix: keep a single AnimatePresence wrapper per dynamic list or conditional block.

Recovery Options

• Fallback to CSS transitions – If Framer Motion fails to animate, you can add a CSS class with transition properties as a safety net.
• Graceful degradation – Wrap the animation logic in a try/catch block or conditionally render the animated component only when the environment supports requestAnimationFrame.
• Performance monitoring – Use requestAnimationFrame and performance.now() to log frame drops during the animation and adjust duration or easing accordingly.

Practical Example: A Deleting Todo List

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

const TodoItem = ({ id, text, onDelete }) => (
  <motion.div
    key={id}
    layout
    initial={{ opacity: 0, scale: 0.8 }}
    animate={{ opacity: 1, scale: 1 }}
    exit={{ opacity: 0, scale: 0.8, y: -20 }}
    transition={{ duration: 0.25 }}
    className="todo-item"
  >
    {text}
    <button onClick={() => onDelete(id)}>X</button>
  </motion.div>
);

const TodoList = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: "Buy milk" },
    { id: 2, text: "Walk dog" },
  ]);

  const deleteTodo = id => setTodos(t => t.filter(t => t.id !== id));

  return (
    <div className="list-container">
      <AnimatePresence>
        {todos.map(t => (
          <TodoItem key={t.id} {...t} onDelete={deleteTodo} />
        ))}
      </AnimatePresence>
    </div>
  );
};

Run this component, click the X button, and observe the exit animation. If the animation doesn’t play, check the console for missing exit warnings or unstable keys.

Conclusion

By wrapping dynamic content with AnimatePresence, supplying stable keys, and defining explicit exit animations, you can turn abrupt unmounts into polished UI transitions. Always verify with the browser’s animation timeline and React DevTools, and use the recovery strategies above if the animation fails or performance drops.