CODEWITHSUNDEEP
reactjsframer-motion
rbhalla
rbhalla

Reputation: 1189

When toggling between components with Framer Motion's AnimatePresence, exit animations don't seem to happen

An example of this is here: https://codesandbox.io/s/eloquent-moon-1wrmgp?file=/src/App.js

Click the toggle button to switch between two different components being rendered.

You'll notice that despite the incredibly long duration set for the transition, this only seems to apply for mounting animations. Components unmounting don't have a similarly timed exit animation. In fact, there doesn't seem to be an exit animation at all.

Why is this?

Upvotes: 1

Views: 1736

Answers (1)

Andrew
Andrew

Reputation: 7555

As per the docs: https://www.framer.com/motion/animate-presence/##exit-animations

"Direct children must each have a unique key prop so AnimatePresence can track their presence in the tree."

Change it to have the keys as the direct children and it will work

<AnimatePresence>{aOrB ? <A key="A" /> : <B key="B" />}</AnimatePresence>

Upvotes: 3

Related Questions