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

순차 동작Action Sequence

Action Sequence

순차 동작

다른 이름Also known as · Sequential action chain · 순차 동작 연결 · Succession · Sequence

013

렌더 추가 예정CLIP COMING순차 동작Action Sequence정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below

도판Fig. 013. 순차 동작 · Action Sequence · power2.out

한 동작이 끝난 뒤 다음 동작이 시작해 단계를 차례로 보여 주는 연결One action finishes and the next begins, showing steps in order.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

과정의 선후 관계가 정확히 읽힌다. 한 번에 하나씩 이해하게 한다The order of a process reads exactly. Viewers take one step at a time.

언제 쓰나Use whenUSE WHEN

절차나 파이프라인 단계를 순서대로 보여 줄 때
원인 다음 결과가 이어지는 설명

When showing procedure or pipeline steps in order
When a cause is followed by its result

과용 주의AvoidAVOID

단계 간 간격 0.08~0.2초
단계 수 5개 이하(넘으면 나누기)
각 단계는 하나의 의미만

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

입력 상자 등장 0.7초, 0.12초 쉼, 화살표 그리기 0.7초, 쉼, 결과 상자 등장 0.7초 순으로 이어진다

과용 · 나쁜 사례OVERUSE

단계가 겹치거나 간격이 없어 어디서 끝나고 시작하는지 모르겠다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
단계 길이	0.7s	0.5~1.0s	한 단계 tween
단계 간격	0.12s	0.08~0.2s	끝과 다음 시작 사이
단계 수	3	2~5	한 장면 기준
이징	power2.out	power2~power3.out	도착이 분명

GSAP

const steps = ['.s1', '.s2', '.s3'];
steps.forEach((s, i) => tl.from(s, { opacity: 0, y: 24, duration: 0.7, ease: 'power2.out' }, 0.3 + i * (0.7 + 0.12)));

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상> 단계 .s1, .s2, .s3를 순서대로 보여줘. 0.3초에 시작해 각 단계는 opacity 0, y +24px에서 0.7초 power2.out으로 나타나고 다음 단계는 앞 단계 끝나고 0.12초 뒤에 시작해. 마지막 뒤 0.6초 정지. paused 타임라인 하나로 만들어.

Reveal the steps .s1, .s2 and .s3 of <target> in order with GSAP. Start at 0.3s. Each step animates from opacity 0, y +24px over 0.7s with power2.out, and the next starts 0.12s after the previous ends. Hold 0.6s after the last. One paused timeline.

Codex

<파일>의 <대상>에 action-sequence를 적용해. steps.forEach로 from({opacity 0, y 24}, 0.7s, power2.out)를 position 0.3+i*0.82에 건다. 0.5초·1.3초·2.2초를 캡처해 항상 한 단계만 움직이는지, 앞 단계가 남아 있는지 확인해.

Apply action-sequence to <target> in <file>. With steps.forEach add from({opacity 0, y 24}, 0.7s, power2.out) at position 0.3 + i*0.82. Capture at 0.5s, 1.3s and 2.2s to check only one step moves at a time and earlier steps remain.