[BUG] elements are not removed from the DOM after exit animation

[BenjaminIsMyName]

1. Read the FAQs 👇

2. Describe the bug

When using the x style (to move the element) on the exit prop, the element does not get removed from the DOM after the animation happens.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/fragrant-morning-kv792g?file=/src/App.js

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to 'the CodeSandbox'
2. Click on 'ADD' a few times (at least two times) very fast
3. Wait a few seconds, they should all be removed
4. See error - some are still there! after the exit animation! one or two of them are still there...

5. Expected behavior

All elements should be removed from the DOM after the exit animation finished.

6. Video or screenshots

video.mp4

7. Environment details

Windows 11, Chrome 107

[CRIMSON-CORP]

I'm also having this issue in "framer-motion": "^4.1.17", exit animation occurs, onExitComplete fires, but the element is still in the DOM and is still interactive, I'm trying to create a modal, but when the close modal function is called, the modal animates out, but its still there, and I can't interact with the rest of the page

[cvisco]

Also just ran into this issue when it broke our application's acceptance tests. 🤦 Seems that speed is the factor here. Removing nodes one-at-a-time, but within milliseconds of each other trips it up and leaves nodes behind.

[CRIMSON-CORP]

Updating Framer motion to the latest version worked for me

[czescwojtek]

Still an issue @framer-motion: 8.4.3

[MohammadKurjieh]

I am also experiencing this when nodes are removed quickly. I am using version framer-motion@8.5.2.

[isaacschwab]

I'm having the same issue with 8.1.4.

[isaacschwab]

Anybody have any workarounds for this bug? Due to modal use, this completely breaks the user experience.

[devweissmikhail]

Still an issue @framer-motion: 10.1.0

[setowilliam]

I am also noticing this issue on 10.0.1

[estebanmino]

I was facing the same issue, my mistake was that I wasn't setting the key prop correctly in the components inside <AnimatePresence>, now the problem is gone

[jo-sip]

I'm not sure if i'm experiencing the same bug or a similar one, but this occurs for me and is especially evident when the code runs in a background tab. When I navigate back to the tab, the exit animation cleans up and removes the 'exited' nodes. I assume this is because of some visibility/cleanup, but it would be ideal to exit animate the nodes when they're in a background tab.

(In this case, I have many videos playing audio on top of each other, and when I navigate back to make the tab active, the audio from the current video is the only one that remains playing).

[moneyandfame7]

In my case, the problem started with package version 10.12.12.
Video from "framer-motion": "10.12.12"

Screen.Recording.2023-05-17.at.18.46.39.mov

In the DOM:

A working version, "framer-motion": "10.12.7":

Screen.Recording.2023-05-17.at.18.48.34.mov

In the DOM:

[hiett]

Facing the same issue, and have a sort of hacky workaround - add in an additional variable to ensure when you add & remove an item, they keys are slightly different.

For example, I have an animation that is triggered when people scroll, it animates out + in some new text. As there is only one animation on screen at a time (the bug comes along by scrolling really fast), if you introduce a new state that increments each times it changes, and append that to the key, the keys will always be unique, so it'll never go back to a key that was previously there.

You could do the same approach with a button to add/remove items, if when adding an item you store an additional UUID / incremental value / something in the data, and append that to the key, it will be unique.

This is quite hacky and not optimal, but it was the most viable workaround I could find without heaving to tear it all out.

[rhogeranacleto]

@hiett thank you for your comment, it solved my issue while I wait for an official fix.

[pixelass]

I also noticed similar issues on the examples: https://www.framer.com/motion/examples/#exit-animations

(Fast clicks or drags seem to be a random issue with AnimatePresence)

Also: these examples are super outdated. (I would love to see up to date examples in the docs please)

I tried to update it (5 Major versions of framer-motion, 2 major versions of React 🤦):

Before

After

https://codesandbox.io/s/framer-motion-image-gallery-forked-ccnwk9?file=/src/Example.tsx

[regexyl]

Fixed in v10.16.5 (#2257)