Stretch Tabs
Tabs whose indicator stretches as it travels, then snaps tight.
A Pro component: the live demo and the code come with Pro.
Settings
Pro- variant
- stretch
- stiffness
- fit
- name
What it does
Stretch Tabs is a navigation animation ready for your AI assistant, React or plain JavaScript, with no dependencies. Also called segmented control, elastic tabs or stretchy tab indicator.
The indicator under your tabs leads with one edge and trails with the other, so it stretches on the way and closes up with a small bounce. Labels change colour exactly where it passes. Drag it to scrub, or use the arrow keys.
With Pro
The AI prompt, the React component, the plain JavaScript file and the embed come with Pro, along with the live demo. Every setting is optional: with none, you get the effect as the preview shows it.