Is this a tablist or a nav?

If the items swap a panel on the same page, treat them as tabs. If they go to other pages, they are links. The pill does not change that.

A single row you can take in at a glance.

Does the pill need to change colour?

It can. Size and position are the bit people notice.

Arrow keys between peers, and a focus ring on the control, not on the pill.

What does reduced motion do?

Place the pill on the current item. No morph.

Morphing pill menu

A morphing pill menu keeps a short list of peers in view and moves a pill or highlight from the last item to the next.

MenusBuild difficulty: Mediumx + width

Also called Pill nav, Sliding indicator, Animated tab bar, Segmented control, Liquid nav.

Here it is working.

Click Bank, Notes, Play. The pill follows.

For designers

You use this when the items are equals: sections, filters, a few destinations. The pill is a cue for where you are. The real selected state still has to live on the control, in the label, and in the page. If the set needs wrapping, icons plus long names, or a featured column, the pill will look lost. A static underline on the active item already does a lot. Add motion when the jump from item to item would otherwise feel like a blink.

Use this when

There are a few peers in a single row, often 3 to 7.
People need to see the whole set and which one is current.
The items stay in one band, even if they are not identical widths.
Keyboard can move between items without chasing a graphic.

Reach for something else when

The set is large or grouped into columns. Use Mega menu.
The screen cannot hold the row. Use Fullscreen slide menu.
The bar itself should grow to reveal more. Use Expanding strip.
The items are content cards to compare. Use Hoverable list.

How to build it

The items are real links or tabs. The pill is a single extra element, decorative, sitting behind the current item. Put aria-current on the selected control, not on the pill. On change, record the pill layout with Flip, move it to the new item, then play Flip from the recorded state. A tween on x and width is enough when every item is the same size. Keep the hit targets still. The pill travels, the labels do not. Duration around 300 milliseconds. On reduced motion, put the pill in the new place with no travel.

Official GSAP

gsap.to x and width.

gsap.to(pill, { x: item.offsetLeft, width: item.offsetWidth, duration: 0.4, ease: 'power2.inOut' });

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

Common questions

Is this a tablist or a nav?: If the items swap a panel on the same page, treat them as tabs. If they go to other pages, they are links. The pill does not change that.
How many items?: A single row you can take in at a glance.
Does the pill need to change colour?: It can. Size and position are the bit people notice.
What about keyboard?: Arrow keys between peers, and a focus ring on the control, not on the pill.
What does reduced motion do?: Place the pill on the current item. No morph.

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: Magnetic button