-
Notifications
You must be signed in to change notification settings - Fork 785
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’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BUG] AnimatePresence height animation with padding doesn't work #368
Comments
I don't think this a framer motion bug. You'd see this regardless of how you are animating height. |
I don't think so - if you slow down the transitions down so you can observe the values they end up animating from "auto" to the total padding height instead of animating from "auto" to 0. Also - even if you try and set the animation to:
Not only does it exhibit the same behavior, but it also now "snaps" in when animating in as well. I'm fairly sure that this should be animating smoothly here. |
I have noticed this behaviour as well when testing with |
Any updates on this? The problem is still present. |
I used until this is fixed a work around with Material-UI transitions:
|
Can confirm this is not the browser's fault. I slowed down the animation and it looks like Framer Motion is stopping the animation for the height at an early number. Even if you animate the padding to |
Yeah it's definitely a mis-measurement because of the padding. I'll have to look into it. |
For now, this can be solved with |
For me @ardiewen's solution worked when collapsing a div, but unfortunately not when opening it. Still better though |
This worked for me |
This bug extends to border as well. |
I'm just looking into this now. The behaviour in the original post isn't a bug. When The snapping in this example: #368 (comment) is a bug and maybe something we can do something about |
Hi! When can we expect a fix? |
moving the padding to an inner div solved it for me: https://codesandbox.io/s/framer-motion-animatepresence-padding-issue-forked-317ykj |
This bug makes the DX really bad. Using borders, margins, and padding is almost unavoidable for use cases like lists. Currently require a lot of boilerplate code to make it work smoothly. |
Closing this out with a wontfix. The official workaround is to apply padding to an inner div. If you visit the sandbox I reopened this ticket with: https://codesandbox.io/s/framer-motion-animatepresence-padding-issue-8wi8n?file=/src/index.js
I suspect in this specific example something is going on with |
Added to the bug template FAQs https://github.com/framer/motion/blob/main/.github/ISSUE_TEMPLATE/bug_report.md |
hello 👋 @mattgperry I tried your workaround, unfortunately the animation is not really working if we add padding to the inner div 😢 I have to delete it to have the smooth animation You can have a look at the video just bellow Please I would really need help on this one 🙏 Kapture.2022-08-09.at.23.24.06.mp4 |
If it still doesn't work, one way to solve this is to use something like @react-hook/size, to measure the size of your inner div and then pass that to framer-motion explicitly: const ref = useRef<HTMLDivElement | null>(null);
const [width, height] = useSize(ref);
<motion.section
animate={active ? "active" : "idle"}
variants={{
idle: { height: 50 },
active: { height: height },
}}
>
<motion.div ref={ref}> ... </motion.div>
</motion.section> |
1. Read the FAQs 👇
2. Describe the bug
When using AnimatePresence with some padding in the div that you are animating w/ height animation, the height calculation breaks and only animates the height to the (internal height - padding), both in and out.
3. IMPORTANT: Provide a CodeSandbox reproduction of the bug
https://codesandbox.io/s/framer-motion-animatepresence-padding-issue-zqxrk?fontsize=14
If you remove the padding: within the div css, you can see how much more smooth the animation is.
4. Steps to reproduce
Animate height on a div that has padding.
5. Expected behavior
Height should go from 0 to the height calculated by the browser for "auto".
6. Video or screenshots
Here's a gif of how it looks in my application: https://gfycat.com/weirdachingdogwoodclubgall
You can see the div underneath "snaps" because of all the height that still exists due to the padding.
7. Environment details
Tested in chrome
The text was updated successfully, but these errors were encountered: