Transitions.dev pattern
Sliding pill tabs
GenerateBlocks Pro tabs with a measured pill indicator. CSS lives in global styles; JavaScript only measures the active tab and writes CSS variables.
Plan the motion surface
Map the tab labels, decide the default panel, and let the pill snap into place before the first visible transition.
Default tab is stored with tabItemOpen:true.
The menu owns the pill variables and pseudo-element.
Resize and font loading resync without animation.
Debug active state changes
The tabs runtime changes the active item. The helper script watches clicks, class changes, and aria changes, then moves the pill to the measured tab.
The saved HTML does not hardcode runtime state classes.
The pill follows .gb-block-is-current when Pro updates it.
Reduced motion disables both color and pill transitions.
Ask for richer panels
Use this as a compact switcher for feature notes, pricing modes, dashboard views, or assistant states without leaving the GenerateBlocks tabs model.
Panel content is normal GenerateBlocks block markup.
Global classes stay reusable and BEM named.
Only the measurement script is external.