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

[londonadagio]

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>

[Sebastian-Nielsen]

Why not use ref instead of resizeObserver? Is it significantly more performant or what?

I mean, something like this:

const AnimatedHeight = ({ isOpen, children }) => {
  const ref = useRef(null);
  const [height, setHeight] = useState(0);

  useLayoutEffect(() => {
    if (ref.current) {
      setHeight(ref.current.scrollHeight);
    }
  }, [isOpen, children]);

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className="overflow-hidden"
          initial={{ height: 0 }}
          animate={{ height }}
          exit={{ height: 0 }}
        >
          <div ref={ref}>
             ...

[Andres6936]

Why not use ref instead of resizeObserver? Is it significantly more performant or what?

I mean, something like this: (Code Brief)

This article summarizes it perfectly.

[cirex-web]

as noted in the comments section of the article you linked, doesn't this create a new observer every render? (I didn't test this myself)

<div ref={(ref) => {
                const resizeObserver = new ResizeObserver(([entry]) => {
                    const observedHeight = entry.contentRect.height
                    setHeight(observedHeight)
                })

                if (ref) {
                    resizeObserver.observe(ref)
                }

                return () => {
                    resizeObserver.disconnect()
                }
            }}>

[Joshua-hypt]

@cirex-web It's instructed to disconnect on unmount of the ref

[cirex-web]

yea I think I was trying to say that it unmounts and then remounts on every render

[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.

[Runanka]

If you want to animate the height of the parent div when children divs are added to it, then instead of animating the parent, animate the height of the children divs.

Codesandbox: https://codesandbox.io/p/devbox/expandable-div-animation-zckhwj

[arshamimcse]

thanks bro.

[DmytroBoiarchuk]

You are the best

[sunwrobert]

Here's another code example if anyone is interested and uses radix. You can supplement useDimensions with something like useMeasure from react-use-measure

"use client"
import { LazyMotion, domAnimation, m } from "framer-motion"
import { assign } from "radash"
import React, { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"
import { useCallbackRef, useDimensions } from "../../hooks"
import { Block } from "../Block"

export type AnimateHeightProps = {
  children: React.ReactNode
  className?: string
} & ComponentPropsWithoutRef<typeof m.div>

export const AnimateHeight = forwardRef<
  ElementRef<typeof m.div>,
  AnimateHeightProps
>(function AnimateHeight({ children, className, animate, ...rest }, ref) {
  const [childRef, setChildRef] = useCallbackRef<HTMLDivElement>()
  const { height: childHeight } = useDimensions(childRef)

  return (
    <LazyMotion features={domAnimation}>
      <m.div
        animate={
          childRef.current
            ? assign(
                { height: childHeight },
                typeof animate === "object" ? animate : {},
              )
            : undefined
        }
        className={className}
        initial={false}
        ref={ref}
        transition={{ type: "spring", bounce: 0, duration: 0.3 }}
        {...rest}
      >
        <Block asChild ref={setChildRef}>
          {children}
        </Block>
      </m.div>
    </LazyMotion>
  )
})

[tgdn]

@DerJacques' answer didn't work for me as the containerRef.current was always null during the initial mount which meant the first animation didn't work.

Here's an updated version that uses a callback ref instead:

const [height, setHeight] = React.useState<number | "auto">("auto");
const resizeObserverRef = React.useRef<ResizeObserver | null>(null);

const containerRef = React.useCallback((node: HTMLDivElement) => {
  if (node !== null) {
    resizeObserverRef.current = new ResizeObserver((entries) => {
      // We only have one entry, so we can use entries[0].
      const observedHeight = entries?.[0]?.contentRect?.height;
      setHeight(observedHeight ?? "auto");
    });
    resizeObserverRef.current.observe(node);
  } else if (resizeObserverRef.current) {
    // Disconnect the observer when the node is unmounted to prevent memory leaks
    resizeObserverRef.current.disconnect();
  }
}, []);

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