Auto-hiding sticky navigation with Framer Motion

1
import { motion, useScroll, useMotionValueEvent } from "motion/react";
2
import { useRef, useState } from "react";
3

4
function App() {
5
  return (
6
    <div className="min-h-[300vh] bg-gradient-to-b from-[rgba(255,255,255,.1)] to-[rgba(255,255,255,0)]">
7
      <Nav />
8
    </div>
9
  );
10
}
11

12
const Nav = () => {
13
  const [isHidden, setIsHidden] = useState(false);
14
  const { scrollY } = useScroll();
15
  const lastYRef = useRef(0);
16

17
  useMotionValueEvent(scrollY, "change", (y) => {
18
    const difference = y - lastYRef.current;
19
    if (Math.abs(difference) > 50) {
20
      setIsHidden(difference > 0);
21

22
      lastYRef.current = y;
23
    }
24
  });
25

26
  return (
27
    <motion.div
28
      animate={isHidden ? "hidden" : "visible"}
29
      whileHover="visible"
30
      onFocusCapture={() => setIsHidden(false)}
31
      variants={{
32
        hidden: {
33
          y: "-90%",
34
        },
35
        visible: {
36
          y: "0%",
37
        },
38
      }}
39
      transition={{ duration: 0.2 }}
40
      className="fixed top-0 z-10 flex w-full justify-center pt-3"
41
    >
42
      <nav className="flex justify-between gap-3 rounded-3xl bg-white p-5 *:rounded-xl *:border *:border-gray-200 *:px-7 *:py-2 *:transition-colors *:duration-300 hover:*:bg-gray-200 focus-visible:*:bg-gray-200">
43
        <a href="#" className="bg-gray-200">
44
          <svg
45
            className="h-6 w-6"
46
            fill="currentColor"
47
            viewBox="0 0 24 24"
48
            xmlns="http://www.w3.org/2000/svg"
49
          >
50
            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5-10-5-10 5z"></path>
51
          </svg>
52
          <span className="sr-only">Home</span>
53
        </a>
54
        <a href="#">Products</a>
55
        <a href="#">Services</a>
56
        <a href="#">About</a>
57
        <a href="#">Contact</a>
58
      </nav>
59
    </motion.div>
60
  );
61
};
62

63
export default App;