motion: [BUG] elements are not removed from the DOM after exit animation
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:
- Go to ‘the CodeSandbox’
- Click on ‘ADD’ a few times (at least two times) very fast
- Wait a few seconds, they should all be removed
- See error - some are still there! after the
exitanimation! 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
7. Environment details
Windows 11, Chrome 107
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 5
- Comments: 16
I was facing the same issue, my mistake was that I wasn’t setting the
keyprop correctly in the components inside<AnimatePresence>, now the problem is goneAlso 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.
Still an issue @framer-motion: 8.4.3
Fixed in
v10.16.5(#2257)I am also noticing this issue on 10.0.1
Updating Framer motion to the latest version worked for me
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@hiett thank you for your comment, it solved my issue while I wait for an official fix.
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.
Still an issue @framer-motion: 10.1.0
Anybody have any workarounds for this bug? Due to modal use, this completely breaks the user experience.
I’m having the same issue with 8.1.4.
I am also experiencing this when nodes are removed quickly. I am using version framer-motion@8.5.2.