Swipe Tab Switcher — Free HTML CSS JS Snippet

Instagram profile tabs and Twitter's timeline both let you either tap a tab label or swipe the content area itself to move between sections, and both keep the underline indicator perfectly synced no matter which method you use. That sync is the actual hard part. Most naive implementations end up with two separate systems — one that moves panels when you click a tab, another that moves panels when you drag — that each independently try to own "where are we now," and inevitably drift apart the moment a user starts one interaction and finishes with the other. This snippet is built around a deliberately different architecture: one shared piece of state, read and written by both the click handler and the drag handler, so there is structurally nothing for them to disagree about.

The two numbers that describe the entire UI: currentIndex and dragOffsetPx

The whole component's position is fully described by exactly two variables. currentIndex is which panel is currently "settled" — the panel that renders when no drag is in progress. dragOffsetPx is how far the track is currently displaced, in pixels, away from currentIndex's resting position because of an active drag; it is always 0 when nothing is being dragged. Every rendering function — applyTransform() for the panel track, moveIndicator() for the underline — computes its output purely from these two numbers. A tab click doesn't "do something different" from a drag release; it just calls the exact same goToIndex() function that a completed drag calls, which sets currentIndex and resets dragOffsetPx to 0. There is only one code path that ever changes which panel is showing.

The indicator: measuring real layout instead of assuming equal-width tabs

moveIndicator() does not divide the tab bar into four equal fractions and assume each tab is the same width — it reads activeTab.offsetLeft and activeTab.offsetWidth directly from the DOM and animates the indicator's transform: translateX() and width to match exactly. This means the underline works correctly even with tab labels of very different lengths ("Posts" vs. "Notifications"), because it is driven by the real rendered geometry of the button it needs to sit under, not a guessed percentage. The CSS transition on transform and width (rather than animating left, which would trigger layout on every frame) keeps the slide on the compositor thread for smooth 60fps motion.

Live-interpolating the indicator during an active drag

The interesting part is what happens to the indicator *while* the user is mid-drag, before they have released. onPointerMove() computes a dragRatio between -1 and 1 representing how far through the transition to the neighboring panel the drag currently is, identifies which neighbor tab is being dragged toward, and then linearly interpolates both the indicator's width and left position between the current tab's geometry and that neighbor's geometry using that ratio. The underline doesn't just jump to the next tab when the swipe completes — it visibly stretches and slides in real time as you drag, exactly tracking your finger, which is what makes the swipe feel connected to the indicator rather than the indicator looking like an afterthought that catches up later.

Committing or reverting: the drag threshold

On pointerup, onPointerUp() compares the final dragOffsetPx against viewportWidth * DRAG_THRESHOLD_RATIO (28% of the viewport width). Cross that threshold in either direction and goToIndex() commits to the neighboring panel; fail to cross it and the exact same goToIndex(currentIndex, true) call runs instead, snapping back to wherever the drag started. Because both outcomes funnel through the same function, "commit" and "revert" are not two different animations bolted on separately — they are the same state update landing on two different target indices, one of which happens to be the panel you started on.

Resisting overscroll at the first and last tab

When the user drags past the leftmost or rightmost panel, onPointerMove() multiplies the raw drag delta by 0.35 instead of applying it 1:1, producing a soft rubber-band resistance rather than either a hard stop or unbounded free scrolling into empty space. This is a small but important UX signal: it tells the user "you have reached the edge" through feel, the same way iOS scroll views resist and bounce back at their content boundaries, without needing any extra visual cue.