Tradução de Movimento AE GSAP
Use esta skill após skills/AEMotion/SKILL.md para trabalhos no After Effects que se beneficiam da gramática de animação GreenSock/GSAP. O GSAP não é executado no AE. Traduza seus conceitos para keyframes nativos do AE, expressões, nulls de controle, animadores de texto, time remap, máscaras, câmeras e scripts.
Skills oficiais de origem instaladas localmente (ajuste a raiz se suas skills do Codex estiverem em outro local):
$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
Leia apenas a skill oficial do GSAP relevante quando a semântica exata for importante. Mantenha os scripts do AE compatíveis com ES3, conforme exigido por AEMotion.
Tradução Principal
| Ideia GSAP | Tradução AE |
|---|---|
gsap.to(target, vars) | Mantenha o valor atual como início; defina keyframe final em início + duração. |
gsap.from(target, vars) | Defina um keyframe inicial explícito a partir de vars; anime até o valor final atual/projetado. Evite "immediateRender" indesejado não sobrescrevendo estados posteriores já definidos. |
gsap.fromTo(target, from, to) | Defina keyframes inicial e final explicitamente. Melhor para builds scriptados confiáveis no AE. |
gsap.set(target, vars) | Defina o valor no tempo atual ou crie um keyframe de retenção se uma animação posterior depender dele. |
duration, delay | Converta segundos para tempo da composição; para 30fps, 1 frame = 1/30. |
ease | Aplique suavização temporal nos keyframes ou use curvas de expressão. Combine a sensação, não a matemática exata do navegador. |
stagger | Desloque o início de layers/keyframes por frames; para texto, prefira seletores de Animador de Texto ou camadas Decompor Texto. |
repeat / yoyo | Use expressões de loop, time remap ou ciclos de keyframes duplicados. Converta para keyframes se as expressões se tornarem frágeis. |
autoAlpha | Keyframes de opacidade; opcionalmente desabilite/habilite a camada apenas para cortes abruptos fora dos intervalos visíveis. |
Valores relativos +=, -= | Leia a propriedade atual do AE e adicione o delta antes de escrever o novo keyframe. |
| Valores baseados em função | Use cálculos baseados em índice no JSX ou seletores de expressão. |
gsap.defaults() | Objeto de configuração compartilhado no JSX, ou null de controle com sliders para duração/suavidade/espalhamento. |
matchMedia() / reduced motion | Crie predefinições alternativas de escala/slider, como Motion Amount; para movimento reduzido, use distância menor, rotação menor ou apenas opacidade. |
Gramática de Timeline
Antes de criar keyframes no AE, escreva uma especificação de timeline compacta:
label intro @ 0.00
S06_Card_Demo.fromTo posição [x0,y0,z0] -> [x1,y1,z1] dur .55 ease power3.out @ intro
S06_Card02.to escala 70 -> 100 dur .35 ease back.out @ <+.08
cards.stagger orientação += [0,18,-8] dur .6 ease power2.inOut each .04 from center
Em seguida, traduza-a em uma tabela AE:
| Campo | Significado |
|---|---|
| layer | Nome exato da camada no AE ou padrão. |
| property | Caminho da propriedade no AE: Posição, Escala, Orientação, Opacidade, Caminho da Máscara, Time Remap, etc. |
| from/to | Valores explícitos em unidades do AE. |
| start/duration | Segundos ou frames. |
| ease | Nome no estilo GSAP mapeado para suavização temporal do AE. |
| offset | Tempo absoluto, label, início anterior <, fim anterior >, ou offset de stagger. |
| controller | Null ou slider opcional que deve controlar os valores. |
Prefira labels de timeline em vez de matemática de delay dispersa. Para seções complexas, crie um null de controle por sequência, por exemplo CTRL_S06_CARDS, com sliders como Motion Amount, Stagger Frames, Depth Spread e Progress.
Mapeamento de Ease
Use estes como pontos de partida e ajuste visualmente com capturas:
| Ease GSAP | Sensação AE |
|---|---|
none | Interpolação linear. Use para movimento acionado por scrub/progresso. |
power1.out | Suavização suave; baixa influência. |
power2.out | Suavização padrão de UI. |
power3.out | Início rápido, parada forte; bom para cartões e títulos. |
power3.inOut | Trajeto simétrico suave; bom para câmera ou movimentos de grupo. |
expo.out | Chegada muito rápida, depois parada lenta; use com moderação. |
back.out(1.7) | Adicione um keyframe de ultrapassagem além do final, depois estabilize. |
elastic.out() | Use expressão spring ou 3-5 keyframes de ultrapassagem decrescente. |
bounce.out | Use keyframes de impacto escalonados; não finja com um único Easy Ease. |
Quando o tempo exato for importante, amostre frames ao redor do pico de velocidade e do momento de parada. A interpolação de keyframes do AE não será numericamente idêntica ao GSAP; o resultado deve combinar a percepção de movimento.
Conceitos do ScrollTrigger no AE
O AE não tem rolagem DOM. Traduza o ScrollTrigger como um driver de progresso:
| Ideia ScrollTrigger | Padrão AE |
|---|---|
trigger/start/end | Intervalo de label de timeline ou intervalo da área de trabalho. |
scrub: true | Slider/Null Progress 0..100, Time Remap, ou expressão mapeando tempo para progresso. Use ease linear. |
scrub numérico com lag | Expressão low-pass/spring no valor de progresso, ou keyframes duplicados com atraso. |
pin | Segure a câmera ou null pai enquanto anima os filhos. Não anime o pai fixado se os filhos precisarem de movimento independente. |
snap | Keyframes de retenção/snap ou expressão Math.round(progress / step) * step. |
markers | Camadas guia temporárias, labels ou sobreposições de texto; remova antes da entrega final. |
containerAnimation | Carrossel horizontal/3D controlado por um null mestre ou caminho de câmera; elementos aninhados referenciam o mesmo progresso. |
Para reels "tipo scroll" no AE, acione uma timeline mestre com CTRL_PROGRESS e mapeie o progresso para cartões, posição Z da câmera, opacidade e desfoque. Mantenha o movimento que aciona o progresso linear; coloque ease nas respostas visuais aninhadas apenas quando melhorar a aparência.
Equivalências de Plugins
| Plugin GSAP | Equivalente AE |
|---|---|
| Flip | Registre as transformações inicial e final da camada; anime através de offset inverso ou nulls pai. Use para reordenações de layout e trocas de cartões. |
| Draggable / Observer | A renderização do AE não é interativa; represente gestos com sliders de controle ou keyframes gravados. |
| Inertia | Use expressão baseada em velocidade, expressão spring ou keyframes de ultrapassagem decrescente. |
| SplitText | Use Animadores de Texto do AE, Seletores de Expressão ou camadas Decompor Texto por palavra/por caractere. |
| ScrambleText | Keyframes de retenção de Texto de Origem, expressão de mapa de caracteres ou opacidade/deslocamento de caractere do animador de texto. |
| DrawSVG | Trim Paths de camada de forma. |
| MorphSVG | Keyframes de máscara/caminho ou interpolação de caminho de forma; garanta que a contagem/ordem de vértices corresponda. |
| MotionPath | Caminho de máscara AE + parenting de caminho de camada, ou keyframes de posição amostrados ao longo de uma Bezier. |
| CustomEase / CustomWiggle / CustomBounce | Curvas do editor de gráficos do AE, valores de suavização temporal ou funções de expressão personalizadas. |
| GSDevTools | Nulls de controle temporários, camadas guia, capturas de frames e relatórios JSX de auditoria. |
Equivalências de Funções Utilitárias
Use utilitários do GSAP como vocabulário matemático em JSX/expressões:
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; }
Usos comuns no AE:
normalize/mapRange: mapeie tempo, amplitude de áudio ou progresso de slider para posição/escala/opacidade.random: gere offsets determinísticos por camada no JSX; evite aleatoriedade não determinística em expressões, a menos que a flutuação seja intencional.snap: máquina de escrever escalonada, movimento com pulo de frame, snapping de grade/cartões.distribute: leques de cartões, staggers de texto, revelações do centro para fora.
Regras de Performance para AE
- Prefira transformações, opacidade, time remap e movimento de câmera/null em vez de efeitos pesados por frame.
- Evite muitas camadas com efeitos caros animando simultaneamente; pré-componha ou converta para keyframes quando o visual estiver aprovado.
- Use expressões para controle e iteração; converta para keyframes quando a expressão se tornar lenta ou frágil.
- O desfoque de movimento melhora a qualidade percebida, mas pode esconder erros de layout; verifique ambos com e sem ele ao diagnosticar.
- Para cartões repetidos, use nulls pai e controladores compartilhados em vez de animar cada propriedade independentemente.
- Mantenha máscaras e mesh warps tão simples quanto o visual permitir. Capture frames exatos após alterar máscaras.
Fluxo de Construção no AE
- Leia
AEMotione a skill oficial do GSAP relevante se o usuário mencionar um conceito do GSAP. - Inspecione a composição/camadas do AE antes de editar. Não infira nomes de camadas.
- Esboce uma especificação de timeline no estilo GSAP com labels, duração, ease, stagger e camadas alvo.
- Converta para uma tabela de implementação do AE.
- Escreva helpers JSX compatíveis com ES3 para keyframes/ease/controladores.
- Aplique uma sequência lógica por script.
- Capture frames exatos ao redor do início, pico de velocidade, parada e retenção final.
- Ajuste valores a partir de evidências visuais e salve.
Não Faça
- Não cole código GSAP de navegador no AE.
- Não use sintaxe JavaScript moderna no ExtendScript.
- Não anime a mesma propriedade do AE em múltiplos rigs não relacionados sem auditar sobreposição.
- Não confie em temporização dispersa no estilo
delaypara seções complexas; use labels/temporização de controlador. - Não mantenha camadas guia/marcadores temporárias visíveis nas renderizações finais, a menos que o usuário as tenha solicitado.