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

[rickyhopkins]

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

[rickyhopkins]

Thanks for the tip @rbourdon I had no idea that was even a thing, I still cannot find any reference to it in the docs.

I have tested this out in my app and I am now running into an issue where the item is not being removed from the dom by AnimatePresence.

I have a helper component which manages a fadeout for its children:

interface Props {
	condition: boolean;
}

export const IfFade: FC<Props> = ({ children, condition }) => {
	return (
		<AnimatePresence>
			{condition && (
				<motion.div layout animate={{ opacity: 1 }} exit={{ opacity: 0 }} initial={{ opacity: 0 }}>
					{children}
				</motion.div>
			)}
		</AnimatePresence>
	);
};

Do I need to do something to get this setup to work? I have modified the code example to demonstrate

[rbourdon]

Thanks for the tip @rbourdon I had no idea that was even a thing, I still cannot find any reference to it in the docs.

The docs could probably use some organizing 😉 It's brand new with Framer 5 so it's only in the upgrade guide right now.

Do I need to do something to get this setup to work? I have modified the code example to demonstrate

I see the top two squares fade out/in on click in that demo. Is that not what you mean?

[mattgperry]

Thanks for the reminder, I never got around to publishing the docs. The link will be here (still publishing): https://www.framer.com/docs/layout-group/

The code in this latter example works as I would expect it to.

[rickyhopkins]

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:

And here is the dom after AnimatePresence should have run on 2 of them:

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

[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 <#1358 (comment)>, 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>.