Custom React Hook for animating the height of a HTML Element.

useAnimateHeight.js

import React from 'react';
import gsap from 'gsap';

function useAnimateHeight({ key, elementRef }) {
  const prevKey = usePrevious(key);
  const currentHeight = elementRef.current?.offsetHeight;

  React.useEffect(() => {
    if (!elementRef.current) {
      return;
    }

    if (key !== prevKey) {
      const newHeight = elementRef.current.scrollHeight;

      if (currentHeight === newHeight) {
        return;
      }

      gsap.fromTo(
        elementRef.current,
        { height: currentHeight },
        {
          height: newHeight,
          duration: 1,
          ease: "power2.inOut",
          clearProps: "height"
        }
      );
    }
  }, [elementRef, key, prevKey, currentHeight]);
}