Animate Components On Exit With Framer Motion React

Question

I have a button that toggles between two components. How do I add an animation for each component on exit? Here is my code that doesn't work:

export default function App() {
  const [dark, setDark] = useState(false);
  const toggle = () => {
    setDark(!dark);
  };

  return (
    <div>
      <AnimatePresence>
        {dark ? (
          <motion.h2 exit={{ opacity: 0 }}>Dark</motion.h2>
        ) : (
          <motion.h2 exit={{ opacity: 0 }}>Light</motion.h2>
        )}
      </AnimatePresence>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

Thanks for your help!

Does this answer your question? [Animate Presence exit not working framer motion](https://stackoverflow.com/questions/67974970/animate-presence-exit-not-working-framer-motion) — Al.G., Jun 25 '23 at 10:22

score 2 · Accepted Answer · answered Jan 08 '21 at 21:06

2

This is fixed now. In order for animation to work, you should add initial and animate props. Also each component needs to have a unique key.

answered Jan 08 '21 at 21:06

Android_Minsky

389
2
14

Animate Components On Exit With Framer Motion React

1 Answers1