예비동작Anticipation

Anticipation

예비동작

다른 이름Also known as · 준비 동작 · Wind-up · 예비 동작 · anticipation-windup-chain · nudge-curve · Anticipatory back motion · 반대 방향 예비 동작 · Anticipation Pose

002

도판Fig. 002. 예비동작 · Anticipation · power2.inOut 준비 / power3.out 발사

재생 속도Speed

주 동작 전에 반대 방향으로 짧게 움직여 다음 움직임을 예고하는 기법A brief movement in the opposite direction prepares the viewer for the main action.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

출발할 방향과 힘의 축적. 갑작스러운 이동을 따라보기 쉽게 한다Signals the direction of travel and a buildup of force, making sudden motion easier to follow.

언제 쓰나Use whenUSE WHEN

캐릭터나 아이콘의 발사 방향을 예고할 때
큰 이동 전에 시선을 준비시킬 때

Signal the launch direction of a character or icon.
Prepare the viewer's attention before a large movement.

과용 주의AvoidAVOID

즉시 응답해야 하는 반복 입력에는 넣지 않는다
예비 이동을 주 이동보다 크게 하지 않는다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

주홍 점이 0.25초 동안 왼쪽 54px 물러나 납작해진 뒤 오른쪽으로 발사된다

과용 · 나쁜 사례OVERUSE

예비동작이 주 동작보다 길어서 사용자의 반응을 지연한다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
예비 거리	54px	24~70px	주 이동과 반대 방향
예비 지속	0.25s	0.15~0.30s	짧지만 눈에 보이는 준비
가로 변형	1.30	1.15~1.40	세로 배율은 가로 배율의 역수
발사 지속	0.65s	0.4~0.9s	준비 후 빠르게 출발

GSAP

tl.to('#plain',{x:730,duration:.65,ease:'power3.out'},.6);
tl.to('#ready',{x:-54,scaleX:1.3,scaleY:1/1.3,duration:.25,ease:'power2.inOut'},.6);
tl.to('#ready',{x:730,scaleX:1,scaleY:1,duration:.65,ease:'power3.out'},.85);

라이브 소스 열기Open live source 소스 코드Source README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상>에 예비동작을 넣어줘. 0.60초부터 0.25초 동안 왼쪽 54px 이동하고 scaleX 1.3, scaleY 1/1.3으로 납작하게 해. 0.85초부터 0.65초 동안 x 730px으로 발사하며 원형으로 돌아오고, 3.00초까지 도착 상태를 유지해.

Add anticipation to <target> with GSAP. Starting at 0.60 seconds, move 54px left over 0.25 seconds and squash it with scaleX 1.3 and scaleY 1/1.3. Starting at 0.85 seconds, launch it to x 730px over 0.65 seconds while restoring its circular shape. Hold the arrival state until 3.00 seconds.

Codex

<파일>의 아래 비교 줄에 예비동작을 적용해. 0.60초부터 0.25초간 x -54px, scaleX 1.3, scaleY 1/1.3, ease power2.inOut으로 준비하고 0.85초부터 0.65초간 x 730px, scale 1, ease power3.out으로 발사해. 0.73초에서 역방향 압축이 보이고 1.73초와 2.90초에서 같은 도착 상태인지 캡처해 확인해.

Apply anticipation to the lower comparison row in <file>. Starting at 0.60 seconds, prepare over 0.25 seconds with x -54px, scaleX 1.3, scaleY 1/1.3, and ease power2.inOut. Starting at 0.85 seconds, launch over 0.65 seconds with x 730px, scale 1, and ease power3.out. Capture at 0.73 seconds to verify the backward squash, and at 1.73 and 2.90 seconds to verify identical arrival states.