Design Atlas
한국어
▶ Motion graphics

Tweening

트위닝

Filling the gap between an animator's key drawings with gradually changing frames so the motion reads as continuous — short for 'in-betweening.'

Also known as: In-betweening인비트윈Interpolation
···
html
<div class="stage">
  <div class="path"></div>
  <i class="key k1"></i><i class="key k2"></i><i class="key k3"></i>
  <span class="label l1">KEY</span><span class="label l2">KEY</span><span class="label l3">KEY</span>
  <i class="tween"></i>
</div>
css
.stage{position:absolute;inset:0}
.path{position:absolute;left:10%;right:10%;top:50%;height:2px;background:var(--line);transform:translateY(-1px)}
.key{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:3px;transform:rotate(45deg);
  background:var(--surface);border:2px solid var(--accent-2)}
.k1{left:10%}.k2{left:50%}.k3{left:90%}
.label{position:absolute;top:50%;margin-top:-28px;transform:translateX(-50%);font:9px/1 ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.l1{left:10%}.l2{left:50%}.l3{left:90%}
.tween{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.25);animation:tween-move 3s ease-in-out infinite}
@keyframes tween-move{0%,100%{left:10%}50%{left:90%}}

In traditional cel animation studios, the lead animator drew only the key poses, and a separate role — the "in-betweener" — drew the tween frames that filled the gap. How many frames they added directly decided how smooth the motion felt.

Digital tools (After Effects, Adobe Animate, Figma's Smart Animate) now compute that interpolation automatically: set a start value, an end value, and an easing curve, and the software fills in the rest. That's why "tweening" is often used today as a synonym for keyframe animation itself.

Automatic interpolation isn't always right, though. A straight-line tween on something that should arc — a swinging limb — looks stiff. Animators fix it by adding an extra keyframe in the middle to bend the path by hand.

When to use

If an auto-tween looks off, try changing the easing curve before adding more keyframes — most awkwardness is a speed-curve problem, not a missing frame.