-
Notifications
You must be signed in to change notification settings - Fork 741
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BUG] AnimatePresence gets stuck when state changes quickly #2554
Comments
Your code sandbox is broken |
Thanks for the sandbox - are you able to set it to public so I can take a look? |
@mattgperry When you use the right arrown to navigate through the animating images, the error shows up |
@Roon311 your link is also unavailable
|
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 |
@notmedia It should be working now. |
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 |
sorry about that, https://codesandbox.io/p/sandbox/serene-brattain-qwd278 is now public |
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.
Screen.Recording.2024-03-20.at.13.53.11.mov |
This appears to have been broken in |
Correct. Just checked! |
Same here, using |
Just linking for reference as I was linked to Issue #2023 first. We're also seeing this on |
Does anyone have a workaround for this? It breaks for us too |
Fix it to 11.0.10 |
@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 |
@mattgperry do you have any thoughts or should i just downgrade for now? |
I have the same issue. |
Same here. (v11.1.3) |
Good find! |
I can reproduce the bug in this codesandbox, just click quickly enough |
change the |
@luluxia Ouuups, I thought the sandbox applied the fix, sorry! 😄 |
@luluxia However, I found out the solution is not working with staggering children. :( |
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 |
@RareSecond |
Just chiming in to say - I am running into the same issue, and have found that avoiding |
There are a number of bugs with `framer-motion` that can result in sync issues with AnimatePresence and the conditionally rendered component. You can see this if you rapidly click an accordion, occasionally it gets out of sync and is closed when it should be open. This is a bigger problem with the viewer where the user may hold down the `z` key. It's trivial to get it to lock up. For now, just remove the animation entirely. Upstream issues for reference: framer/motion#2023 framer/motion#2618 framer/motion#2554
There are a number of bugs with `framer-motion` that can result in sync issues with AnimatePresence and the conditionally rendered component. You can see this if you rapidly click an accordion, occasionally it gets out of sync and is closed when it should be open. This is a bigger problem with the viewer where the user may hold down the `z` key. It's trivial to get it to lock up. For now, just remove the animation entirely. Upstream issues for reference: framer/motion#2023 framer/motion#2618 framer/motion#2554
Let's compare these versions v11.0.10 ➡️ v11.0.11 |
Curious if there is an update here - feels like adding and removing an element quickly with animate presence is quite common and should be supported without any hacks. |
Same Issue: I can also confirm that removing the suggestion above with removing the exit opacity works. |
2. Describe the bug
Framer Motion
v11.0.12
: When state changes very quicklyAnimatePresence
gets stuck and out of sync and no longer removes the element but instead always animates it in. Reverting to versionv10.12.2
(based of other bug report concerning a similar/same issue) does not exhibit the same problem3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/p/sandbox/serene-brattain-qwd278
4. Steps to reproduce
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
The text was updated successfully, but these errors were encountered: