83.3K+Télécharger
Aller au guide d’utilisation
gsap-performancepar GreenSock

GSAP Performance Skill.

Un skill Claude Code et Codex pour le motion et la vidéo : performance GSAP : transforms, éviter le layout thrash, will-change, batching.

  • Mouvement et vidéo
  • Code UI
Télécharger OpenDesignVoir le guide d'utilisation
greensock/gsap-skills · skills/gsap-performance/SKILL.mdSKILL.md
--- name: gsap-performance description: Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps. --- ## When to Use This Skill ## Prefer Transform and Opacity ## will-change ## Batch Reads and Writes ## Many Elements (Stagger, Lists) ## Frequently updated properties (e.g. mouse followers)
En-tête et titres de section lus depuis le fichier d'origine le 14/09/2026 · 4 105 caractères au total

01 Ce qu'il fait

Ce que fait le skill gsap-performance dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Conseils officiels de GSAP pour maintenir des animations fluides à 60 fps en choisissant des propriétés peu coûteuses et en évitant le travail de mise en page. Il indique d'animer les clés transform (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) et opacity plutôt que width, height, top, left, margin ou padding, de placer will-change dans le CSS uniquement sur les éléments qui s'animent réellement, et d'effectuer toutes les lectures du DOM avant les écritures pour éviter les recalculs de mise en page en cascade.

Les conseils sur le regroupement couvrent le stagger par rapport aux tweens à délai manuel, la virtualisation pour les longues listes, gsap.quickTo() pour les suiveurs de souris, l'ajustement du pin et du scrub avec un ScrollTrigger.refresh() à debounce, et l'arrêt des tweens hors écran. Cela s'adresse aux designers et développeurs qui ajustent des animations GSAP existantes, pas à ceux qui les créent.

Ce qu'il produit

  • Une déclaration will-change à ajouter au CSS de l'élément animé.
  • Une configuration gsap.quickTo() pour x et y, pilotée par un écouteur mousemove sur un conteneur.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Animer des propriétés compatibles avec le compositeur

    Limiter l'animation aux clés transform et à opacity, qui conservent le travail sur le compositeur au lieu de déclencher la mise en page et le rendu.

  2. 02
    Laisser GSAP regrouper les écritures

    GSAP regroupe déjà les mises à jour en interne, donc le risque vient de votre propre code DOM qui entrelace lectures et écritures autour de lui.

  3. 03
    Réutiliser un seul tween pour les valeurs à haute fréquence

    Pour les propriétés mises à jour à chaque déplacement du pointeur, gsap.quickTo() maintient un seul tween actif au lieu d'en allouer un nouveau à chaque mise à jour.

  4. 04
    Maîtriser le travail piloté par le défilement

    Une petite valeur de scrub, comme scrub: 1, peut réduire le travail effectué pendant le défilement, mais le fichier indique de tester ce réglage sur des appareils bas de gamme.

  5. 05
    Arrêter les animations que vous ne voyez pas

    Mettre en pause ou arrêter les animations hors écran et inactives, par exemple lorsque l'utilisateur quitte la section.

02 Trouvez celui qui vous convient

Quand utiliser le Skill gsap-performance

Utilisez la compétence gsap-performance dans Claude Code ou Codex lorsque la tâche est de type mouvement et vidéo. L'adéquation et les limites ci-dessous sont tirées du fichier propre de la compétence.

Bon choix

  • Une animation GSAP existante perd des images et vous souhaitez réduire son coût de mise en page et de rendu.
  • Quelqu'un pose une question sur le jank, les FPS ou les bonnes pratiques pour des animations rapides dans un projet GSAP.
  • Vous animez une longue liste et avez besoin de conseils sur la virtualisation et l'évitement de centaines de tweens simultanés.
  • Une section de défilement épingle un élément et vous devez limiter ce qui est promu.

Connaître les limites

  • Définir will-change ou force3D sur tout par précaution est explicitement incorrect ; ces propriétés sont réservées aux éléments qui s'animent réellement.
  • Des centaines de tweens ou de ScrollTriggers qui se superposent sont considérés comme une anti-pratique lorsqu'ils n'ont pas été testés sur des appareils bas de gamme.

Quoi fournir

  • Les propriétés que votre animation modifie actuellementVous devez savoir ce qui est animé pour juger si transform et opacity peuvent remplacer des propriétés coûteuses en mise en page.

03 Dans le skill

Règles que le skill gsap-performance donne à Claude Code et Codex

7 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Éviter les propriétés déclenchant la mise en page

    width, height, top, left, margin et padding déclenchent la mise en page et peuvent provoquer des saccades (jank), donc évitez-les lorsqu'une transform produit le même effet.

  2. Se déplacer avec X et Y, pas avec Left et Top

    Les propriétés x et y de GSAP sont des transforms (translate) par défaut, donc utilisez-les plutôt que left ou top pour le mouvement.

  3. will-change uniquement là où quelque chose s'anime

    Définissez will-change en CSS sur les éléments qui vont s'animer ; cela indique au navigateur de promouvoir le calque, donc cela ne doit concerner que les éléments animés.

  4. Stagger plutôt que des délais manuels

    Lorsque l'animation est identique sur plusieurs éléments, utilisez stagger plutôt que de nombreux tweens séparés avec des délais écrits à la main.

  5. Ne jamais créer de timelines par frame

    Réutilisez les timelines ; créer de nouvelles timelines à chaque frame est signalé comme gaspillage de ressources.

  6. Rafraîchir ScrollTrigger uniquement lors de véritables changements de mise en page

    Appelez ScrollTrigger.refresh() lorsque la mise en page change réellement, par exemple après le chargement du contenu, pas à chaque redimensionnement, et limitez la fréquence (debounce) lorsque possible.

  7. Nettoyez ce que vous démarrez

    Nettoyez ou arrêtez les animations hors écran et rafraîchissez ScrollTrigger lorsque la mise en page change, avec debounce lorsque possible, afin que rien ne continue à s'exécuter une fois inutile.

04 Mettez-le en pratique

Installer gsap-performance dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter gsap-performance à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance

Forme générique de la CLI skills pour skills/gsap-performance/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de motion et vidéo

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt
Here is my [product landing page] with a GSAP intro and a pinned ScrollTrigger section, and it drops frames on an [older Android phone]. Go through the animation and tell me which properties I should swap for transforms, which elements genuinely need will-change, and whether my ScrollTrigger.refresh() calls fire more often than the layout actually changes. I also have a [custom cursor] that follows the pointer and feels heavy.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Repérez les lectures et écritures DOM qui s'entremêlent, car cela provoque un thrashing répété de la mise en page ; toutes les lectures doivent venir en premier.
  • Vérifiez qu'il ne reste rien en cours d'exécution : des tweens et ScrollTriggers orphelins continuent de tourner et nuisent aux performances et à la correction.
  • Vérifiez que les propriétés que vous animez restent limitées à transform et opacity, afin que le navigateur ne fasse que du travail de composition.

Dans OpenDesign gsap-performance est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Branche main
Fichier du skill
skills/gsap-performance/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit aed9cfd
License
MIT D'après LICENSE ; SKILL.md indique « MIT ».
Étoiles du dépôt
15 248 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt greensock/gsap-skills, qui contient 8 skills dans ce catalogue. Ce n'est pas une note ni un compteur d'utilisation pour gsap-performance.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. Quand utiliser ce skillÀ appliquer lors de l'optimisation des animations GSAP pour 60fps ou pour éviter le jank ; renvoie vers des skills associés.
  2. Privilégier transform et opacityAnimez les propriétés transform et opacity ; évitez les propriétés de mise en page ; préférez x et y à left et top.
  3. will-changeAjoutez will-change en CSS sur les éléments qui vont s'animer pour suggérer la promotion de calque.
  4. Regrouper lectures et écrituresGSAP regroupe les écritures ; effectuez toutes les lectures DOM avant les écritures pour éviter le thrashing.
  5. Nombreux éléments (stagger, listes)Stagger surpasse les délais manuels ; virtualisez les longues listes ; réutilisez les timelines plutôt que d'en créer de nouvelles.
  6. Propriétés mises à jour fréquemment (ex. : suiveurs de souris)Utilisez gsap.quickTo avec un gestionnaire mousemove pour les valeurs x et y mises à jour souvent.
  7. ScrollTrigger et performanceÉpinglez seulement ce qui est nécessaire, essayez une petite valeur de scrub, actualisez uniquement lors d'un changement de mise en page.
  8. Réduisez le travail simultanéMettez en pause ou arrêtez les animations hors écran ; simplifiez ou séquencez les animations de propriétés lourdes.
  9. Bonnes pratiquesListe de contrôle en quatre points : transform et opacity, will-change ciblé, stagger, nettoyage et actualisation.
  10. À ne pas faireAnti-patterns : propriétés de mise en page pour le mouvement, will-change ou force3D généralisés, volume non testé, nettoyage ignoré.
Description du skill lui-même
« Skill GSAP officiel pour la performance — privilégier les transformations, éviter le thrashing de mise en page, will-change, regroupement. À utiliser lors de l'optimisation d'animations GSAP, de la réduction du jank, ou lorsque l'utilisateur pose des questions sur les performances d'animation, les FPS ou un 60fps fluide. »

Description en en-tête du SKILL.md. Le fichier complet fait environ 4 105 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill gsap-performance

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Dois-je l'utiliser à la place de gsap-core ?

Non. Ce skill est la couche de performance au-dessus du travail GSAP habituel : les animations sont construites avec gsap-core (transforms, autoAlpha) et gsap-timeline, et les détails de performance de ScrollTrigger se trouvent dans gsap-scrolltrigger.

Comment dois-je construire un curseur suiveur ?

Utilisez gsap.quickTo() pour les valeurs x et y avec une durée et un ease, puis appelez les fonctions renvoyées depuis un écouteur mousemove. Cela réutilise un seul tween plutôt que d'en créer un nouveau à chaque mise à jour.

GSAP Performance

Exécuter gsap-performance sur une vraie tâche Motion et Vidéo.

Le skill gsap-performance est inclus dans OpenDesign. Téléchargez l'application, choisissez le skill dans Plugins → Skills, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance