팔로우 스루

Follow-through

몸통이 멈춘 뒤에도 머리카락·옷자락·꼬리 같은 부속물은 관성으로 계속 움직이다 뒤늦게 따라붙는 원칙. "오버래핑 액션"과 짝을 이룹니다.

다른 이름: 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);

모든 부분이 동시에 멈추면 딱딱하고 인공적으로 느껴집니다. 몸통이 먼저 멈추고 부속물이 살짝 지연되며 관성으로 흔들리다 멈추면 무게감이 느껴집니다.

UI에서는 드래그를 놓았을 때 아이콘이나 툴팁이 본체보다 한 박자 늦게 따라오는 것, 드롭다운의 화살표가 메뉴 본체보다 살짝 늦게 자리 잡는 것으로 씁니다. 부속 요소에 transition-delay를 살짝 주면 됩니다.

언제 쓰나

드래그 종료, 스와이프, 캐릭터 동작처럼 "멈춤"이 있는 동작에 씁니다. 부속 요소의 지연은 수십~150ms 정도로 짧게.