Any way to animate the height of a div with height="auto" when the content of that div changes size?

[samandmaxphoto]

Hey everyone!

I'm having a bit of an issue with Framer Motion (using it in React) that I can't seem to solve elegantly.

I have a motion.div that has some content in it. That div has a height="auto" so it wraps the div content. When that content change, I animate that change. So far so good. The problem is, if the content changes height, the height of the animated div doesn't animate to the new value and instead jumps directly to it.

This makes sense from my understanding, since the height is set to "auto", there's no animation happening to go from height="auto" to height="auto". I could animate the height by specifying the values in px or rem or whatever, but the problem is: I don't know that height since the height is dependent on the content.

Here's a simple example of what I mean : https://stackblitz.com/edit/react-pxnjuj?file=src/App.js
Notice how the buttons below the div jumps instead of animating when the content is changed.

I'm assuming I could make it work by measuring the height of the current content and using it as a starting value before changing the content, but that seems a bit cumbersome to me. Is there no easier way to do this? Maybe something like

initial={{ height: useCurrentValue() }}
animate={{ height: "auto" }}

where useCurrentValue() would automatically use the currently measured value?

[DerJacques]

I know this is an older thread, but I had the same challenge. Ended up doing what you suggested: Measuring the height manually whenever it changes. This is the abstracted component I came up with:

import classNames from 'classnames'
import { motion } from 'framer-motion'
import React, { useEffect, useRef, useState } from 'react'

interface AnimateChangeInHeightProps {
  children: React.ReactNode
  className?: string
}

export const AnimateChangeInHeight: React.FC<AnimateChangeInHeightProps> = ({ children, className }) => {
  const containerRef = useRef<HTMLDivElement | null>(null)
  const [height, setHeight] = useState<number | 'auto'>('auto')

  useEffect(() => {
    if (containerRef.current) {
      const resizeObserver = new ResizeObserver((entries) => {
        // We only have one entry, so we can use entries[0].
        const observedHeight = entries[0].contentRect.height
        setHeight(observedHeight)
      })

      resizeObserver.observe(containerRef.current)

      return () => {
        // Cleanup the observer when the component is unmounted
        resizeObserver.disconnect()
      }
    }
  }, [])

  return (
    <motion.div className={classNames(className, 'overflow-hidden')} style={{ height }} animate={{ height }} transition={{ duration: 0.1 }}>
      <div ref={containerRef}>{children}</div>
    </motion.div>
  )
}

You can then use it like this:

<AnimateChangeInHeight>
  <div>
    // some content that changes in height
  </div>
</AnimateChangeInHeight>

[Dodie324]

Is there a way to allow children elements to scroll if we're setting overflow: hidden on the parent?

[Vinlock]

I would probably wrap them in a div container that has overflow-y: scroll on it.

[omerfaran]

I think this won't work when the height of children becomes smaller right? Because the parent has to follow reduction in height so it won't animate

[DerJacques]

Hmm, did you try running the above snippet? I believe it should work just fine even if the children shrink, since the ResizeObserver is registered on the children (which height depends on their content), and we adjust the height of the parent (not the div with the children).

Just make sure that the children's height is exclusively governed by their content. It will not work if they somehow reference parent height.

[jeremylanger]

For future reference, this solution is much simpler to implement - just a few lines of CSS:
https://www.youtube.com/watch?v=B_n4YONte5A

[ro0gr]

I believe the video you've posted has nothing to do with adjusting the parent to the content size that is discussed here.