Exit Animations

AnimatePresence allows for components to animate out when being removed from the React tree.

// https://codesandbox.io/p/sandbox/nv3syl

import { motion, AnimatePresence } from "framer-motion"
 
export const MyComponent = ({ isVisible }) => (
  <AnimatePresence>
    {isVisible ? (
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      />
    ) : null}
  </AnimatePresence>
)

• exit prop provides the end state when the component is removed.