Design Atlas
한국어
↝ Motion

Lead and lag

리드 앤 래그

The principle that connected body parts never move in perfect unison — one part leads, the rest trail slightly behind, in a continuous phase offset. In a walk, the hips lead and the shoulders lag a beat behind.

Also known as: Drag and lagBody mechanics lag
···
html
<div class="chain" id="chain"></div>
css
.chain{position:relative;width:min(82%,440px);height:60%;display:flex;align-items:center;justify-content:space-between}
.dot{width:12%;aspect-ratio:1;border-radius:50%;animation:bob 1.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-45%)}50%{transform:translateY(45%)}}
js
const chain = document.getElementById('chain');
const N = 6;
for (let i = 0; i < N; i++) {
  const d = document.createElement('i');
  d.className = 'dot';
  d.style.animationDelay = (-i * 0.09) + 's';
  d.style.background = i % 2 === 0 ? 'var(--accent)' : 'var(--accent-2)';
  chain.appendChild(d);
}

Move every part of a body in perfect sync and it reads as robotic. Real bodies are jointed, so when one part starts moving first (leading), the rest catch up a fraction of a second later (lagging) — in a walk, the hips rotate and the shoulders follow a beat behind; a tail or a ponytail is always a half-step behind the torso that's swinging it.

It's easy to confuse with follow-through and overlapping action, but they're different. Follow-through is about what happens after the main body stops — a story about the moment motion ends. Lead and lag is about the phase offset that persists the whole time motion is happening — a story about ongoing flow.

In CSS it's built with the exact same tool as stagger: negative animation-delay. Give a chain of connected elements slightly different delays and they read as one continuous, flowing gesture instead of a rigid unit.

The six dots below all run the same up-and-down motion, but each is offset by a small delay — together they read as a wave rippling through, like a caterpillar or a snake.

When to use

Use it when a chain of connected elements — drag handles, a group of related toggles — should read as one continuous gesture. The tool is the same as stagger, but the intent is different: not "a list appearing in order" but "a body flowing."