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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
rickyhopkins opened this issue Nov 18, 2021 · 6 comments 路 Fixed by #1361
Labels

Comments

@rickyhopkins
Copy link

@rickyhopkins rickyhopkins commented Nov 18, 2021

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

@rickyhopkins rickyhopkins changed the title [BUG] [BUG] A motion element with the layout flag with an AnimatePresence sibling does not transition smoothly Nov 18, 2021
@rbourdon
Copy link
Contributor

@rbourdon rbourdon commented Nov 19, 2021

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

example

@rickyhopkins
Copy link
Author

@rickyhopkins rickyhopkins commented Nov 19, 2021

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
Copy link
Contributor

@rbourdon rbourdon commented Nov 19, 2021

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
Copy link
Collaborator

@mattgperry mattgperry commented Nov 19, 2021

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
Copy link
Author

@rickyhopkins rickyhopkins commented Nov 19, 2021

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

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

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

@mattgperry
Copy link
Collaborator

@mattgperry mattgperry commented Nov 19, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

3 participants