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] AnimatePresence not working with layout animations #1983
Comments
Might not be related. <form>
<motion.div layout={'position'}>Title</motion.div>
<motion.div layout={'position'}>Users</motion.div>
<motion.div layout={'position'}>Inputs</motion.div>
<AnimatePresence>conditional component</AnimatePresence>
</form> Untitled.video.-.Made.with.Clipchamp.mp4if I add the mode type poplayout it starts to work in a way. <form>
<motion.div layout={'position'}>Title</motion.div>
<motion.div layout={'position'}>Users</motion.div>
<motion.div layout={'position'}>Inputs</motion.div>
<AnimatePresence mode={'popLayout'}>conditional component</AnimatePresence>
</form> Untitled.video.-.Made.with.Clipchamp.1.mp4I think the reason why it doesn't work in the first case is that the layout does not wait for animate presence to conclude. It's code either runs concurrently or before animate presence is concluded. |
not sure if it's the same issue but i had a i bisected it to |
I also have this issue. Seemingly when rendering a motion.div with the |
1. Read the FAQs 馃憞
2. Describe the bug
Not sure if I'm just doing something wrong here but it seems AnimatePresence doesn't reliably perform the exit animation when the children has the
layout
prop:CleanShot.2023-02-25.at.08.12.04.mp4
More specifically, it seems that the animation won't happen if a current exit animation is in progress. If you click on "remove" slowly (i.e. wait for the exit animation to finish and the element to be removed from the DOM), then the exit animations work as expected.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/s/affectionate-alex-mjc72j?file=/src/App.js
4. Steps to reproduce
5. Expected behavior
Multiple numbers can perform the exit animation at the same time.
7. Environment details
MacOS Monterey 12.6.3, Chrome 110.0.5481.177
FAQs
Framer Motion won't install
Framer Motion 7+ uses React 18 as a minimum. If you can't upgrade React, install the latest version of Framer Motion 6.
height: "auto"
is jumpingAnimating to/from
auto
requires measuring the DOM. There's no perfect way to do this and if you have also applied padding to the same element, these measurements might be wrong.The recommended solution is to move padding to a child element. See this issue for the full discussion.
Type error with
AnimateSharedLayout
AnimateSharedLayout
was deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.Preact isn't working
Framer Motion isn't compatible with Preact.
AnimatePresence
isn't workingHave all of its immediate children got a unique
key
prop that remains the same for that component every render?Is the
AnimatePresence
correctly outside of the controlling conditional?AnimatePresence
must be rendered whenever you expect anexit
animation to run - it can't do so if it's unmounted!The text was updated successfully, but these errors were encountered: