Skip to content
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 with mode=popLayout doesn't consistently trigger opacity exit animations on elements with layout #2416

Open
samselikoff opened this issue Nov 26, 2023 · 7 comments
Labels
bug Something isn't working

Comments

@samselikoff
Copy link

2. Describe the bug

Motion elements with layout and exit animations don't always run their exit animations if they're inside an <AnimatePresence> that has a mode of "popLayout".

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/devbox/github/samselikoff/2023-11-25-framer-motion-pop-layout-bug/tree/main?file=%2Fapp%2Fpage.tsx%3A9%2C11

4. Steps to reproduce

Steps to reproduce the behavior:

  1. Click the "Add item" 4 times
  2. Click on an item. Notice it fades out.
  3. Click another item. Notice it disappears (its exit opacity animation is not triggered)

Behavior seems to continue, where the fade-out only happens for every other item.

5. Expected behavior

Exit animation is always applied.

6. Video or screenshots

Screen.Recording.2023-11-25.at.10.25.14.PM.mov
@samselikoff samselikoff added the bug Something isn't working label Nov 26, 2023
@samselikoff
Copy link
Author

Interestingly if I add a different prop to the exit animation, like x: 100, it seems to work. So might be some bug related specifically to opacity!

@RareSecond
Copy link

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

CleanShot 2024-04-19 at 14 51 24

@quentinlagache
Copy link

Hey @mattgperry, Could you help or propose a workaround about this well documented issue from @samselikoff . We are also experiencing this issue in a lot of animations since 11.0.11 release.

@dclstn
Copy link

dclstn commented Jun 10, 2024

This bug is still prevalent, any updates or workarounds?

@iiskakov
Copy link

Can confirm, still an issue

@letelete
Copy link

@RareSecond can confirm. I faced a similar issue as described in #2416 (comment) recently. Have you found any workaround yet, by chance?

Tested on: "framer-motion": "^10.16.4"

@quentinlagache
Copy link

Bug since version 11.0.11.
Related issues: #2618 #2554 #2673

How can we help @mattgperry ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

6 participants