Design Atlas
한국어
▶ Motion graphics

Secondary action

세컨더리 액션

A supporting motion that reinforces a character's main action without competing with it — one of Disney's 12 principles of animation.

Also known as: Supporting action
···
html
<div class="stage">
  <div class="char">
    <div class="head"></div>
    <div class="body"></div>
    <div class="arm"></div>
  </div>
  <span class="cap">주요 동작: 걷기 · 세컨더리: 팔 흔들기</span>
</div>
css
.stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8%}
.char{position:relative;width:clamp(70px,26vmin,120px);height:clamp(90px,34vmin,150px);animation:bob 1.1s ease-in-out infinite}
.head{position:absolute;left:50%;top:0;width:34%;aspect-ratio:1;margin-left:-17%;border-radius:50%;background:var(--fg)}
.body{position:absolute;left:50%;top:32%;width:26%;height:56%;margin-left:-13%;border-radius:10px;background:var(--accent)}
.arm{position:absolute;left:62%;top:36%;width:10%;height:40%;border-radius:6px;background:var(--accent-2);
  transform-origin:top center;animation:swing 1.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6%)}}
@keyframes swing{0%,100%{transform:rotate(-26deg)}50%{transform:rotate(26deg)}}
.cap{font:11px/1.3 sans-serif;color:var(--muted);text-align:center;max-width:80%}

If a walking character's main action is the movement of its legs, swinging its arms or bobbing its head along the way is the secondary action. It doesn't interfere with the "walking" information — it just makes the character feel more alive and expressive.

The one rule that matters: never let the secondary action upstage or compete with the main one. Make it too big or too attention-grabbing and the viewer's eye drifts away from what they're actually supposed to be watching — which is why it's usually kept smaller in amplitude and timed a beat behind the main action, tying it to overlap.

A talking character gesturing with their hands, an angry character tapping a foot — both are secondary action. They layer personality on top of the main information (the dialogue, the emotion) without changing it.

When to use

If the secondary action catches the eye before the main one does, dial back its amplitude or delay its timing.