Toggle — damped slide

Variant: Damped slide

A system switch: press, 220ms of travel on the drawer curve, no overshoot. The fill is a clay disc parked under the thumb's rest position and scaled up, so the colour spreads from the spot that was touched rather than a track whose width animates. It lands a beat before the thumb settles, which is the whole trick — the commit reads as the colour arriving, not the thumb stopping.

control

The source

A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Toggle — damped slide</title>
    <style>
      :root {
        --ivory: #faf9f5;
        --slate: #141413;
        --clay: #d97757;
        --oat: #e3dacc;
        --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
        --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: var(--ivory);
        font-family:
          system-ui,
          -apple-system,
          'Segoe UI',
          Roboto,
          sans-serif;
        color: var(--slate);
      }

      .switch {
        position: relative;
        width: 96px;
        height: 54px;
        border-radius: 27px;
        background: var(--oat);
        overflow: hidden;
      }

      /* The colour is a disc parked under the thumb's rest position and scaled
         up, not a track whose width animates. Its origin is the thumb, so the
         fill spreads from the spot that was touched — and it finishes a beat
         before the thumb lands, which puts the commit on the colour. */
      .fill {
        position: absolute;
        top: 27px;
        left: 27px;
        width: 140px;
        height: 140px;
        margin: -70px 0 0 -70px;
        border-radius: 50%;
        background: var(--clay);
        transform: scale(0.18);
        animation: fill-spread 4.2s infinite;
      }

      .thumb {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 42px;
        height: 42px;
        animation: thumb-travel 4.2s infinite;
      }

      /* Travel and press live on two elements so each is a single easing
         segment — stacking them in one keyframe list makes the slide stutter
         where the curves meet. */
      .cap {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: var(--ivory);
        box-shadow: 0 1px 3px rgba(20, 20, 19, 0.24);
        animation: thumb-press 4.2s infinite;
      }

      /* 220ms on the drawer curve: fast off the mark, long settle. Damping 1.0,
         no overshoot — a system switch is a statement of fact, not a flick. */
      @keyframes thumb-travel {
        0%,
        12.9% {
          transform: translateX(0);
          animation-timing-function: var(--ease-drawer);
        }
        18.1%,
        55.7% {
          transform: translateX(42px);
          animation-timing-function: var(--ease-drawer);
        }
        61%,
        100% {
          transform: translateX(0);
        }
      }

      @keyframes thumb-press {
        0%,
        9.5% {
          transform: scale(1);
          animation-timing-function: var(--ease-out);
        }
        12.9% {
          transform: scale(0.94);
          animation-timing-function: var(--ease-drawer);
        }
        15.5% {
          transform: scale(1.05, 0.98);
          animation-timing-function: var(--ease-out);
        }
        18.1%,
        52.4% {
          transform: scale(1);
          animation-timing-function: var(--ease-out);
        }
        55.7% {
          transform: scale(0.94);
          animation-timing-function: var(--ease-drawer);
        }
        58.3% {
          transform: scale(1.05, 0.98);
          animation-timing-function: var(--ease-out);
        }
        61%,
        100% {
          transform: scale(1);
        }
      }

      @keyframes fill-spread {
        0%,
        13.5% {
          transform: scale(0.18);
          animation-timing-function: var(--ease-drawer);
        }
        17.5%,
        55.7% {
          transform: scale(1);
          animation-timing-function: var(--ease-out);
        }
        61%,
        100% {
          transform: scale(0.18);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .thumb {
          animation: thumb-fade 4.2s ease infinite;
        }

        .cap {
          animation: none;
        }

        .fill {
          transform: scale(1);
          animation: fill-fade 4.2s ease infinite;
        }

        @keyframes thumb-fade {
          0%,
          9.5% {
            opacity: 1;
            transform: translateX(0);
          }
          13.5% {
            opacity: 0;
            transform: translateX(0);
          }
          13.6% {
            opacity: 0;
            transform: translateX(42px);
          }
          17.5%,
          52.4% {
            opacity: 1;
            transform: translateX(42px);
          }
          56.5% {
            opacity: 0;
            transform: translateX(42px);
          }
          56.6% {
            opacity: 0;
            transform: translateX(0);
          }
          61%,
          100% {
            opacity: 1;
            transform: translateX(0);
          }
        }

        @keyframes fill-fade {
          0%,
          13.5% {
            opacity: 0;
          }
          17.5%,
          55.7% {
            opacity: 1;
          }
          61%,
          100% {
            opacity: 0;
          }
        }
      }
    </style>
  </head>
  <body>
    <div class="switch" role="img" aria-label="Switch toggling on and off">
      <div class="fill"></div>
      <div class="thumb"><div class="cap"></div></div>
    </div>
  </body>
</html>

The variant family

Same idea, one axis moved. Compare them side by side before you commit.

Toggle — commit wipe

Wipe

Toggle — flip chip

Flip