A bonus technical detail: this all works seamlessly with any number of tabs AND if you dynamically add or remove tabs. This almost never happens but it helps me sleep at night knowing that the system is resilient and it’s good signal we have the right state abstractions in place

When you over scroll the content area the active indicator will “squish” against the edge in the direction you are over scrolling.

This uses the same scaleX/translateX approach that the stretch effect uses.

The active tab indicator syncs up with the tab content horizontal scroll position of the tab content area. The scroll area has snapping enabled and once you scroll past the snap threshold the active tab text color will apply to the tab that would be active if you stopped the scroll gesture.

When you press down on a tab that isn’t selected, the active tab indicator will “stretch” towards that option.

This is done with a scaleX transform that increases the indicator with, paired with a translateX transform that makes sure the scale transform doesn’t affect the position of the indicator

if you need a distraction, here’s a gorilla body slamming its siblings at the Atlanta Zoo today