[BUG] Sharp transition during height animation

[present-g]

Describe the bug

I need to animate the height from 0 to 'auto', the animation scene is calculated incorrectly, and when 'auto' appears, there is a jump

IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/eager-silence-6cpkd0?file=/src/App.js

Steps to reproduce

Steps to reproduce the behavior:

1. Open the page
2. Look at the animation
3. You can use the "Toggle" button for easy replay

The problem is only when opening ...

Expected behavior

I need a smooth, jump-free animation with lots of components inside

[thexpand]

The reason why this happens is because of the padding on the animated element. Try eliminating the padding by adding a nested element (an inner container) and put the padding on that inner container. Then, animate the parent container - without the padding on the animated element, there shouldn't be that jumpy behavior.

[merlindru]

@thexpand I'm doing exactly that, but the jump still persists. Related issue: #368

[thexpand]

@merlindru Probably it would be best if you would provide a reproducible example with your specific use-case, e.g. in CodeSandbox.

[ervinpiol]

In my case I use "br" The Line Break element for the space

[dev-frid]

Experienced something similar, the height of my container animated inconsistently regardless of padding.
Firs time animated correctly, then any subsequent height changes did not animate.

The issue was fixed by installing framer-motion@latest.

Reproduction:

<div>
      (...)
      <AnimatePresence>
        {expanded && (
          <motion.div
            initial={{ height: 0 }}
            animate={{ height: "auto" }}
            exit={{ height: 0 }}
            transition={{ duration: 0.3, ease: "easeInOut" }}
          >
            (content...)
          </motion.div>
        )}
      </AnimatePresence>
</div>