Does this replace the live Tabs page?

No. Peers, counts, URL sync, keyboard, and tabs versus accordion all live there. This page is the travelling mark.

Should the panel morph too?

A short fade is fine. A shared-element morph between panels is usually more motion than the switch deserves.

How long should the mark take?

150 to 250 milliseconds. Past that, the panel has already changed and the pill is late.

What does reduced motion do?

Jump to the new mark and the new panel. No Flip, no fade.

No. People aim at labels. A mark that travels is a cue. Labels that swap places are a prank.

Morphing tabs

Morphing tabs keep the usual tab rules and add one piece of motion: the active mark travels from the old label to the new one, instead of blinking on.

Buttons and controlsBuild difficulty: MediumFlip / x

Also called Animated tabs, Sliding indicator, FLIP tabs, Pill tabs.

Here it is working.

Click a tab. The ink pill travels to it.

For designers

The live Tabs page owns the hard parts: peers versus a sequence, how many labels fit, URL sync, and the keyboard model. This page is the indicator. If the set should have been links or an accordion, a prettier mark will not save it. A short strip of 2 to 5 labels can take the slide. A strip that already wraps or scrolls does not need a travelling pill on top. Move the mark, not the labels. The panels can fade in 100 milliseconds or cut.

Use this when

The panels are peers, and the live Tabs rules already fit.
There are few enough labels to sit in one row.
The travelling mark makes where am I clearer than a colour change alone.
Reduced motion can cut straight to the new mark and panel.

Reach for something else when

The content is a sequence, or people need two sections open. Use the Accordion page or Morphing accordion.
The labels should have been links to real pages. Use links.
You only wanted a hard cut. That is still tabs. Skip this page.
The question is still the component. Start with the Tabs page.

How to build it

Build real tabs first: a tab list, one selected trigger, panels that hide rather than unmount if you need to keep state. Then add the mark as its own element, or measure the active trigger and animate a shared pill. GSAP Flip is the clean way to send the mark from one label to the next without guessing offsets. A 150 to 250 millisecond ease is enough. Update aria-selected at the start of the move, not after it finishes. On reduced motion, jump the mark and the panel.

Official GSAP

gsap.to x and width. Flip if you move the node.

gsap.to(pill, { x: tab.offsetLeft, width: tab.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

Does this replace the live Tabs page?: No. Peers, counts, URL sync, keyboard, and tabs versus accordion all live there. This page is the travelling mark.
Should the panel morph too?: A short fade is fine. A shared-element morph between panels is usually more motion than the switch deserves.
How long should the mark take?: 150 to 250 milliseconds. Past that, the panel has already changed and the pill is late.
What does reduced motion do?: Jump to the new mark and the new panel. No Flip, no fade.
Do the labels move?: No. People aim at labels. A mark that travels is a cue. Labels that swap places are a prank.

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 dialog