[BUG] AnimatePresence height animation with padding doesn't work

[snowl]

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

[thebuilder]

I don't think this a framer motion bug. You'd see this regardless of how you are animating height.
It's how the browsers deal with padding when height is 0.

[snowl]

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:

<motion.div
                key={item}
                animate={{ height: "auto", opacity: 1, paddingTop: 30, paddingBottom: 30 }}
                exit={{ height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0 }}
                initial={{ height: 0, opacity: 0, paddingTop: 0, paddingBottom: 0 }}
              >

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.

[rijk]

I have noticed this behaviour as well when testing with height: 'auto'. I also think it’s a Framer Motion measuring bug.

[vavra7]

Any updates on this? The problem is still present.

[cjoecker]

I used until this is fixed a work around with Material-UI transitions:

import { Collapse } from '@material-ui/core';
import { motion, useIsPresent } from 'framer-motion';
import React, { memo, useEffect, useState } from 'react';

interface CollapseAnimationProps {
  id: number;
  children: React.ReactNode;
}

function _CollapseAnimation({ id, children }: CollapseAnimationProps) {
  const isPresent = useIsPresent();
  const [isVisible, setIsVisible] = useState(false);

  const ANIMATION_TIME = 500;

  useEffect(() => {
    const timeout = setTimeout(() => setIsVisible(true), 0);
    return () => clearTimeout(timeout);
  }, []);

  useEffect(() => {
    if (isVisible && !isPresent) {
      setIsVisible(false);
    }
  }, [isPresent, isVisible]);

  return (
    <motion.div
      key={id}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: ANIMATION_TIME / 1000 }}
    >
      <Collapse in={isVisible} timeout={ANIMATION_TIME}>
        {children}
      </Collapse>
    </motion.div>
  );
}
//Don't use framer motion height animation until this bug is solved:
//https://github.com/framer/motion/issues/368

export const CollapseAnimation = memo(_CollapseAnimation);

[andria-dev]

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 0 it stops early. For me it's stopping at like 20px for no reason. If I take away all padding animations, it works fine.

[mattgperry]

Yeah it's definitely a mis-measurement because of the padding. I'll have to look into it.

[ardiewen]

For now, this can be solved with height: auto animating on an outside container without padding, and set padding on an inner container.

[MikeWillis]

For me @ardiewen's solution worked when collapsing a div, but unfortunately not when opening it. Still better though

[oORiggsOo]

<motion.div
                key={item}
                animate={{ height: "100px", opacity: 1, paddingTop: "30px", paddingBottom:  "30px"}}
                exit={{ height: "0px" opacity: 0, paddingTop: "0px", paddingBottom: "0px" }}
                initial={{ height: "0px", opacity: 0, paddingTop: "0px", paddingBottom: "0px" }}

This worked for me
.. make sure you close ya values with double quotes, and add the px value on items that would justify marked with px

[kylemh]

This bug extends to border as well.

[mattgperry]

I'm just looking into this now. The behaviour in the original post isn't a bug. When height is animated to 0, height is animated to 0. But of course with CSS that doesn't mean the actual height is going to be 0 because padding still exists.

The snapping in this example: #368 (comment) is a bug and maybe something we can do something about