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

동시 동작Concurrent Motion

Concurrent Motion

동시 동작

다른 이름Also known as · Concurrent action composition · 동시 동작 합성 · AnimationGroup

017

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

도판Fig. 017. 동시 동작 · Concurrent Motion · power2.inOut

여러 대상이나 속성이 같은 시간대에 함께 움직이는 합성Several targets or properties move in the same window of time.

무엇을 전하나What it tells

전달 효과ConveysCONVEYS

동시에 일어나는 변화의 관계. 함께 바뀌는 것을 한 번에 읽는다Relationships between simultaneous changes. Things that change together are read at once.

언제 쓰나Use whenUSE WHEN

두 값이 동시에 반대로 움직이는 관계를 보여 줄 때
위치와 색이 하나의 사건으로 함께 바뀔 때

When two values move in opposite directions at the same time
When position and color change as one event

과용 주의AvoidAVOID

동시 대상 4개 이하(넘으면 그룹화)
길이와 이징을 같게 하거나 의도적으로 다르게
도착 시각을 맞춘다

분류TagsTAGS

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

왼쪽 막대는 줄고 오른쪽 막대는 늘어나는 것이 정확히 같은 0.9초 동안 진행된다

과용 · 나쁜 사례OVERUSE

각 요소의 시작 시각이 조금씩 달라 같은 사건으로 보이지 않는다

파라미터Parameters

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

항목PARAM	기본DEFAULT	범위RANGE	메모NOTE
총 길이	0.9s	0.6~1.2s	모든 대상 공통
시작 차이	0ms	0~40ms	동시로 보이는 한도
이징	power2.inOut	power1~power3.inOut	공통 적용
홀드	0.6s	0.4~1.0s	도착 뒤 정지

GSAP

tl.to('.left', { height: 120, duration: 0.9, ease: 'power2.inOut' }, 0.3)
  .to('.right', { height: 360, duration: 0.9, ease: 'power2.inOut' }, 0.3)
  .to('.gauge', { rotation: 60, duration: 0.9, ease: 'power2.inOut' }, 0.3);

README

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

GSAP으로 <대상>의 .left, .right, .gauge가 정확히 같은 시간에 움직이게 해줘. 0.3초 시작, 0.9초 길이, power2.inOut 공통이고 .left는 높이 120px, .right는 360px, .gauge는 rotation 60도가 돼. 시작 시각이 어긋나지 않게 같은 position을 써. paused 타임라인에 넣어.

Make .left, .right and .gauge of <target> move at exactly the same time with GSAP. Start 0.3s, duration 0.9s, ease power2.inOut for all; .left height 120px, .right 360px, .gauge rotation 60 degrees. Use the same position so starts do not drift. Paused timeline.

Codex

<파일>의 <대상>에 concurrent-motion을 적용해. 세 tween 모두 position 0.3, duration 0.9, ease power2.inOut. 0.3초·0.75초·1.2초를 캡처해 세 대상의 진행률(현재값-시작값)/(목표값-시작값)이 서로 같은지 확인해.

Apply concurrent-motion to <target> in <file>. All three tweens at position 0.3, duration 0.9, ease power2.inOut. Capture at 0.3s, 0.75s and 1.2s and check the progress (current-start)/(target-start) is equal for all three.