Animate Presence exit not working framer motion

Question

Animate presence exit prop is not working

what i am doing wrong?

<AnimatePresence>
      <motion.div
        initial={{ opacity: 0, x: "-100%" }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: "100%" }}>
        <h1>Head</h1>
      </motion.div>
</AnimatePresence>

Fixed!!

Fixed it by adding these two props to Switch:

import {useLocation} from "react-router-dom";

const location = useLocation();

<Switch location={location} key={location.pathname}>
//Routes
</Switch>

Are you saying the exit animation isn't working between page transitions? Or are you *just* trying to move a div from left to right? — Joel Hager, Jun 14 '21 at 18:07
i am working with react router to switch among other components — Mr SaaD, Jun 15 '21 at 08:16
If you're switching between routes, you have to set `exitBeforeEnter` on the AnimatePresence to let the previous page animate out first - https://www.framer.com/api/motion/animate-presence/#animatepresenceprops.exitbeforeenter — Joel Hager, Jun 15 '21 at 09:36

Joshua Wootonn · Accepted Answer · 2022-01-31T16:12:52.527

21

The reason that this is not working is that you have to explicitly specify the key of the child that you are conditionally rendering.

Doc reference: https://www.framer.com/api/motion/animate-presence/#unmount-animations

In your case that is the <motion.div>

I have some examples of AnimatePresense here

With Multiple Items: https://codesandbox.io/s/framer-motion-multiple-item-animation-presence-sdmq2
With React Router: https://codesandbox.io/s/framer-motion-animate-react-router-transition-kczeg

edited Jan 31 '22 at 16:12

answered Jun 14 '21 at 21:49

Joshua Wootonn

1,041
7
9

1

second sandbox helped me! thank you @Joshua Wootonn – Mr SaaD Jun 15 '21 at 09:11
1

Dude you literally saved me from my Headache thanks so much – Lawlesx Aug 21 '21 at 17:06
The sandbox has broken unfortunately : ( – SaroGFX Nov 21 '22 at 21:58
2

Thanks for saying something @SaroGFX. CodeSandbox auto-updated framer motion to the latest version without auto-updating the react version. Since Framer Motion 7 requires React 18 the sandboxes were broken. I just downgraded the framer motion, and they are working again. Note: This doesn't conflict with any breaking changes in framer-motion 7, so if you are on the latest it shouldn't be a problem – Joshua Wootonn Nov 22 '22 at 22:57
This helped me as well, thanks! – Designly Jun 04 '23 at 21:41

Animate Presence exit not working framer motion

1 Answers1

Linked