It can hold links. If the extra is a full nav with groups, switch to [Mega menu](/motion/mega-menu/) or [Fullscreen slide menu](/motion/fullscreen-slide-menu/).

Yes, if you did not reserve space.

Click or tap to open. Hover that grows a bar is easy to trigger by accident, and thumbs never get it.

What does reduced motion do?

Show the expanded or collapsed layout with no grow.

Expanding strip

An expanding strip is a bar that grows along one axis to reveal extra items or a small panel, without covering the whole page.

Lists and cardsBuild difficulty: MediumflexGrow

Also called Expanding bar, Reveal strip, Grow nav, Inline expander, Stretch panel.

Here it is working.

TextScrollMenus

Hover a panel. It takes more of the row.

For designers

You reach for this when a second row of links, a filter set, or a short extra would help, and a dropdown would be more than the job needs. The page behind stays visible. The strip gets taller or wider, then returns. If the extra is a whole nav with groups, you wanted Mega menu or Fullscreen slide menu. If the extra is the reverse of a card, you wanted 3D card flip. Growth should finish fast enough that layout shift does not shove the next heading around while someone is reading it.

Use this when

A short extra belongs in the same bar: more links, filters, a caption.
The page behind should stay usable.
You can reserve space, or the shift is small enough to live with.
Open and close are obvious, including on a keyboard.

Reach for something else when

The extra is a large grouped nav. Use Mega menu.
The extra should cover the page. Use Fullscreen slide menu.
You only needed an indicator on a fixed row. Use Morphing pill menu.
The extra is the other face of a card. Use 3D card flip.
People are choosing among many items in a row. Use Draggable slider.

How to build it

Lay the collapsed and expanded states out in real document flow if you can. Record the strip with Flip, apply the expanded classes, then play Flip from the recorded state so height, width and neighbours animate together. If only the strip changes size, a tween on height or width is enough. Animate to an exact pixel value you measure. Keep new links focusable only while they are visible. Duration 200 to 400 milliseconds. On reduced motion, switch to the expanded layout with no grow. Do not leave new links in the tab order while the strip is shut.

Official GSAP

gsap.to flexGrow.

gsap.to(items, { flexGrow: (i, el) => (el === hovered ? 2.2 : 0.7), duration: 0.35, ease: 'power2.out' });

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

Common questions

Is this a menu?: It can hold links. If the extra is a full nav with groups, switch to Mega menu or Fullscreen slide menu.
Will the page jump?: Yes, if you did not reserve space.
Hover or click?: Click or tap to open. Hover that grows a bar is easy to trigger by accident, and thumbs never get it.
What does reduced motion do?: Show the expanded or collapsed layout with no grow.
Can it hold a slider?: It can reveal one.

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: Card fan