[BUG] AnimatePresence gets stuck when state changes quickly

[tommhuth]

trafficstars

2. Describe the bug Framer Motion v11.0.12: When state changes very quickly AnimatePresence gets stuck and out of sync and no longer removes the element but instead always animates it in. Reverting to version v10.12.2 (based of other bug report concerning a similar/same issue) does not exhibit the same problem

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug https://codesandbox.io/p/sandbox/serene-brattain-qwd278

4. Steps to reproduce

1. Conditionally render an element inside AnimatePresence with an exit animation
2. Trigger condition change quickly
3. Animating component gets stuck as rendered, and any changes to the condition will just trigger an reset from initial => animate. The component is no stuck as visible and will never leave the DOM.

5. Expected behavior

The component should not get stuck as mounted

6. Video or screenshots

If applicable, add a video or screenshots to help explain the bug.

7. Environment details

Chrome 122, Mac Sonoma

[Roon311]

I am encountering the same issue When the state changes quickly resolved changes to undefined.

[mattgperry]

Thanks for the sandbox - are you able to set it to public so I can take a look?

[Roon311]

@mattgperry When you use the right arrown to navigate through the animating images, the error shows up

[notmedia]

@Roon311 your link is also unavailable

Unable to access this workspace
It is likely that you are not a member of the team that this project belongs to. To be able to access the web editor of this repository and edit the code, you need to be invited to the team.

[justrealmilk]

Okay now that I know why it breaks I can actually trigger the problem https://codesandbox.io/p/sandbox/modern-wood-h35hc6

Click page/back until it breaks I guess

[Roon311]

@notmedia It should be working now. if you keep pressing the right arrow you will get the error.

[OlegWock]

Here is another reproduction. Double click the button to see it

https://stackblitz.com/edit/framer-motion-animate-presence-bug?file=src%2FHoldToConfirm.tsx

I can confirm that framer motion 11.0.8 works correctly with same code

[tommhuth]

sorry about that, https://codesandbox.io/p/sandbox/serene-brattain-qwd278 is now public

[eryilmazyasin]

I have the same problem and still could not find the solution. It happened after version 11.0.8. Here is my example and code below.

      <AnimatePresence>
                    {open && (
                        <motion.div
                            key="contentMarkContainer"
                            initial={{ opacity: 0, position: 'absolute', bottom: 0, left: 0, right: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0, transition: { ease: 'easeOut', duration: 0.75 } }}
                        >
                            {My codes here...}
                         </motion.div>
                         )}
        </AnimatePresence>

https://github.com/framer/motion/assets/40694757/2d020827-8537-466c-a1eb-6bd3414be27f

[iravid]

This appears to have been broken in 11.0.11. Last version that doesn't suffer from this issue is 11.0.10.

[ConsoleTVs]

This appears to have been broken in 11.0.11. Last version that doesn't suffer from this issue is 11.0.10.

Correct. Just checked!

[federicocappellotto97]

Same here, using "framer-motion": "^11.0.25"

[HHogg]

Just linking for reference as I was linked to Issue #2023 first. We're also seeing this on 11.0.24.

[pklada]

Does anyone have a workaround for this? It breaks for us too

[ConsoleTVs]

Does anyone have a workaround for this? It breaks for us too

Fix it to 11.0.10

[Roon311]

@pklada Reverting to version v10.12.2 worked for me.

[6thpath]

@pklada Reverting to version v10.12.2 solved worked for me.

10.12.2 does not work for me, 11.0.10 does

[pklada]

I'd prefer not to revert if possible as we're relying on some more recent fixes. Would be nice if there was some update on this specific issue as it seems like it is affecting a number of others

[pklada]

@mattgperry do you have any thoughts or should i just downgrade for now?

[luluxia]

I have the same issue. https://codesandbox.io/p/devbox/great-brattain-hc9kgz but i found using non-repeating key can solve it.

[kangju2000]

Same here. (v11.1.3) https://stackblitz.com/edit/vitejs-vite-6vewix?file=src%2FApp.tsx

[VrTech]

I have the same issue. https://codesandbox.io/p/devbox/great-brattain-hc9kgz but i found using non-repeating key can solve it.

Good find! Using count as key can hot fix this for now const [count, setCount] = useState(0); or reverting to 11.0.10 works as well.

[Thanaen]

I have the same issue. https://codesandbox.io/p/devbox/great-brattain-hc9kgz but i found using non-repeating key can solve it.

I can reproduce the bug in this codesandbox, just click quickly enough

[luluxia]

I have the same issue. https://codesandbox.io/p/devbox/great-brattain-hc9kgz but i found using non-repeating key can solve it.

I can reproduce the bug in this codesandbox, just click quickly enough

change the key attribute in line 21 will fix it. I wrote a comment there.

[Thanaen]

@luluxia Ouuups, I thought the sandbox applied the fix, sorry! 😄

[VrTech]

@luluxia However, I found out the solution is not working with staggering children. :(

[RareSecond]

Am experiencing the exact same issue, but in a different setup. There seem to be cases where exit is never called, and the potential for it not being called seems to be indeed tied to opacity. If I remove the opacity on my exit, it will always get called.

Here's an example. If you slowly hover over the dots on the right, it works as expected. However, once you start going faster, it sometimes bugs and multiple divs remain visible

Important part is that, if you remove opacity from the exit animation, it will work perfectly fine

[Thanaen]

@RareSecond This seems to solve the problem of "deleting" the object, but there's still something wrong with it With opacity:

Without opacity:

[beefchimi]

Just chiming in to say - I am running into the same issue, and have found that avoiding opacity can get around the problem. A little more context here: https://github.com/framer/motion/issues/2618#issuecomment-2085488130

[quentinlagache]

This appears to have been broken in 11.0.11. Last version that doesn't suffer from this issue is 11.0.10.

Let's compare these versions v11.0.10 ➡️ v11.0.11