Auto-hiding Sticky Navigation With Motion for React

Want to learn more Motion for React?
Check out our PRO course!

Try it yourself in our playground

Follow along with the tutorial, or just play around with the code. PRO members can fork this code and save it to their account.

Jeroen Reumkens PRO

Making a Disappearing Sticky Navigation

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

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

10
      <div className="overflow-clip opacity-30">
11
        <p className="text-[30vw] break-all text-white">
12
          Beautiful sticky navigation that plays peek-a-boo 👻 on scroll
13
        </p>
14
      </div>
15
    </div>
16
  );
17
};
18

19
const Nav = () => {
20
  const [hidden, setHidden] = useState(false);
21
  const { scrollY } = useScroll();
22
  const lastYRef = useRef(0);
23

24
  useMotionValueEvent(scrollY, "change", (y) => {
25
    const difference = y - lastYRef.current;
26
    if (Math.abs(difference) > 180) {
27
      setHidden(difference > 0);
28
      lastYRef.current = y;
29
    }
30
  });
31

32
  return (
33
    <motion.div
34
      animate={hidden ? "hidden" : "visible"}
35
      initial="visible"
36
      whileHover={hidden ? "peeking" : "visible"}
37
      onFocusCapture={hidden ? () => setHidden(false) : undefined}
38
      variants={
39
        {
40
          visible: { y: "0%" },
41
          hidden: { y: "-90%" },
42
          peeking: { y: "0%", cursor: "pointer" },
43
        } as Variants
44
      }
45
      transition={{ duration: 0.2 }}
46
      className="fixed top-0 z-10 flex w-full justify-center pt-3"
47
    >
48
      <nav className="flex justify-between gap-3 rounded-3xl bg-white p-5 text-black *:rounded-xl *:border *:border-gray-200 *:px-7 *:py-2 *:transition-colors *:duration-300 hover:*:bg-gray-200 focus-visible:*:bg-gray-200">
49
        <a href="#" className="bg-gray-200">
50
          <svg
51
            className="h-8 w-8"
52
            fill="currentColor"
53
            viewBox="0 0 24 24"
54
            xmlns="http://www.w3.org/2000/svg"
55
          >
56
            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5-10-5-10 5z"></path>
57
          </svg>
58
          <span className="sr-only">Home</span>
59
        </a>
60
        <a href="#">Products</a>
61
        <a className="sm:hidden" href="#">
62
          ...
63
        </a>
64
        <a className="max-sm:hidden" href="#">
65
          Services
66
        </a>
67
        <a className="max-sm:hidden" href="#">
68
          About
69
        </a>
70
        <a className="max-sm:hidden" href="#">
71
          Contact
72
        </a>
73
      </nav>
74
    </motion.div>
75
  );
76
};

1
/**
2
When copying this style to your own project,
3
be sure to add the below import line to activate tailwind v4
4
@ import "tailwindcss";
5
**/

Using CSS position: sticky makes sticky headers super easy. One thing that isn’t as easy is making a sticky header that hides when the user scrolls down and shows when the user scrolls up. This is a common pattern that is actually a little bit harder to achieve.

In this video, we’ll use Framer Motion to create an auto-hiding sticky navigation. We’ll use the useMotionValueEvent hook to listen to the scroll position and update the visibility of the navigation based on the scroll direction.

Auto-hiding Sticky Navigation With Motion for React

Try it yourself in our playground

The Only And Easy Way To Push That Footer Down With CSS