motion icon indicating copy to clipboard operation
motion copied to clipboard

Published 20 hours ago • verified publisher icon motiondivision

[BUG] AnimatePresence with mode=popLayout doesn't consistently trigger opacity exit animations on elements with layout

Open samselikoff opened this issue 1 year ago • 8 comments

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

https://github.com/framer/motion/assets/2922250/878ecf24-d382-4885-8db6-2765ab8d1e64

samselikoff avatar Nov 26 '23 03:11 samselikoff

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!

samselikoff avatar Nov 26 '23 03:11 samselikoff

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

RareSecond avatar Apr 19 '24 12:04 RareSecond

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.

quentinlagache avatar May 11 '24 04:05 quentinlagache

This bug is still prevalent, any updates or workarounds?

dclstn avatar Jun 10 '24 11:06 dclstn

Can confirm, still an issue

iiskakov avatar Jun 18 '24 11:06 iiskakov

@RareSecond can confirm. I faced a similar issue as described in https://github.com/framer/motion/issues/2416#issuecomment-2066513449 recently. Have you found any workaround yet, by chance?

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

letelete avatar Jun 19 '24 08:06 letelete

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

How can we help @mattgperry ?

quentinlagache avatar Jun 19 '24 09:06 quentinlagache