[BUG] A motion element with the layout flag with an AnimatePresence sibling does not transition smoothly

1. Read the FAQs 👇 👍

2. Describe the bug

A motion element with the layout flag with an AnimatePresence sibling does not transition smoothly when the AnimatePresence element is removed. It will animate nicely on enter but not exit.

I may be doing something wrong here, but I would expect this to work.

If I move the layout div inside the AnimatePresence then it does work as expected, but this is not always possible.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/framer-motion-simple-animation-forked-6m9ej?file=/src/index.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

    <div className="container">
      <Refresh onClick={toggle} />
      <AnimatePresence>
        {show && (
          <motion.div
            key="1"
            className="example-container"
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={toggle}
          ></motion.div>
        )}
      </AnimatePresence>
      <motion.div
        onClick={toggle}
        key="2"
        className="example-container"
        layout
      ></motion.div>
    </div>

5. Expected behavior

The bottom motion div should animate smoothly when the top one is removed from the dom.

6. Video or screenshots

I think the codesandbox is easy enough to understand

[rbourdon]

You can fix this by wrapping everything in a <LayoutGroup>

example

[mattgperry]

Ah yeah I see, thanks for clarifying

On Fri, 19 Nov 2021 at 19:28, rickyhopkins @.***> wrote:

The code does not work as expected, both squares fade out as expected but only one is removed from the dom as expected.

Here is the three items in the dom: [image: image] https://user-images.githubusercontent.com/4586254/142680268-f04e2f03-97ce-428e-92ba-730438a14171.png

And here is the dom after AnimatePresence should have run on 2 of them: [image: image] https://user-images.githubusercontent.com/4586254/142680341-d6f81060-fc30-4a64-afad-13fed82e419f.png

And I actually got it backwards in this example, the wrapped Item square is removed but the inline one does not.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/framer/motion/issues/1358#issuecomment-974350552, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB34WKQFZ5MGYLACUIATZSTUM2QODANCNFSM5IKNQ7XA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.