Design Atlas
한국어
▶ Motion graphics

Overlap

오버랩

The principle that different parts of a body never move in perfect unison — each trails the last with its own slight delay, even while the whole thing keeps moving.

Also known as: Overlapping action
···
html
<div class="stage">
  <svg class="chain" viewBox="0 0 220 100"><path id="tail" d=""/></svg>
</div>
css
.stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.chain{width:min(86%,320px);aspect-ratio:220/100}
#tail{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
js
const N = 7;
const segs = Array.from({ length: N }, (_, i) => ({ x: 30 + i * 24, y: 50, phase: i * 0.42 }));
const tail = document.getElementById('tail');
const start = performance.now();
function loop(now) {
  const t = (now - start) / 1000;
  for (const s of segs) {
    s.y = 50 + Math.sin(t * 2.2 - s.phase) * 26;
  }
  let d = 'M' + segs[0].x + ',' + segs[0].y;
  for (let i = 1; i < segs.length; i++) d += ' L' + segs[i].x + ',' + segs[i].y;
  tail.setAttribute('d', d);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Follow-through focuses on what keeps moving after the main body stops. Overlap focuses on the fact that, even while the body never stops moving, its parts are never perfectly in sync with each other — the two travel together as a pair but emphasize different moments.

A walking character's hair, a swimming fish's tail, a scarf trailing in the wind are all textbook examples. When the leader (the torso) turns, whatever trails behind it turns the same way a beat later — the same logic as a chain of segments, each picking up the delay in sequence.

Animators typically finish the leader's motion first, then place each trailing part's keyframes a few frames behind it. The delay shouldn't be a uniform interval across every part — subtle variation from part to part is what keeps it reading as organic instead of mechanical.

When to use

Don't apply the same delay to every segment — increasing it slightly the further a part sits from the body is what reads as natural.