디자인 아틀라스
EN
↝ 모션

스프링 애니메이션

Spring animation

정해진 시간표 대신 강성(stiffness)·감쇠(damping) 같은 물리량으로 움직임을 계산하는 애니메이션. 목표를 살짝 지나쳤다 튕기며 멈춥니다.

다른 이름: Physics-based animationDamped spring
···
html
<div class="track"><i class="ball"></i><i class="target"></i></div>
css
.track{position:relative;width:min(78%,420px);height:26px;--final:calc(100% - 26px)}
.track::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;margin-top:-1px;background:var(--line);border-radius:2px}
.target{position:absolute;top:50%;right:13px;width:2px;height:34px;margin-top:-17px;background:var(--line)}
.ball{position:absolute;top:50%;left:0;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:var(--accent);
  box-shadow:0 4px 10px rgba(0,0,0,.2);animation:spring 2.6s cubic-bezier(.2,.9,.3,1) infinite}
@keyframes spring{
  0%{left:0}
  30%{left:calc(var(--final) + 26px)}
  46%{left:calc(var(--final) - 10px)}
  60%{left:calc(var(--final) + 12px)}
  72%{left:calc(var(--final) - 5px)}
  84%{left:calc(var(--final) + 6px)}
  100%{left:var(--final)}
}

cubic-bezier는 항상 정해진 시간(duration) 안에 끝나야 하지만, 스프링은 "언제 멈출지"를 물리 시뮬레이션이 결정합니다. 강성이 높을수록 빠르고 단단하게, 감쇠가 낮을수록 더 많이 진동합니다.

Framer Motion, React Spring, iOS의 UISpringTimingParameters 같은 도구가 이 모델을 씁니다. 사용자가 드래그를 중간에 멈추거나 방향을 바꿔도 자연스럽게 이어지는 게 duration 기반 애니메이션과의 가장 큰 차이입니다.

데모의 원은 목표 지점을 매번 살짝 지나쳤다가 감쇠하며 멈춥니다 — 감쇠가 낮을수록 더 오래 흔들립니다.

언제 쓰나

드래그·제스처처럼 사용자 입력에 바로 반응해야 하는 동작에 적합합니다. 페이지 전환처럼 정확한 타이밍이 중요할 땐 duration 기반이 낫습니다.