효과Effects / 기본기Principles / Nº 020

관성 이동Inertial Glide

Inertial Glide

관성 이동

다른 이름Also known as · Inertial glide · 관성 미끄러짐 · Numeric property physics · 속성 물리 변화

020

렌더 추가 예정CLIP COMING관성 이동Inertial Glide정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 020. 관성 이동 · Inertial Glide · expo.out

놓인 물체가 이동 방향을 유지하다가 서서히 감속하며 멈춘다A released object keeps its direction of travel and gradually decelerates to a stop.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

속도와 마찰을 느끼게 한다. 밀어서 놓은 것 같은 자연스러운 정지가 된다Conveys speed and friction, like something pushed and let go, with a natural stop.

언제 쓰나Use whenUSE WHEN

카드를 던지듯 밀어 놓았을 때 미끄러지다 멈추게 할 때
스와이프 뒤 목록이 관성으로 흘러갈 때

Let a card slide and stop after being pushed.
Let a list coast after a swipe.

과용 주의AvoidAVOID

정지 조건은 속도 5px/s 미만
이동 거리는 화면 안에 들어오도록 초기 속도를 정한다

분류TagsTAGS

기본기Principles 피드백Feedback 분위기Mood 웹 UIWeb UI 제품 시연Product demo 숏폼Short-form 난이도 중급Intermediategsap

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

초기 속도 600px/s에서 시정수 700ms로 지수 감쇠하며 최대 2000ms 동안 미끄러지다 멈춘다

과용 · 나쁜 사례OVERUSE

감쇠가 없어 등속으로 가다 갑자기 멈추거나, 초기 속도가 3000px/s라 화면 밖으로 나간다

파라미터Parameters

기본값은 클립에 쓴 값Defaults are the values used in the clip

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
초기 속도	600px/s	300~1000px/s	방향 포함
감쇠 시정수	700ms	400~1000ms	v = v0 * exp(-t/tau)
최대 재생	2000ms	1500~2500ms
총 이동	약 420px	v0*tau	600*0.7

GSAP

const v0 = 600, tau = 0.7, dist = v0 * tau; // 420px
tl.to('.card', { x: dist, duration: 2, ease: 'expo.out' }, 0.3);
// 정확한 지수 감쇠: x(t) = v0*tau*(1 - exp(-t/tau)), expo.out은 근사

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 카드에 관성 이동을 넣어줘. 초기 속도 600px/s, 시정수 0.7초로 지수 감쇠하게 하고 총 2초 동안 x 420px 이동해 멈추게 해. GSAP에서 ease expo.out으로 근사하고 시작은 0.3초.

Add inertial glide to the card in <target>. Use an initial velocity of 600px/s and a time constant of 0.7 seconds for exponential decay, traveling about 420px over 2 seconds and stopping. Approximate with ease expo.out in GSAP and start at 0.3 seconds.

Codex

<파일>에 inertial glide를 구현해. x(t) = 600*0.7*(1 - exp(-t/0.7)), 2초, onUpdate로 계산. 0.5초, 1.0초, 2.0초에 캡처해 위치 증가량이 점점 줄어드는지, 2초에 약 402px 이상이면서 420px를 넘지 않는지 확인해.

Implement inertial glide in <file>: x(t) = 600*0.7*(1 - exp(-t/0.7)), 2 seconds, computed in onUpdate. Capture at 0.5s, 1.0s and 2.0s and verify the position increments shrink and the value at 2s is about 402px and never exceeds 420px.