Swipe Tab Switcher — Free HTML CSS JS Snippet

<div class="sts-wrap">
  <div class="sts-tabbar" id="sts-tabbar">
    <button class="sts-tab active" data-index="0">Posts</button>
    <button class="sts-tab" data-index="1">Replies</button>
    <button class="sts-tab" data-index="2">Media</button>
    <button class="sts-tab" data-index="3">Likes</button>
    <div class="sts-indicator" id="sts-indicator"></div>
  </div>

  <div class="sts-viewport" id="sts-viewport">
    <div class="sts-track" id="sts-track">
      <div class="sts-panel">
        <h3>Posts</h3>
        <p>Swipe left to see Replies, or click any tab above. The underline slides and resizes to match whichever tab is active.</p>
      </div>
      <div class="sts-panel">
        <h3>Replies</h3>
        <p>Both click navigation and drag navigation share one piece of state, so they never fight each other or fall out of sync.</p>
      </div>
      <div class="sts-panel">
        <h3>Media</h3>
        <p>Drag the content area itself horizontally — panels slide in real time with your finger or cursor, not just after you release.</p>
      </div>
      <div class="sts-panel">
        <h3>Likes</h3>
        <p>Release before crossing the threshold and the panel springs back to where it started instead of committing to a switch.</p>
      </div>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

.sts-wrap { width: 100%; max-width: 380px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

.sts-tabbar { position: relative; display: flex; border-bottom: 1px solid #eef1f8; }
.sts-tab { flex: 1; background: transparent; border: none; padding: 14px 8px; font-size: 13px; font-weight: 600; color: #94a3b8; cursor: pointer; transition: color 0.2s; position: relative; z-index: 2; }
.sts-tab.active { color: #4f46e5; }
.sts-tab:hover:not(.active) { color: #64748b; }

.sts-indicator { position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, #818cf8, #6366f1); border-radius: 3px 3px 0 0; transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), width 0.28s cubic-bezier(0.4,0,0.2,1); will-change: transform, width; }
.sts-indicator.dragging { transition: none; }

.sts-viewport { overflow: hidden; touch-action: pan-y; }
.sts-track { display: flex; will-change: transform; }
.sts-track.animating { transition: transform 0.32s cubic-bezier(0.22,0.61,0.36,1); }

.sts-panel { flex: 0 0 100%; padding: 26px 22px 32px; min-height: 180px; }
.sts-panel h3 { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.sts-panel p { font-size: 13.5px; color: #64748b; line-height: 1.65; }

const tabbar = document.getElementById('sts-tabbar');
const indicator = document.getElementById('sts-indicator');
const viewport = document.getElementById('sts-viewport');
const track = document.getElementById('sts-track');
const tabs = Array.from(tabbar.querySelectorAll('.sts-tab'));
const PANEL_COUNT = tabs.length;

// ---- Single shared piece of state ----
// currentIndex: which panel is "settled" (0-based)
// dragOffsetPx: how far the track is currently displaced from currentIndex's
// resting position because of an in-progress drag (0 when not dragging)
// Both the tab click handler and the pointer drag handler only ever read and
// write these two values - there is no second, parallel navigation system to
// fall out of sync with.
let currentIndex = 0;
let dragOffsetPx = 0;

let dragging = false;
let pointerId = null;
let startX = 0;
let viewportWidth = 0;
const DRAG_THRESHOLD_RATIO = 0.28; // fraction of viewport width needed to commit a swipe

function applyTransform(animate) {
  track.classList.toggle('animating', animate);
  const baseX = -currentIndex * viewportWidth;
  track.style.transform = 'translateX(' + (baseX + dragOffsetPx) + 'px)';
}

function moveIndicator(animate) {
  const activeTab = tabs[currentIndex];
  indicator.classList.toggle('dragging', !animate);
  // Measure the active tab button directly rather than assuming equal widths,
  // so the indicator works even if tab labels have different lengths.
  indicator.style.width = activeTab.offsetWidth + 'px';
  indicator.style.transform = 'translateX(' + activeTab.offsetLeft + 'px)';
}

function setActiveTabClass() {
  tabs.forEach((t, i) => t.classList.toggle('active', i === currentIndex));
}

function goToIndex(index, animate) {
  currentIndex = Math.max(0, Math.min(PANEL_COUNT - 1, index));
  dragOffsetPx = 0;
  setActiveTabClass();
  applyTransform(animate !== false);
  moveIndicator(animate !== false);
}

function measure() {
  viewportWidth = viewport.getBoundingClientRect().width;
}

// ---- Click navigation ----
tabs.forEach((tab, i) => {
  tab.addEventListener('click', () => goToIndex(i, true));
});

// ---- Drag / swipe navigation, driven by the same currentIndex + dragOffsetPx state ----
function onPointerDown(e) {
  dragging = true;
  pointerId = e.pointerId;
  viewport.setPointerCapture(pointerId);
  measure();
  startX = e.clientX;
  track.classList.remove('animating');
  indicator.classList.add('dragging');
}

function onPointerMove(e) {
  if (!dragging || e.pointerId !== pointerId) return;
  const dx = e.clientX - startX;

  // Resist dragging past the first or last panel instead of allowing it to
  // slide off freely, so the ends of the tab set feel bounded.
  const atStart = currentIndex === 0 && dx > 0;
  const atEnd = currentIndex === PANEL_COUNT - 1 && dx < 0;
  dragOffsetPx = (atStart || atEnd) ? dx * 0.35 : dx;

  applyTransform(false);

  // Interpolate the indicator live between the current tab and the tab in
  // the direction being dragged, in sync with how far the track has moved.
  const dragRatio = Math.max(-1, Math.min(1, dragOffsetPx / viewportWidth));
  const neighborIndex = dragRatio < 0
    ? Math.min(PANEL_COUNT - 1, currentIndex + 1)
    : Math.max(0, currentIndex - 1);
  const from = tabs[currentIndex];
  const to = tabs[neighborIndex];
  const t = Math.abs(dragRatio);
  const width = from.offsetWidth + (to.offsetWidth - from.offsetWidth) * t;
  const left = from.offsetLeft + (to.offsetLeft - from.offsetLeft) * t;
  indicator.style.width = width + 'px';
  indicator.style.transform = 'translateX(' + left + 'px)';
}

function onPointerUp(e) {
  if (!dragging || e.pointerId !== pointerId) return;
  dragging = false;
  viewport.releasePointerCapture(pointerId);

  const threshold = viewportWidth * DRAG_THRESHOLD_RATIO;
  if (dragOffsetPx <= -threshold && currentIndex < PANEL_COUNT - 1) {
    goToIndex(currentIndex + 1, true);
  } else if (dragOffsetPx >= threshold && currentIndex > 0) {
    goToIndex(currentIndex - 1, true);
  } else {
    // Threshold not crossed - snap back to the current panel/tab exactly.
    goToIndex(currentIndex, true);
  }
}

viewport.addEventListener('pointerdown', onPointerDown);
viewport.addEventListener('pointermove', onPointerMove);
viewport.addEventListener('pointerup', onPointerUp);
viewport.addEventListener('pointercancel', onPointerUp);

window.addEventListener('resize', () => {
  measure();
  applyTransform(false);
  moveIndicator(false);
});

measure();
goToIndex(0, false);