motion: [BUG] AnimatePresence gets stuck when state changes quickly

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

Conditionally render an element inside AnimatePresence with an exit animation
Trigger condition change quickly
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

About this issue

Original URL
State: open
Created 4 months ago
Reactions: 20
Comments: 30

Most upvoted comments

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

iravid on Mar 26, 2024

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

eryilmazyasin on Mar 20, 2024

@RareSecond This seems to solve the problem of “deleting” the object, but there’s still something wrong with it With opacity: framer-presence-issue

Without opacity: framer-bug-bis

Thanaen on Apr 19, 2024

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

luluxia on Apr 18, 2024

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

10.12.2 does not work for me, 11.0.10 does

6thpath on Apr 12, 2024

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

Fix it to 11.0.10

ConsoleTVs on Apr 11, 2024

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!

ConsoleTVs on Mar 27, 2024