Follow-through

팔로우 스루

The principle that trailing parts — hair, a coat, a tail — keep moving from inertia after the main body stops, catching up a beat later. It pairs with "overlapping action."

Also known as: Overlapping actionDrag (animation)

···

html

<div class="rope" id="rope">
  <i class="seg head"></i>
  <i class="seg t1"></i>
  <i class="seg t2"></i>
  <i class="seg t3"></i>
</div>

css

.rope{position:relative;width:min(80%,420px);height:40px}
.seg{position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;left:6px;
  transition:left .55s cubic-bezier(.3,.6,.3,1)}
.head{background:var(--accent);width:24px;height:24px;margin-top:-12px;z-index:4}
.t1{background:var(--accent);opacity:.75;transition-delay:.08s;z-index:3}
.t2{background:var(--accent);opacity:.5;transition-delay:.16s;z-index:2}
.t3{background:var(--accent);opacity:.3;transition-delay:.24s;z-index:1}
.rope.end .seg{left:calc(100% - 26px)}

const rope = document.getElementById('rope');
setInterval(() => rope.classList.toggle('end'), 1400);

If every part stops at the same instant, motion reads as stiff and artificial. When the main body stops first and trailing parts lag behind, wobbling from inertia before settling, the motion gains weight.

In UI this shows up as a tooltip or icon trailing a beat behind the element it's attached to when a drag ends, or a dropdown's arrow settling slightly after the menu body. It's usually just a small transition-delay on the trailing element.

When to use

Use it wherever motion has a clear stop — drag release, swipe, character movement. Keep the trailing delay short, roughly tens of ms up to about 150ms.