AWESOME AI MOTION
효과Effects / 기본기Principles / Nº 014

가산 모션Additive Motion

Additive Motion
가산 모션
다른 이름Also known as · Group Rig Sway · 그룹 동반 흔들림 · null-parent-rig · Additive layered motion · 가산 레이어 모션 · Secondary Action · 보조 동작
014
렌더 추가 예정CLIP COMING가산 모션Additive Motion정의·파라미터·프롬프트는 아래에 있다Definition, parameters and prompts are below
도판Fig. 014. 가산 모션 · Additive Motion · sine.inOut

큰 경로를 따라 움직이는 대상에 작은 흔들림이나 회전이 동시에 더해진다A small wobble or rotation is layered on top of an element following a larger path.

01

무엇을 전하나What it tells

전달 효과ConveysCONVEYS
요소들이 하나의 그룹처럼 움직인다는 것을 알게 해 준다. 주 동작 위에 미세한 살아 있는 느낌이 얹힌다Makes elements read as one group and adds a subtle liveliness on top of the main motion.
언제 쓰나Use whenUSE WHEN
  • 아이콘이나 카드가 이동하면서 살짝 흔들리도록 해 무게를 줄 때
  • 여러 요소를 하나의 부모 리그로 묶어 함께 움직이게 할 때
  • Give an icon or card weight by letting it sway while it travels.
  • Bind several elements to one parent rig so they move together.
과용 주의AvoidAVOID
  • 주 경로와 보조 흔들림을 다른 요소(부모와 자식)에 나눠 건다
  • 보조 진폭은 주 이동 거리의 2% 이하
분류TagsTAGS
기본기Principles분위기Mood순서·흐름Sequence설명 영상Explainer video숏폼Short-form발표Presentation난이도 중급Intermediategsap
02

좋은 예와 나쁜 예Good and bad use

좋은 사례GOOD

부모가 2초에 걸쳐 x 900px 이동하는 동안 자식이 주기 0.4초, 위치 진폭 6px, 회전 2도로 흔들린다

과용 · 나쁜 사례OVERUSE

이동과 흔들림을 하나의 tween에 섞어 값을 덮어쓰거나, 진폭을 30px로 키워 술 취한 것처럼 보인다

03

파라미터Parameters

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

항목PARAM기본DEFAULT범위RANGE메모NOTE
주경로 시간2s1.5~3s부모의 이동
보조 주기0.4s0.3~0.6s자식 진동
위치 진폭6px3~10pxy 방향
회전2도1~3도사인 곡선
GSAP
tl.to('.rig', { x: 900, duration: 2, ease: 'power2.inOut' }, 0.3);   // 부모: 주경로
tl.to('.item', { y: 6, rotation: 2, duration: 0.2, ease: 'sine.inOut', yoyo: true, repeat: 9 }, 0.3); // 자식: 0.4s 주기, 10 반주기
README
04

에이전트 프롬프트Agent prompts

그대로 붙여 넣는다Paste as is

Claude Code

<대상> 카드에 가산 모션을 넣어줘. 부모 .rig가 2초 동안 x 900px를 power2.inOut으로 이동하고, 자식 .item은 같은 구간에서 y 6px와 rotation 2도를 sine.inOut으로 0.2초 반주기 yoyo, 10회 왕복해. 둘은 별도 tween이라 서로 값을 덮어쓰지 않게 해.

Add additive motion to the card in <target>. The parent .rig moves x 900px over 2 seconds with power2.inOut, while the child .item adds y 6px and 2 degrees of rotation with sine.inOut, yoyo half-periods of 0.2s, 10 times. Use separate tweens so neither overwrites the other.

Codex

<파일>에 additive motion을 구현해. .rig x 900 / 2s / power2.inOut, .item y 6 rotation 2 / 0.2s / sine.inOut / yoyo repeat 9. 0.5초, 1.3초, 2.3초를 캡처해 카드가 큰 경로를 따라가는 동안 흔들림이 유지되는지, 도착 후 흔들림이 0으로 돌아오는지 확인해.

Implement additive motion in <file>: .rig x 900 / 2s / power2.inOut, .item y 6 and rotation 2 / 0.2s / sine.inOut / yoyo repeat 9. Capture at 0.5s, 1.3s and 2.3s and verify the wobble persists along the main path and returns to 0 after arrival.

05

도구별로 쓰기In your tools

HyperFrames · ReelForge · Scrolline

HyperFramesVIDEO · GSAP
부모와 자식을 다른 tween으로 나누고 repeat 횟수를 명시해 timeline 길이를 고정한다. repeat: -1은 쓰지 않는다
ReelForgeBRIEF TO VIDEO
씬 워커 브리프에 부모 경로, 자식 진폭과 주기를 별도 파라미터 두 묶음으로 싣는다
Scrolline DeckSCROLL SCRUB
진행률에 주 경로를 연결하고, 흔들림은 진행률 0.05 폭 사인으로 만든다. 진폭은 픽셀 그대로 두고 주기만 조정한다
06

잘 맞는 조합Pairs well with

오버랩 · Overlapping Action
Nº 001오버랩Overlapping ActionOverlapping Action
팔로스루 · Follow-through
Nº 008팔로스루Follow-throughFollow-through
렌더 추가 예정CLIP COMING
그룹 이동Group Motion
019
Nº 019그룹 이동Group MotionGroup Motion
07

출처Sources

개념 출처와 라이선스. 구현은 이 레포에서 새로 씀Concept sources and licenses. Implementations are original to this repo