Transform header height on scroll with Framer Motion

Quick example of how to use the useScroll and useTransform hooks from Framer Motion to transform the height of a header element on scroll.

import { motion, useScroll, useTransform } from "framer-motion";
 
export default function Header() {
  const { scrollY } = useScroll();
  /**
   * Change the height from 100px to 60px as the
   * user scrolls from 0px to 100px.
   */
  const height = useTransform(
    scrollY,
    // Distance scrolled
    [0, 100],
    // Height change
    [100, 60]
  );
 
  return (
    <motion.header
      style={{
        height,
      }}
    >
      ...
    </motion.header>
  );
}

import { motion, useScroll, useTransform } from "framer-motion";
 
export default function Header() {
  const { scrollY } = useScroll();
  /**
   * Change the height from 100px to 60px as the
   * user scrolls from 0px to 100px.
   */
  const height = useTransform(
    scrollY,
    // Distance scrolled
    [0, 100],
    // Height change
    [100, 60]
  );
 
  return (
    <motion.header
      style={{
        height,
      }}
    >
      ...
    </motion.header>
  );
}

View Codesandbox