Will people lose the nav?

They will if the only way back is a tiny hover target. Scroll up, a skip link, and a still bar at the top of the page are the three ways home.

Does it hide on mobile?

It can, and the saved strip is more precious there.

What about a progress bar in the header?

If the header hides, the progress cue has to live on something that stays.

Fast enough that a change of direction feels instant.

Hide header

A hide header slides the top bar away as someone scrolls down, then brings it back as soon as they scroll up, so the page gives reading room without losing the nav.

ScrollBuild difficulty: EasyScrollTrigger

Also called Auto-hide nav, Headroom header, Scroll-away header, Hide on scroll, Sliding header.

Here it is working.

Scroll the box down, then up. The bar follows that rule.

For designers

This is a behaviour on a real header, not a new component. The bar still has to hold the logo, the primary links and a way home. You are only deciding whether it occupies the top of the viewport while someone is moving down a long page. Use it on articles, docs and long product pages where the header is competing with the thing people came to read. On the way up, bring it back quickly.

Use this when

The page is long enough that a sticky bar eats a useful strip of the screen.
The header at rest already works, including on a small screen.
Scroll up is a reliable way to get the nav back.
Touch, keyboard and reduced motion can keep a still, reachable bar.

Reach for something else when

The header holds a control the reader needs while they work, like search in a catalogue. Leave it stuck.
You wanted a cue for how far through the page someone is. Use Progress.
The whole page should change as they move. Use Background colour or Parallax.
A section should hold the screen and tell a sequence. Use Step-by-step timeline.

How to build it

Start with a sticky header that already lays out. Watch scroll direction, not just position. Observer reports up and down across wheel, touch and pointer. Translate the header off the top on a down movement, and reverse it on up. Ignore tiny jitters. Leave the layout space or the page will jump when the bar leaves. Do not hide it at the very top, and do not hide it when focus is inside the header. On reduced motion, keep the header stuck.

Official GSAP

ScrollTrigger direction.

ScrollTrigger.create({
  start: 0, end: 'max',
  onUpdate(self) {
    gsap.to(header, { yPercent: self.direction === 1 ? -100 : 0 });
  },
});

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Will people lose the nav?: They will if the only way back is a tiny hover target. Scroll up, a skip link, and a still bar at the top of the page are the three ways home.
Does it hide on mobile?: It can, and the saved strip is more precious there.
What about a progress bar in the header?: If the header hides, the progress cue has to live on something that stays.
How fast?: Fast enough that a change of direction feels instant.
Should it hide on short pages?: No.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Parallax