AE GSAP 모션 변환은(는) 무엇을 하나요?
After Effects 작업에서 GreenSock/GSAP 모션 문법의 이점을 얻을 수 있는 경우 skills/AEMotion/SKILL.md 다음에 사용하세요. GSAP 자체는 AE에서 실행되지 않습니다. 해당 개념을 AE 네이티브 키프레임, 표현식, 컨트롤러 널, 텍스트 애니메이터, 타임 리맵, 마스크, 카메라 및 스크립트로 변환하세요.
로컬에 설치된 공식 소스 스킬 (Codex 스킬 위치가 다르면 루트를 조정하세요):
$CODEX_HOME/skills/gsap-core/SKILL.md$CODEX_HOME/skills/gsap-timeline/SKILL.md$CODEX_HOME/skills/gsap-scrolltrigger/SKILL.md$CODEX_HOME/skills/gsap-plugins/SKILL.md$CODEX_HOME/skills/gsap-utils/SKILL.md$CODEX_HOME/skills/gsap-performance/SKILL.md
정확한 의미가 중요할 때만 관련 공식 GSAP 스킬을 읽으세요. AE 스크립트는 AEMotion에서 요구하는 대로 ES3 호환성을 유지하세요.
핵심 변환
| GSAP 개념 | AE 변환 |
|---|---|
gsap.to(target, vars) | 현재 값을 시작 값으로 유지; start + duration에 종료 키프레임 설정. |
gsap.from(target, vars) | vars에서 명시적 시작 키프레임 설정; 현재/최종 설계된 값으로 애니메이션. 나중에 고정된 상태를 덮어쓰지 않아 원치 않는 "immediateRender"를 방지. |
gsap.fromTo(target, from, to) | 시작 및 종료 키프레임을 모두 명시적으로 설정. 안정적인 스크립트 기반 AE 빌드에 가장 좋음. |
gsap.set(target, vars) | 현재 시간에 값 설정 또는 나중 애니메이션이 이에 의존하는 경우 홀드 키프레임 생성. |
duration, delay | 초를 컴타임으로 변환; 30fps의 경우 1 frame = 1/30. |
ease | 키프레임에 시간적 이즈 적용 또는 표현식 곡선 사용. 느낌을 일치시키고 정확한 브라우저 수학을 따르지 마세요. |
stagger | 레이어/키프레임 시작 시간을 프레임 단위로 오프셋; 텍스트의 경우 Text Animator 선택기 또는 Decompose Text 레이어 선호. |
repeat / yoyo | 반복 표현식, 타임 리맵 또는 중복 키프레임 사이클 사용. 표현식이 취약해지면 베이크. |
autoAlpha | 불투명도 키프레임; 가시 범위 밖의 하드 컷에 대해서만 선택적으로 레이어 비활성화/활성화. |
상대 값 +=, -= | 현재 AE 속성을 읽고 새 키를 작성하기 전에 델타를 추가. |
| 함수 기반 값 | JSX 또는 표현식 선택기에서 인덱스 기반 계산 사용. |
gsap.defaults() | JSX의 공유 구성 객체 또는 duration/ease/spread를 위한 슬라이더가 있는 컨트롤러 널. |
matchMedia() / 축소 모션 | Motion Amount와 같은 대체 스케일/슬라이더 사전 설정 생성; 축소 모션의 경우 더 짧은 거리, 더 낮은 회전 또는 불투명도 전용 사용. |
타임라인 문법
AE 키를 생성하기 전에 간결한 타임라인 스펙을 작성하십시오:
label intro @ 0.00
S06_Card_Demo.fromTo position [x0,y0,z0] -> [x1,y1,z1] dur .55 ease power3.out @ intro
S06_Card02.to scale 70 -> 100 dur .35 ease back.out @ <+.08
cards.stagger orientation += [0,18,-8] dur .6 ease power2.inOut each .04 from center
그런 다음 AE 테이블로 변환합니다:
| 필드 | 의미 |
|---|---|
| layer | 정확한 AE 레이어 이름 또는 패턴. |
| property | AE 속성 경로: Position, Scale, Orientation, Opacity, Mask Path, Time Remap 등. |
| from/to | AE 단위의 명시적 값. |
| start/duration | 초 또는 프레임. |
| ease | AE 시간적 이즈에 매핑된 GSAP 스타일 이름. |
| offset | 절대 시간, 레이블, 이전 시작 <, 이전 종료 >, 또는 스태거 오프셋. |
| controller | 값을 구동해야 하는 선택적 널/슬라이더. |
흩어진 딜레이 계산보다 타임라인 레이블을 선호하세요. 복잡한 섹션의 경우 시퀀스당 하나의 컨트롤러 널(예: CTRL_S06_CARDS)을 만들고 Motion Amount, Stagger Frames, Depth Spread, Progress와 같은 슬라이더를 추가하세요.
이즈 매핑
이것들을 시작점으로 사용하고 캡처로 시각적으로 조정하세요:
| GSAP 이즈 | AE 느낌 |
|---|---|
none | 선형 보간. 스크러브/진행 기반 모션에 사용. |
power1.out | 부드러운 이즈 아웃; 낮은 영향. |
power2.out | 표준 UI 이즈 아웃. |
power3.out | 빠른 시작, 강한 정착; 카드 및 타이틀에 좋음. |
power3.inOut | 대칭 부드러운 이동; 카메라 또는 그룹 이동에 좋음. |
expo.out | 매우 빠른 도착 후 느린 정착; 드물게 사용. |
back.out(1.7) | 끝을 넘는 오버슈트 키 추가 후 정착. |
elastic.out() | 표현식 스프링 또는 3-5개의 감쇠 오버슈트 키 사용. |
bounce.out | 단계별 충격 키 사용; 하나의 Easy Ease로 속이지 마세요. |
정확한 타이밍이 중요할 때는 최고 속도 및 착지 지점 주변의 프레임을 샘플링하세요. AE의 키프레임 보간은 GSAP와 수치적으로 동일하지 않습니다; 결과물은 모션 인식을 일치시키는 것입니다.
AE의 ScrollTrigger 개념
AE에는 DOM 스크롤이 없습니다. ScrollTrigger를 진행 드라이버로 변환하세요:
| ScrollTrigger 개념 | AE 패턴 |
|---|---|
trigger/start/end | 타임라인 레이블 범위 또는 작업 영역 범위. |
scrub: true | 슬라이더/널 Progress 0..100, Time Remap, 또는 시간을 진행에 매핑하는 표현식. 선형 이즈 사용. |
숫자 scrub 지연 | 진행 값에 저역 통과/스프링 표현식 또는 지연된 중복 키. |
pin | 자식 애니메이션 중 카메라 또는 상위 널 유지. 자식이 독립적인 모션을 필요로 하는 경우 고정된 상위는 애니메이션하지 마세요. |
snap | 홀드/스냅 키프레임 또는 Math.round(progress / step) * step 표현식. |
markers | 임시 가이드 레이어, 레이블 또는 텍스트 오버레이; 최종 제공 전에 제거. |
containerAnimation | 하나의 마스터 널 또는 카메라 경로로 제어되는 수평/3D 캐러셀; 중첩된 요소는 동일한 진행을 참조. |
AE "스크롤형" 릴의 경우 CTRL_PROGRESS로 마스터 타임라인을 구동하고 카드, 카메라 Z, 불투명도 및 블러에 진행을 매핑합니다. 진행을 구동하는 모션은 선형으로 유지하고, 시각적 개선이 있을 때만 중첩된 시각적 응답에 이즈를 적용하세요.
플러그인 패턴 등가물
| GSAP 플러그인 | AE 등가물 |
|---|---|
| Flip | 첫 번째 및 마지막 레이어 변환 기록; 역 오프셋 또는 상위 널을 통해 애니메이션. 레이아웃 재정렬 및 카드 교체에 사용. |
| Draggable / Observer | AE 렌더는 상호작용이 없음; 컨트롤러 슬라이더 또는 기록된 키프레임으로 제스처 표현. |
| Inertia | 속도 기반 표현식, 스프링 표현식 또는 감쇠 오버슈트 키 사용. |
| SplitText | AE Text Animators, Expression Selectors 사용 또는 단어별/문자별 레이어로 Decompose Text. |
| ScrambleText | Source Text 홀드 키, 문자 맵 표현식 또는 텍스트 애니메이터 불투명도/문자 오프셋. |
| DrawSVG | 셰이프 레이어 Trim Paths. |
| MorphSVG | 마스크/패스 키프레임 또는 셰이프 패스 보간; 정점 수/순서가 일치하는지 확인. |
| MotionPath | AE 마스크 패스 + 레이어 패스 페어런팅, 또는 베지어를 따라 샘플링된 위치 키. |
| CustomEase / CustomWiggle / CustomBounce | AE 그래프 편집기 곡선, 시간적 이즈 값 또는 사용자 정의 표현식 함수. |
| GSDevTools | 임시 컨트롤러 널, 가이드 레이어, 프레임 캡처 및 감사 JSX 보고서. |
유틸리티 함수 등가물
GSAP 유틸을 JSX/표현식의 수학 어휘로 사용하세요:
function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
function mapRange(in0, in1, out0, out1, v) {
var p = (v - in0) / (in1 - in0);
return out0 + (out1 - out0) * p;
}
function lerp(a, b, p) { return a + (b - a) * p; }
function snap(step, v) { return Math.round(v / step) * step; }
일반적인 AE 사용:
normalize/mapRange: 시간, 오디오 진폭 또는 슬라이더 진행을 위치/스케일/불투명도에 매핑.random: JSX에서 결정론적 레이어별 오프셋 생성; 의도적인 지터가 아니라면 비결정론적 표현식 무작위성은 피하세요.snap: 단계별 타자기, 프레임 건너뛴 모션, 그리드/카드 스냅.distribute: 카드 팬, 텍스트 스태거, 중앙에서 바깥으로 나타내기.
AE 성능 규칙
- 무거운 프레임별 이펙트보다 변환, 불투명도, 타임 리맵 및 카메라/널 이동을 선호하세요.
- 많은 레이어가 동시에 값비싼 이펙트로 애니메이션하는 것을 피하세요; 룩이 승인되면 프리컴포즈하거나 베이크하세요.
- 제어 및 반복을 위해 표현식을 사용하고, 표현식이 느리거나 취약해지면 키프레임으로 베이크하세요.
- 모션 블러는 인지된 품질을 향상시키지만 레이아웃 실수를 숨길 수 있습니다; 진단 시 블러 유무 모두 확인하세요.
- 반복되는 카드의 경우 각 속성을 독립적으로 키프레임하는 대신 상위 널과 공유 컨트롤러를 사용하세요.
- 마스크와 메시 워프는 시각적으로 허용되는 한 단순하게 유지하세요. 마스크를 변경한 후 정확한 프레임을 캡처하세요.
AE 빌드 워크플로우
- 사용자가 GSAP 개념을 언급하면
AEMotion및 관련 공식 GSAP 스킬을 읽으세요. - 편집 전에 AE 컴프/레이어를 검사하세요. 레이어 이름을 추론하지 마세요.
- 레이블, 지속 시간, 이즈, 스태거 및 대상 레이어가 포함된 GSAP 스타일 타임라인 스펙을 초안 작성하세요.
- AE 구현 테이블로 변환하세요.
- 키프레임/이즈/컨트롤러를 위한 ES3 호환 JSX 헬퍼를 작성하세요.
- 스크립트당 하나의 논리적 시퀀스를 적용하세요.
- 시작, 최고 속도, 착지 및 최종 홀드 주변의 정확한 프레임을 캡처하세요.
- 시각적 증거에서 값을 조정한 다음 저장하세요.
금지 사항
- GSAP 브라우저 코드를 AE에 붙여넣지 마세요.
- ExtendScript에서 최신 자바스크립트 구문을 사용하지 마세요.
- 중복 검사 없이 여러 관련 없는 리그에서 동일한 AE 속성을 애니메이션하지 마세요.
- 복잡한 섹션에 대해
delay스타일의 흩어진 타이밍에 의존하지 마세요; 레이블/컨트롤러 타이밍을 사용하세요. - 사용자가 요청하지 않는 한 최종 렌더에 임시 가이드/마커 레이어를 유지하지 마세요.