gotchajavascriptMajor

AnimatePresence Required for Exit Animations in Framer Motion

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

AnimatePresenceexit animationunmount animationframer motion exitconditional render animation

Problem

Setting an exit prop on a motion component has no effect — the component disappears instantly when removed from the React tree.

Solution

Wrap the conditionally rendered component with <AnimatePresence>. It keeps the element mounted long enough for the exit animation to complete before removing it from the DOM.

import { motion, AnimatePresence } from 'framer-motion';

function Modal({ isOpen }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          key="modal"
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.95 }}
          transition={{ duration: 0.2 }}
        >
          Modal content
        </motion.div>
      )}
    </AnimatePresence>
  );
}

Why

React unmounts components synchronously. AnimatePresence intercepts the unmount, defers it, and signals the exit variant to play. Without it, the DOM node is gone before the animation has a chance to run.

Gotchas

Every direct child of AnimatePresence must have a unique key prop, otherwise Framer Motion cannot track which child is entering or exiting.
AnimatePresence with mode="wait" ensures the exit animation finishes before the enter animation starts — useful for page transitions.
Avoid wrapping lists with a single AnimatePresence key; each item should have its own key.
Nested AnimatePresence components are supported but can cause layering issues if not carefully managed.

Revisions (0)

No revisions yet.