Elastic Spring Toggle Switch — Bounce Animation Snippet

<div class="es-stage">
  <p class="es-hint">Click a switch — the thumb overshoots past its target and wobbles before settling, real spring physics</p>
  <label class="es-row">
    <span>Dark mode</span>
    <button class="es-toggle" id="esToggle1" role="switch" aria-checked="true" data-on="true">
      <span class="es-track"></span>
      <span class="es-thumb"></span>
    </button>
  </label>
  <label class="es-row">
    <span>Auto-updates</span>
    <button class="es-toggle" id="esToggle2" role="switch" aria-checked="false" data-on="false">
      <span class="es-track"></span>
      <span class="es-thumb"></span>
    </button>
  </label>
</div>

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

.es-stage { display: flex; flex-direction: column; gap: 22px; padding: 24px; }
.es-hint { font-size: 13px; color: #64748b; max-width: 360px; margin-bottom: 6px; }
.es-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 260px; color: #e2e8f0; font-size: 14px; font-weight: 600; }

.es-toggle {
  position: relative;
  width: 54px; height: 30px;
  border: none; padding: 0;
  background: none;
  cursor: pointer;
}
.es-track {
  position: absolute; inset: 0;
  border-radius: 999px;
  background: #263043;
  transition: background 0.25s;
}
.es-toggle[data-on="true"] .es-track { background: #6366f1; }

.es-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  will-change: transform;
}

// The thumb's horizontal position is driven by a hand-written spring rather
// than a CSS transition, so flipping the switch overshoots past the target
// side and wobbles briefly before settling — a real elastic snap instead of
// a flat ease. On/off state and the spring target are kept separate: state
// changes instantly (for correctness, a11y, and any bound data), while the
// spring animates the THUMB toward wherever the new state says it should be.
function attachElasticToggle(toggle) {
  var thumb = toggle.querySelector('.es-thumb');
  var TRAVEL = 24; // px the thumb moves from off (0) to on (TRAVEL)

  var pos = 0, vel = 0, target = 0;
  var stiffness = 0.32, damping = 0.58;
  var running = false;

  function isOn() { return toggle.dataset.on === 'true'; }

  function frame() {
    var force = (target - pos) * stiffness;
    vel = (vel + force) * damping;
    pos += vel;

    thumb.style.transform = 'translateX(' + pos.toFixed(2) + 'px)';

    var settled = Math.abs(vel) < 0.02 && Math.abs(target - pos) < 0.05;
    if (settled) {
      pos = target;
      thumb.style.transform = 'translateX(' + pos + 'px)';
      running = false;
      return;
    }
    requestAnimationFrame(frame);
  }

  function wake() { if (!running) { running = true; requestAnimationFrame(frame); } }

  // Initialize from the starting data-on state without animating.
  pos = target = isOn() ? TRAVEL : 0;
  thumb.style.transform = 'translateX(' + pos + 'px)';

  toggle.addEventListener('click', function () {
    var next = !isOn();
    toggle.dataset.on = String(next);
    toggle.setAttribute('aria-checked', String(next));
    target = next ? TRAVEL : 0;
    wake();
  });
}

document.querySelectorAll('.es-toggle').forEach(attachElasticToggle);