Animations.
Back to the library

Waypoint lock route

Variant: Spring overshoot

The same route confirmation driven by a spring-like curve that carries each marker a few percent past its resting scale before settling. Reach for it in a consumer-facing context where confirming a destination should feel satisfying rather than clinical. The overshoot is kept under 4% of scale and the markers never translate past their anchor, so nothing can clip the stage edge at phone widths.

confirmationmapstaggerrouteovershoot

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" />
<meta name="animation-knobs" content="overshoot: ok; speed: 0.7-1.3" />
<title>Waypoint lock route — overshoot</title>
<style>
:root {
  /* Neutrals — fixed, never remixed. */
  --ivory: #faf9f5;
  --paper: #ffffff;
  --oat: #e3dacc;
  --slate: #141413;

  /* Knobs — the remix API. A knob exists iff declared here and used below. */
  --hue: 38.8;
  --lift: 0;
  --chroma: 1;
  --round: 1;
  --speed: 1;

  /* Accents — derived from the knobs with the family's offsets baked in,
     so one hue roll moves them together. Defaults reproduce the original hex
     (#d97757 / #b85c3e / #788c5d / #b04a3f). */
  --clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
  --clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
  --olive: oklch(calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3));
  --rust: oklch(calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3));

  /* Clock — every duration in the document runs off --t. */
  --cycle: 4.4s;
  --t: calc(var(--cycle) / var(--speed));

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-accent: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* File-specific: per-marker stagger step, 60ms at speed 1. */
  --_step: calc(0.06s / var(--speed));
}

* { box-sizing: border-box; }

html, body { margin: 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);
}

.card {
  width: min(400px, 92vw);
  padding: clamp(16px, 4.5vw, 24px);
  background: var(--paper);
  border: 1px solid var(--oat);
  border-radius: calc(14px * var(--round));
  display: grid;
  gap: clamp(12px, 3vw, 16px);
}

.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.title {
  font-size: clamp(12.5px, 3.4vw, 14px);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.meta {
  font-size: clamp(11px, 3vw, 12px);
  color: var(--clay-d);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 20 / 9;
  background:
    repeating-linear-gradient(
      74deg,
      transparent 0 13px,
      color-mix(in oklch, var(--oat) 46%, transparent) 13px 14px
    ),
    var(--ivory);
  border: 1px solid var(--oat);
  border-radius: calc(10px * var(--round));
  overflow: hidden;
}

svg { display: block; width: 100%; height: 100%; }

.route {
  fill: none;
  stroke: var(--clay);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  /* Dashoffset cannot overshoot without exposing a gap, so the path keeps
     the non-springy curve while the markers carry the character. */
  animation: draw var(--t) var(--ease-out) infinite;
}

.ghost {
  fill: none;
  stroke: color-mix(in oklch, var(--oat) 80%, transparent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 7;
}

.mark {
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation: land var(--t) var(--ease-accent) infinite;
}

.mark.b { animation-delay: var(--_step); }
.mark.c { animation-delay: calc(var(--_step) * 2); }

.pip { fill: var(--clay-d); }
.pip.last { fill: var(--rust); }

.halo {
  fill: none;
  stroke: var(--rust);
  stroke-width: 1.5;
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation: halo var(--t) var(--ease-accent) infinite;
}

.legs {
  display: flex;
  gap: 6px;
  align-items: center;
}

.leg {
  height: 3px;
  flex: 1;
  border-radius: 999px;
  background: var(--oat);
  overflow: hidden;
  position: relative;
}

.leg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--olive);
  transform: scaleX(0);
  transform-origin: left center;
  animation: fill var(--t) var(--ease-accent) infinite;
}

.leg.b::after { animation-delay: var(--_step); }
.leg.c::after { animation-delay: calc(var(--_step) * 2); }

@keyframes land {
  0%, 6%   { opacity: 0; transform: translateY(-7%) scale(0.92); }
  20%      { opacity: 1; transform: translateY(0) scale(1); }
  86%      { opacity: 1; transform: translateY(0) scale(1); }
  96%, 100%{ opacity: 0; transform: translateY(0) scale(0.95); }
}

@keyframes draw {
  0%, 18%   { stroke-dashoffset: 190; }
  56%       { stroke-dashoffset: 0; }
  88%       { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: 190; }
}

/* Halo fires only once the path has arrived — the lock, not the travel. */
@keyframes halo {
  0%, 56%  { opacity: 0; transform: scale(0.6); }
  66%      { opacity: 0.9; transform: scale(1); }
  82%,100% { opacity: 0; transform: scale(1.5); }
}

@keyframes fill {
  0%, 14%  { transform: scaleX(0); }
  52%      { transform: scaleX(1); }
  88%      { transform: scaleX(1); }
  100%     { transform: scaleX(0); }
}

@media (max-width: 380px) {
  .card { padding: 14px; gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .mark, .halo, .route, .leg::after { animation: none; }
  .mark { opacity: 1; }
  .route { stroke-dashoffset: 0; }
  .leg::after { transform: scaleX(1); }
  .halo {
    opacity: 0.5;
    transform: scale(1.15);
    animation: breathe calc(var(--t) * 2) ease-in-out infinite;
  }
  @keyframes breathe {
    0%, 100% { opacity: 0.22; }
    50%      { opacity: 0.7; }
  }
}
</style>
</head>
<body>
  <div class="card">
    <div class="head">
      <span class="title">Route locked</span>
      <span class="meta">3 waypoints</span>
    </div>

    <div class="stage">
      <svg viewBox="0 0 200 90" role="img" aria-label="Three waypoints connecting into a locked route">
        <path class="ghost" d="M28 64 L92 30 L168 52" />
        <path class="route" d="M28 64 L92 30 L168 52" />

        <g class="mark a">
          <circle class="pip" cx="28" cy="64" r="4.5" />
        </g>
        <g class="mark b">
          <circle class="pip" cx="92" cy="30" r="4.5" />
        </g>
        <g class="mark c">
          <circle class="pip last" cx="168" cy="52" r="5" />
        </g>

        <circle class="halo" cx="168" cy="52" r="10" />
      </svg>
    </div>

    <div class="legs">
      <span class="leg a"></span>
      <span class="leg b"></span>
      <span class="leg c"></span>
    </div>
  </div>
</body>
</html>

The variant family

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

Waypoint lock route

Ease-out

Waypoint lock route

Linear

Waypoint lock route

Ease-in-out