¿Qué hace AE GSAP Motion Translation?
Úsalo después de skills/AEMotion/SKILL.md para trabajos en After Effects que se beneficien de la gramática de movimiento de GreenSock/GSAP. GSAP en sí no se ejecuta en AE. Traduce sus conceptos a fotogramas clave nativos de AE, expresiones, nulls de control, animadores de texto, remapeo de tiempo, máscaras, cámaras y scripts.
Fuentes de skills oficiales instaladas localmente (ajusta la raíz si tus skills de Codex viven en otro lugar):
$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
Lee solo el skill oficial de GSAP relevante cuando la semántica exacta importe. Mantén los scripts de AE seguros para ES3 según lo requiere AEMotion.
Traducción Central
| Idea GSAP | Traducción AE |
|---|---|
gsap.to(target, vars) | Mantener el valor actual como inicio; establecer fotograma clave final en inicio + duración. |
gsap.from(target, vars) | Establecer un fotograma clave de inicio explícito desde vars; animar al valor actual/final diseñado. Evitar "immediateRender" no deseado sobrescribiendo estados posteriores ya establecidos. |
gsap.fromTo(target, from, to) | Establecer fotogramas clave de inicio y fin explícitamente. Mejor para construcciones fiables de AE mediante script. |
gsap.set(target, vars) | Establecer el valor en el tiempo actual o crear un fotograma clave de mantenimiento si una animación posterior depende de él. |
duration, delay | Convertir segundos a tiempo de composición; para 30fps, 1 fotograma = 1/30. |
ease | Aplicar ease temporal en fotogramas clave o usar curvas de expresión. Igualar la sensación, no la matemática exacta del navegador. |
stagger | Desfasar los tiempos de inicio de capas/fotogramas clave por fotogramas; para texto, preferir Selectores de Animador de Texto o capas Decompose Text. |
repeat / yoyo | Usar expresiones de bucle, remapeo de tiempo, o ciclos de fotogramas clave duplicados. Hornear si las expresiones se vuelven frágiles. |
autoAlpha | Fotogramas clave de opacidad; opcionalmente deshabilitar/habilitar capa solo para cortes bruscos fuera de rangos visibles. |
Valores relativos +=, -= | Leer la propiedad actual de AE y añadir el delta antes de escribir el nuevo fotograma clave. |
| Valores basados en funciones | Usar cálculos basados en índice en JSX o selectores de expresión. |
gsap.defaults() | Objeto de configuración compartido en JSX, o null de control con deslizadores para duración/ease/difusión. |
matchMedia() / reduced motion | Crear ajustes alternativos de escala/deslizador como Motion Amount; para movimiento reducido usar distancia más corta, menor rotación, o solo opacidad. |
Gramática de Timeline
Antes de crear fotogramas clave en AE, escribe una especificación de timeline compacta:
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
Luego tradúcela a una tabla de AE:
| Campo | Significado |
|---|---|
| layer | Nombre exacto de la capa en AE o patrón. |
| property | Ruta de propiedad en AE: Posición, Escala, Orientación, Opacidad, Trayecto de Máscara, Remapeo de Tiempo, etc. |
| from/to | Valores explícitos en unidades de AE. |
| start/duration | Segundos o fotogramas. |
| ease | Nombre estilo GSAP mapeado a ease temporal de AE. |
| offset | Tiempo absoluto, etiqueta, inicio anterior <, fin anterior >, o desfase de stagger. |
| controller | Null/deslizador opcional que debería controlar los valores. |
Prefiere etiquetas de timeline sobre matemáticas de retraso dispersas. Para secciones complejas, crea un null de control por secuencia, ej. CTRL_S06_CARDS, con deslizadores como Motion Amount, Stagger Frames, Depth Spread, y Progress.
Mapeo de Ease
Úsalos como puntos de partida y ajusta visualmente con capturas:
| Ease GSAP | Sensación AE |
|---|---|
none | Interpolación lineal. Usar para movimiento impulsado por scrub/progreso. |
power1.out | Ease out suave; baja influencia. |
power2.out | Ease out estándar de interfaz de usuario. |
power3.out | Inicio rápido, asentamiento fuerte; bueno para tarjetas y títulos. |
power3.inOut | Recorrido simétrico suave; bueno para cámara o movimientos de grupo. |
expo.out | Llegada muy rápida luego asentamiento lento; usar con moderación. |
back.out(1.7) | Añadir un fotograma clave de sobrepaso más allá del final, luego asentar. |
elastic.out() | Usar resorte de expresión o 3-5 fotogramas clave de sobrepaso decrecientes. |
bounce.out | Usar fotogramas clave de impacto escalonados; no fingir con un solo Easy Ease. |
Cuando el tiempo exacto importe, muestra fotogramas alrededor del pico de velocidad y el momento de aterrizaje. La interpolación de fotogramas clave de AE no será numéricamente idéntica a GSAP; el entregable es igualar la percepción del movimiento.
Conceptos de ScrollTrigger en AE
AE no tiene scroll en DOM. Traduce ScrollTrigger como un controlador de progreso:
| Idea ScrollTrigger | Patrón AE |
|---|---|
trigger/start/end | Rango de etiquetas de timeline o rango del área de trabajo. |
scrub: true | Deslizador/Null Progress 0..100, Remapeo de Tiempo, o expresión que mapea tiempo a progreso. Usar ease lineal. |
scrub numérico (retraso) | Expresión de paso bajo/resorte en el valor de progreso, o fotogramas clave duplicados con retraso. |
pin | Mantener la cámara o el null padre mientras se animan los hijos. No animar el padre fijado si los hijos necesitan movimiento independiente. |
snap | Fotogramas clave de mantenimiento/snap o expresión Math.round(progreso / paso) * paso. |
markers | Capas guía temporales, etiquetas o superposiciones de texto; eliminar antes de la entrega final. |
containerAnimation | Carrusel horizontal/3D controlado por un null maestro o trayectoria de cámara; los elementos anidados referencian el mismo progreso. |
Para bobinas "tipo scroll" en AE, controla un timeline maestro con CTRL_PROGRESS y mapea el progreso a tarjetas, Z de cámara, opacidad y desenfoque. Mantén el movimiento que impulsa el progreso lineal; pon el ease solo en las respuestas visuales anidadas cuando mejore el aspecto.
Equivalentes de Patrones de Plugins
| Plugin GSAP | Equivalente AE |
|---|---|
| Flip | Registrar primera y última transformación de capa; animar a través de desplazamiento inverso o nulls padre. Usar para reordenaciones de diseño e intercambios de tarjetas. |
| Draggable / Observer | El renderizado de AE no es interactivo; representar gestos con deslizadores de control o fotogramas clave grabados. |
| Inertia | Usar expresión basada en velocidad, expresión de resorte, o fotogramas clave de sobrepaso decrecientes. |
| SplitText | Usar Animadores de Texto de AE, Selectores de Expresión, o Descomponer Texto en capas por palabra/carácter. |
| ScrambleText | Fotogramas clave de mantenimiento en Texto Fuente, expresión de mapa de caracteres, o animador de texto de opacidad/desplazamiento de caracteres. |
| DrawSVG | Recortes de Trayecto en capas de forma. |
| MorphSVG | Fotogramas clave de máscara/trayecto o interpolación de trayecto de forma; asegurar que el conteo de vértices/orden coincida. |
| MotionPath | Trayecto de máscara AE + parenting de trayecto de capa, o fotogramas clave de posición muestreados a lo largo de una Bezier. |
| CustomEase / CustomWiggle / CustomBounce | Curvas del editor de gráficos AE, valores de ease temporales, o funciones de expresión personalizadas. |
| GSDevTools | Nulls de control temporales, capas guía, capturas de fotogramas e informes de auditoría JSX. |
Equivalentes de Funciones de Utilidad
Usa las utilidades de GSAP como vocabulario matemático en JSX/expresiones:
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 comunes en AE:
normalize/mapRange: mapear tiempo, amplitud de audio o progreso de deslizador a posición/escala/opacidad.random: generar desplazamientos deterministicos por capa en JSX; evitar aleatoriedad no determinista en expresiones a menos que la vibración sea intencional.snap: máquina de escribir escalonada, movimiento con saltos de fotogramas, snap de cuadrícula/tarjetas.distribute: abanicos de tarjetas, staggers de texto, revelaciones de centro hacia afuera.
Reglas de Rendimiento para AE
- Preferir transformaciones, opacidad, remapeo de tiempo y movimiento de cámara/null sobre efectos pesados por fotograma.
- Evitar muchas capas con efectos costosos animando a la vez; recomponer u hornear cuando el aspecto esté aprobado.
- Usar expresiones para control e iteración; hornear a fotogramas clave cuando la expresión se vuelva lenta o frágil.
- El desenfoque de movimiento mejora la calidad percibida pero puede ocultar errores de diseño; verificar tanto con como sin él al diagnosticar.
- Para tarjetas repetidas, usar nulls padre y controladores compartidos en lugar de animar cada propiedad de forma independiente.
- Mantener máscaras y deformaciones de malla tan simples como el visual lo permita. Capturar fotogramas exactos después de cambiar máscaras.
Flujo de Trabajo de Construcción en AE
- Leer
AEMotiony el skill oficial relevante de GSAP si el usuario nombra un concepto GSAP. - Inspeccionar la composición/capas de AE antes de editar. No inferir nombres de capa.
- Redactar una especificación de timeline estilo GSAP con etiquetas, duración, ease, stagger y capas objetivo.
- Convertir a tabla de implementación de AE.
- Escribir ayudantes JSX seguros para ES3 para fotogramas clave/ease/controladores.
- Aplicar una secuencia lógica por script.
- Capturar fotogramas exactos alrededor del inicio, pico de velocidad, aterrizaje y mantenimiento final.
- Ajustar valores a partir de evidencia visual, luego guardar.
No Hacer
- No pegar código GSAP de navegador en AE.
- No usar sintaxis moderna de JavaScript en ExtendScript.
- No animar la misma propiedad de AE en múltiples rigs no relacionados sin auditar superposiciones.
- No depender de temporización dispersa estilo
delaypara secciones complejas; usar etiquetas/temporización de controladores. - No mantener capas guía/marcadores temporales visibles en los renders finales a menos que el usuario lo haya solicitado.