Is this only for mobile?

It fits when the header runs out of room.

Should the page still scroll?

No. Lock it while the overlay is open, then restore the same scroll position.

Into the overlay on open, back to the trigger on close.

What does reduced motion do?

Show the overlay in place. No slide, no delayed labels.

Fullscreen slide menu

A fullscreen slide menu covers the viewport with the nav, then gets out of the way so the page can be used again.

MenusBuild difficulty: EasyyPercent

Also called Overlay menu, Fullscreen nav, Hamburger panel, Slide-in menu, Drawer menu.

Here it is working.

ComponentsMotionArchiveAbout

Open Menu. The sheet covers the card. Close puts it back.

For designers

This is the pattern for when the header cannot hold the links, or the screen is too narrow for a mega panel. Open, pick, close. If people still need to see the page underneath while they choose, you wanted a smaller panel. A slide from the right is a habit. Direction is secondary. What matters is that the page behind does not keep scrolling, that the close control is obvious, and that the links are readable on the first frame. A long stagger on the labels delays the only job the overlay has.

Use this when

The header cannot hold the links, especially on a small screen.
Choosing a destination is the whole task for a moment.
You can lock page scroll while it is open and restore it on close.
Keyboard and a visible close control can dismiss it.

Reach for something else when

The screen is wide and the links group into columns. Use Mega menu.
You have a short set of peers and want an indicator. Use Morphing pill menu.
You wanted a bar that grows without covering the page. Use Expanding strip.
The thing is a set of content cards, not destinations. Use Hoverable list.

How to build it

Put the menu in the document as a landmark, hidden until open. Animate x or y percent of the overlay, 200 to 400 milliseconds, and fade the page behind a little if you need a cue. Keep the close control in the same place every time. Stagger the links by 20 to 40 milliseconds at most. Lock body scroll while it is open. Trap focus inside. Escape and the close control both dismiss it, and focus returns to the button that opened it. On reduced motion, show and hide with no slide.

Official GSAP

gsap.to yPercent.

gsap.to('.menu', { yPercent: open ? 0 : -100, duration: 0.45, ease: 'power3.out' });

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

Common questions

Is this only for mobile?: It fits when the header runs out of room.
Should the page still scroll?: No. Lock it while the overlay is open, then restore the same scroll position.
Do the links need a stagger?: Only a short one, if any.
Where does focus go?: Into the overlay on open, back to the trigger on close.
What does reduced motion do?: Show the overlay in place. No slide, no delayed labels.

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: Morphing pill menu