Skills d’animation : Emil Kowalski, GSAP, Lottie

Demandez à un agent d’ajouter « un peu d’animation » : il sort transition-all, fait apparaître chaque section au défilement et oublie prefers-reduced-motion. Les skills d’animation ouverts règlent ce problème chacun à sa façon, avec le goût d’un auteur, l’API d’une bibliothèque ou les tableaux de chorégraphie d’un studio. Pour la plupart des projets, j’installerais motion, de molveau/skills. Il réunit dans un seul guide les skills d’Emil Kowalski, les skills GSAP officiels, le motion-design de LottieFiles, le stageshow de Benji Taylor et les 12 principes de Raphael Salaja, et il ajoute un script de vérification. Si c’est seulement le goût d’Emil Kowalski en animation qui vous intéresse, installez ses skills ; les sections plus bas disent quand chaque original est le meilleur choix.

Les outils en lice

Skill	Auteur	Licence	Sa force	Ses limites
skills	Emil Kowalski	MIT	Décider s’il faut animer, et comment ; revues et audits	Peu de chose sur les animations liées au défilement et sur les bibliothèques
gsap-skills	GreenSock	MIT	Bien se servir de GSAP : interpolations, timelines, ScrollTrigger, nettoyage en React	Ne se demande jamais s’il faut animer
motion-design-skill	LottieFiles	MIT	La chorégraphie, la personnalité et les tableaux de durées	Peu de retenue pour une interface de produit : il aime les couches d’ambiance
stageshow	Benji Taylor	MIT (code)	Les fausses interfaces de produit et les démos animées en React	Rien sur l’animation d’interface au quotidien
12-principles-of-animation	Raphael Salaja	MIT	Auditer le code selon les principes de Disney adaptés au Web	Introuvable à la source : l’auteur l’a retiré
motion	Molveau Studio	MIT	Un seul guide, de la décision d’animer jusqu’à l’audit, avec des garde-fous et un vérificateur	Pas les derniers skills d’Emil ni trois des huit skills GSAP

Chacun, sans parti pris

Les skills d’Emil Kowalski

Si je ne pouvais garder qu’un seul ensemble, je garderais celui d’Emil. animate construit une animation en prenant chaque décision dans l’ordre, parce que c’est cet ordre qui fait qu’elle paraît naturelle ou non, review-animations critique un diff, improve-animations audite une base de code, find-animation-opportunities repère ce qui devrait bouger et écarte le reste, et apple-design couvre les ressorts et les gestes. Son dépôt contient maintenant des skills que je n’intègre pas, comme animate-expo pour React Native et animation-performance. Si vous voulez son goût et rien d’autre, ou si vous développez avec Expo, installez son dépôt.

Les skills GSAP, de GreenSock

Les skills officiels montrent à l’agent comment utiliser l’API GSAP comme GreenSock l’a conçue : les interpolations et les courbes de base, les timelines, l’épinglage et le défilement synchronisé avec ScrollTrigger, le nettoyage avec useGSAP en React, la performance. Mon skill en reprend cinq sur huit (core, react, scrolltrigger, timeline, performance). Si vous utilisez beaucoup Flip, SplitText ou Draggable, ou si vous travaillez en Vue ou en Svelte, installez l’ensemble complet de GreenSock pour ses skills plugins, utils et frameworks.

motion-design-skill, de LottieFiles

LottieFiles a écrit la référence sur la chorégraphie la plus fouillée que j’aie trouvée : des profils de personnalité pour le mouvement, des tableaux de durées et de courbes, une correspondance entre émotions et mouvements, et des modèles pour signaler un changement d’état. Elle fonctionne avec n’importe quel système d’animation. Son goût est plus chargé que le mien (couches d’ambiance, effets de rebond), alors pour un projet de marque ou d’illustration, l’original fait très bien l’affaire tout seul.

stageshow, de Benji Taylor

stageshow aide un agent à construire de fausses interfaces qui ressemblent au vrai produit : images fixes, cartes de fonctionnalités, démos avec curseur et grilles bento, avec une trousse de composants et des outils qui filment le résultat. Ma copie laisse de côté ses illustrations de tiers, ses scripts de tournage et les scènes d’exemple qui reproduisent de vrais produits. Si vous voulez l’étape de tournage et tous les exemples, installez le dépôt de Benji.

Les 12 principes de l’animation, de Raphael Salaja

Ce skill audite le code d’animation selon les douze principes de Disney adaptés au Web et signale chaque problème au format fichier:ligne. Raphael l’a archivé, puis retiré de son dépôt en octobre 2026 : la copie dans mon skill motion est donc figée à sa dernière version publiée. Son dépôt actuel propose un skill motion plus récent, avec ses propres règles maison, qui vaut la lecture si vous aimez sa façon de faire.

Ce que le skill fusionné ajoute

• L’aiguillage. Une seule installation. Le SKILL.md indique quel fichier ouvrir pour chaque tâche : animate d’Emil pour une nouvelle animation, scrolltrigger de GSAP pour un épinglage au défilement, stageshow pour une démo de produit, LottieFiles pour les tableaux de chorégraphie.
• Des copies figées, jamais retouchées, conservées sous references/vendor/, chacune à un commit précis. Chaque semaine, une GitHub Action vérifie les dépôts d’origine et ouvre un ticket quand une source change ; une personne révise chaque mise à jour.
• Un guide qui règle les désaccords. La courbe ease-out : Emil utilise (0.23, 1, 0.32, 1), unslop (0.22, 1, 0.36, 1), LottieFiles (0.2, 0, 0, 1) ; le guide demande une seule variable par projet, et celle d’Emil s’il n’y en a pas. Mouvement réduit : Emil et LottieFiles adoucissent l’animation, GSAP ramène la durée à zéro ; le guide affiche directement l’état final et garde les indicateurs de chargement et la réaction au clic.
• Des garde-fous. Animer seulement transform et opacity, avec une seule variable ease-out, jamais transition-all, aucune apparition au défilement par défaut, et chaque boucle mise en pause hors de l’écran ou quand l’onglet est caché.
• Un vérificateur. check-motion.mjs n’a aucune dépendance et fonctionne avec Node 20. Il signale les bibliothèques d’apparition au défilement, whileInView, transition-all, transform glissé dans des listes de transitions arbitraires, ainsi que les boucles d’animation ou les keyframes dans un fichier qui ne gère pas le mouvement réduit.

Installer

Le skill seul, avec la CLI skills :

npx skills add molveau/skills -s motion

Le lot Design :

npx skills add molveau/skills -s anti-slop -s ui -s ux -s motion -s design-grill -s design-inspiration-index

Dans Claude Code, les onze skills dans un seul plugin :

/plugin marketplace add molveau/skills
/plugin install molveau-skills@molveau

Tous les skills et tous les lots sont sur la page des skills, et le code source est sur github.com/molveau/skills. À lire aussi : les skills anti-slop, les skills d’interface, les skills UX et accessibilité.

Liste de vérification

• Chaque animation a une raison d’être claire, et les actions fréquentes ne s’animent presque jamais.
• Seuls transform et opacity bougent, nommés un par un, avec la variable ease-out du projet.
• En mouvement réduit, l’état final s’affiche directement.
• Les boucles s’arrêtent hors de l’écran et quand l’onglet est caché.
• check-motion.mjs ne trouve rien dans les fichiers modifiés, ou chaque signalement est expliqué.
• S’il vous faut Expo, les plugins GSAP ou le tournage de stageshow, l’original est installé en plus.