itswenxin/ae-gsap-motion

Traduction de mouvement AE GSAP

Utilisez ceci après skills/AEMotion/SKILL.md pour les travaux After Effects qui bénéficient de la grammaire de mouvement GreenSock/GSAP. GSAP lui-même ne fonctionne pas dans AE. Traduisez ses concepts en keyframes, expressions, contrôleurs nuls, animateurs de texte, time remap, masques, caméras et scripts natifs d'AE.

Compétences sources officielles installées localement (ajustez la racine si vos compétences Codex se trouvent ailleurs) :

• $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

Ne lisez que la compétence GSAP officielle pertinente lorsque la sémantique exacte est importante. Gardez les scripts AE compatibles ES3 comme requis par AEMotion.

Traduction Principale

Idée GSAP	Traduction AE
gsap.to(cible, vars)	Garder la valeur actuelle comme début ; définir une keyframe de fin à start + durée.
gsap.from(cible, vars)	Définir explicitement une keyframe de début à partir de vars ; animer vers la valeur actuelle/conçue finale. Éviter le "immediateRender" indésirable en ne remplaçant pas les états ultérieurs stabilisés.
gsap.fromTo(cible, de, à)	Définir explicitement les keyframes de début et de fin. Le meilleur choix pour des constructions AE scriptées fiables.
gsap.set(cible, vars)	Définir la valeur au moment actuel ou créer une keyframe de maintien si une animation ultérieure en dépend.
durée, délai	Convertir les secondes en temps de composition ; pour du 30ips, 1 image = 1/30.
ease	Appliquer un easing temporel sur les keyframes ou utiliser des courbes d'expression. Faire correspondre la sensation, pas le calcul exact du navigateur.
stagger	Décaler les instants de début des calques/keyframes par images ; pour le texte, privilégier les sélecteurs d'animateur de texte ou décomposer les calques de texte.
répéter / yoyo	Utiliser des expressions de boucle, time remap ou des cycles de keyframes dupliqués. Cuire si les expressions deviennent fragiles.
autoAlpha	Keyframes d'opacité ; éventuellement désactiver/activer le calque uniquement pour les coupures franches en dehors des plages visibles.
Valeurs relatives +=, -=	Lire la propriété AE actuelle et ajouter le delta avant d'écrire la nouvelle keyframe.
Valeurs basées sur des fonctions	Utiliser des calculs basés sur l'index en JSX ou des sélecteurs d'expression.
gsap.defaults()	Objet de configuration partagé en JSX, ou contrôleur nul avec des curseurs pour la durée/l'éasing/l'étalement.
matchMedia() / mouvement réduit	Créer des presets d'échelle/curseur alternatifs comme Quantité de Mouvement ; pour un mouvement réduit, utiliser une distance plus courte, une rotation plus faible ou seulement l'opacité.

Grammaire de Timeline

Avant de créer des keyframes AE, rédigez une spécification de timeline compacte :

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
cartes.stagger orientation += [0,18,-8] dur .6 ease power2.inOut each .04 depuis centre

Traduisez-la ensuite en un tableau AE :

Champ	Signification
calque	Nom exact du calque AE ou motif.
propriété	Chemin de propriété AE : Position, Échelle, Orientation, Opacité, Masque, Time Remap, etc.
de/à	Valeurs explicites en unités AE.
début/durée	Secondes ou images.
ease	Nom de style GSAP mappé à l'easing temporel AE.
offset	Temps absolu, label, début précédent <, fin précédente >, ou offset de stagger.
contrôleur	Null/curseur optionnel qui doit piloter les valeurs.

Privilégiez les labels de timeline plutôt que les calculs de délai dispersés. Pour les sections complexes, créez un contrôleur nul par séquence, par exemple CTRL_S06_CARTES, avec des curseurs comme Quantité de Mouvement, Images Stagger, Étalement Profondeur, et Progression.

Mapping d'Easing

Utilisez ces points de départ et ajustez visuellement avec des captures :

Easing GSAP	Sensation AE
none	Interpolation linéaire. À utiliser pour les mouvements pilotés par le scrubbing/la progression.
power1.out	Easing de sortie doux ; faible influence.
power2.out	Easing de sortie UI standard.
power3.out	Départ rapide, atterrissage marqué ; bon pour les cartes et les titres.
power3.inOut	Trajet fluide symétrique ; bon pour la caméra ou les déplacements de groupe.
expo.out	Arrivée très rapide puis atterrissage lent ; à utiliser avec parcimonie.
back.out(1.7)	Ajouter une keyframe de dépassement au-delà de la fin, puis atterrir.
elastic.out()	Utiliser une expression de ressort ou 3-5 keyframes de dépassement amorti.
bounce.out	Utiliser des keyframes d'impact par paliers ; ne pas simuler avec un seul Easy Ease.

Lorsque le timing exact est important, échantillonnez les images autour de la vitesse de pointe et du moment d'atterrissage. L'interpolation des keyframes d'AE ne sera pas numériquement identique à celle de GSAP ; le livrable consiste à faire correspondre la perception du mouvement.

Concepts ScrollTrigger dans AE

AE n'a pas de défilement DOM. Traduisez ScrollTrigger comme un pilote de progression :

Idée ScrollTrigger	Motif AE
trigger/start/end	Plage de labels de timeline ou plage de zone de travail.
scrub: true	Curseur/Null Progression 0..100, Time Remap, ou expression mappant le temps à la progression. Utiliser un easing linéaire.
scrub numérique (latence)	Expression de passe-bas/ressort sur la valeur de progression, ou keyframes dupliquées avec délai.
pin	Maintenir la caméra ou le null parent tout en animant les enfants. Ne pas animer le parent épinglé si les enfants ont besoin d'un mouvement indépendant.
snap	Keyframes de maintien/accrochage ou expression Math.round(progression / pas) * pas.
markers	Calques guides temporaires, labels ou superpositions de texte ; supprimer avant la livraison finale.
containerAnimation	Carrousel horizontal/3D contrôlé par un null maître ou un chemin de caméra ; les éléments imbriqués référencent la même progression.

Pour les bobines "scroll-like" dans AE, pilotez une timeline maîtresse avec CTRL_PROGRESSION et mappez la progression aux cartes, à la profondeur de champ de la caméra, à l'opacité et au flou. Gardez le mouvement de pilotage de la progression linéaire ; n'appliquez l'easing que sur les réponses visuelles imbriquées lorsque cela améliore l'apparence.

Équivalents des Plugins

Plugin GSAP	Équivalent AE
Flip	Enregistrer les première et dernière transformations du calque ; animer par offset inverse ou nulls parents. Utiliser pour les réorganisations de mise en page et les échanges de cartes.
Draggable / Observer	Le rendu AE n'est pas interactif ; représenter les gestes avec des curseurs de contrôleur ou des keyframes enregistrées.
Inertia	Utiliser une expression basée sur la vélocité, une expression de ressort ou des keyframes de dépassement amorti.
SplitText	Utiliser les animateurs de texte AE, les sélecteurs d'expression ou décomposer le texte en calques par mot/par caractère.
ScrambleText	Keyframes de maintien du Texte source, expression de mappage de caractères ou animateur de texte d'opacité/décalage de caractère.
DrawSVG	Trim Paths sur calque de forme.
MorphSVG	Keyframes de masque/chemin ou interpolation de chemin de forme ; s'assurer que le nombre/l'ordre des sommets correspondent.
MotionPath	Chemin de masque AE + parentage de calque, ou keyframes de position échantillonnées le long d'une Bézier.
CustomEase / CustomWiggle / CustomBounce	Courbes de l'éditeur de graphes AE, valeurs d'easing temporel ou fonctions d'expression personnalisées.
GSDevTools	Contrôleurs nuls temporaires, calques guides, captures d'images et rapports d'audit JSX.

Équivalents des Fonctions Utilitaires

Utilisez les utilitaires GSAP comme vocabulaire mathématique en JSX/expressions :

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(pas, v) { return Math.round(v / pas) * pas; }

Utilisations courantes dans AE :

• normalize/mapRange : mapper le temps, l'amplitude audio ou la progression d'un curseur à la position/échelle/opacité.
• random : générer des décalages déterministes par calque en JSX ; éviter le caractère aléatoire non déterministe dans les expressions sauf si le jitter est intentionnel.
• snap : machine à écrire par paliers, mouvement avec saut d'images, accrochage de grille/cartes.
• distribute : éventails de cartes, staggers de texte, dévoilements depuis le centre.

Règles de Performance pour AE

• Privilégier les transformations, l'opacité, le time remap et le mouvement de caméra/null plutôt que les effets lourds par image.
• Éviter d'avoir de nombreux calques avec des effets coûteux qui animent tous en même temps ; précomposer ou cuire lorsque le look est approuvé.
• Utiliser des expressions pour le contrôle et l'itération ; cuire en keyframes lorsque l'expression devient lente ou fragile.
• Le flou de mouvement améliore la qualité perçue mais peut masquer les erreurs de mise en page ; vérifier avec et sans lors du diagnostic.
• Pour les cartes répétées, utiliser des nulls parents et des contrôleurs partagés plutôt que de keyframer indépendamment chaque propriété.
• Garder les masques et les déformations de maillage aussi simples que le visuel le permet. Capturer les images exactes après avoir modifié les masques.

Flux de Travail de Construction AE

1. Lire AEMotion et la compétence GSAP officielle pertinente si l'utilisateur nomme un concept GSAP.
2. Inspecter la comp et les calques AE avant de modifier. Ne pas déduire les noms de calque.
3. Rédiger une spécification de timeline de style GSAP avec des labels, une durée, un easing, un stagger et des calques cibles.
4. Convertir en tableau d'implémentation AE.
5. Écrire des helpers JSX compatibles ES3 pour les keyframes/easing/contrôleurs.
6. Appliquer une séquence logique par script.
7. Capturer les images exactes autour du début, de la vitesse de pointe, de l'atterrissage et du maintien final.
8. Ajuster les valeurs à partir de preuves visuelles, puis enregistrer.

À NE PAS FAIRE

• Ne pas coller de code GSAP de navigateur dans AE.
• Ne pas utiliser de syntaxe JavaScript moderne dans ExtendScript.
• Ne pas animer la même propriété AE dans plusieurs rigs non liés sans vérifier le chevauchement.
• Ne pas compter sur un timing dispersé de style délai pour les sections complexes ; utiliser des labels/un timing de contrôleur.
• Ne pas laisser de calques guides/marqueurs temporaires visibles dans les rendus finaux sauf si l'utilisateur les a demandés.