Back to UI Elements
ui-009
Elastic Segmented Switch
£5 Standard License Unlimited projects
Segmented control whose lime indicator springs between options with elastic easing; for billing toggles and settings.
About This Component
Segmented control whose lime indicator springs between options with elastic easing; for billing toggles and settings. A single self-contained component: one HTML file, one stylesheet, one script, vanilla JavaScript and GSAP, no framework. Ships in three looks, vault, soft and paper, switched with one data-variant attribute; the script is identical in all three.
What's Included
- Indicator measures the active button, so labels can be any width
- elastic.out(1, 0.75) spring on every change
- Native <button> options, keyboard accessible
- Re-measures after web fonts load and on resize
- Add or remove options in HTML only
- Three shipped variants: vault, soft, paper
Perfect For
- Monthly / Annual / Lifetime billing toggles
- View switchers in dashboards
- Settings and filter groups
How It Works
Measured indicator
On click the active button is measured relative to the bar and the indicator tweens x and width to match with elastic easing. left is 0 in CSS so the measured x is the whole offset.
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates