Transitions Between States · A turns into B
Sliding tab indicator标签指示器滑动
- a soft pad
- sliding over
- stretching on the way
The selected pill slides from one tab to the next, stretching slightly on the way and settling back on arrival. That stretch is the whole trick: a constant-speed move just changes position, while a stretch says the same object was dragged across.
When to use it
Use it on segmented controls with 2–5 items. Skip it when there are many: waiting for the pill to cross five tabs is slower than a plain fade. And move it with transform, never by animating left — that relayouts every frame and stutters.
Parameters
transform: translateX 0→128px · scaleX 1→1.18→1 · 320ms cubic-bezier(0.22, 1, 0.36, 1)
Recipe
Sliding tab indicator → transform: translateX 0→128px · scaleX 1→1.18→1 · 320ms cubic-bezier(0.22, 1, 0.36, 1)
One sentence for your AI
Build a sliding tab indicator: move the pill with transform: translateX to the target tab, adding a scaleX 1 → 1.18 → 1 stretch along the way, over 320ms with cubic-bezier(0.22, 1, 0.36, 1). Never move it with left or margin-left — that relayouts on every frame.