Design Atlas
한국어
▶ Motion graphics

Onion skinning

어니언 스키닝

Overlaying the previous and next frames as translucent ghosts behind the one you are drawing, so you can see the arc of motion while you draw.

Also known as: Ghost frames양파 껍질 보기
···
html
<div class="stage">
  <i class="ghost prev"></i><i class="ghost next"></i><i class="current"></i>
</div>
css
.stage{position:absolute;inset:0}
.ghost,.current{position:absolute;top:50%;width:clamp(60px,22vmin,120px);height:clamp(60px,22vmin,120px);
  margin:calc(clamp(60px,22vmin,120px) / -2) 0 0 calc(clamp(60px,22vmin,120px) / -2);border-radius:50%}
.ghost{border:2px solid;background:transparent}
.prev{border-color:var(--accent-2);opacity:.45;animation:orbit 3.2s linear infinite;animation-delay:-.24s}
.next{border-color:var(--accent-3);opacity:.45;animation:orbit 3.2s linear infinite;animation-delay:.24s}
.current{background:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.2);animation:orbit 3.2s linear infinite}
@keyframes orbit{
  0%{left:18%;top:60%}25%{left:38%;top:30%}50%{left:62%;top:60%}75%{left:82%;top:30%}100%{left:18%;top:60%}
}

The name comes from the thin translucent layers you see when you peel an onion. On paper, animators literally stacked semi-transparent sheets over a lightbox to see the previous drawing through the new one; digital tools (TVPaint, Toon Boom, Procreate Dreams, Krita) reproduce this as a layer setting.

The previous frame is usually tinted red and the next tinted green, so it's instantly clear which is the past and which is the future. That makes it easy to catch a common mistake — "noodle arms" that drift back to the same spot every frame instead of following a clean arc.

How many frames ahead and behind to show (the onion-skin range) depends on how fast the action is; faster motion needs more frames stacked to read the arc at all.

When to use

Stacking too many frames at once just creates noise — one or two frames on either side is usually enough.