Tab Bar Flip Indicator
A product tab bar whose single indicator slides and resizes to the active label with GSAP Flip — optionally stretching across both tabs first — while the content panels crossfade. Fully keyboard operable with a roving tabindex and arrow keys.
- Navigation
- gsap
- flip
- intermediate
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1259 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
light Command Palette Spring
⌘K (or the search button) fades in a blurred backdrop and springs a command panel from scale .96 / y 12 with back.out; typing filters 12 commands with a Flip re-flow and staggered re-entry, a highlight pill glides between rows via Flip, Enter pulses and runs.
- gsap
- flip
Featured light Sticky Logo Shrink Nav
A masthead-sized serif wordmark hanging below a sticky bar shrinks and docks into the bar's logo slot over the first 240px of scroll (Flip.fit, scrubbed) while a frosted background fades in, a hairline draws across and the nav links tighten up.
- gsap
- scrolltrigger
- flip
light Lightbox Shared Zoom
Clicking a thumbnail reparents its image into a centred stage and GSAP Flip morphs it there in 0.9s expo.inOut (scale + border-radius) while the backdrop fades and the caption rises; arrows crossfade through the series, Escape morphs it home.
- gsap
- flip
- canvas2d
light Mega Menu Reveal
Hover or focus "Products" and a full-width panel unfolds from under the bar with a clip-path curtain; three columns of links rise in with a tight stagger and a featured card slides in from the right. Keyboard-complete, and an accordion on phones.
- gsap