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

GSAP Plugins Skill.

Un skill Claude Code et Codex pour le mouvement et la vidéo : plugins gSAP : ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG et physique.

  • Mouvement et vidéo
  • Code UI
Télécharger OpenDesignVoir le guide d'utilisation
greensock/gsap-skills · skills/gsap-plugins/SKILL.mdSKILL.md
--- name: gsap-plugins description: Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration. --- ## When to Use This Skill ## Licensing & Install (important) ## Registering Plugins ## Scroll ## DOM / UI ## Text
En-tête et titres de section lus depuis le fichier source le 2026-09-14 · 21 477 caractères au total

01 Ce qu'il fait

Ce Que Fait le Skill gsap-plugins 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

Skill officiel GSAP couvrant l'enregistrement des plugins et tous les plugins hors ScrollTrigger : ScrollTo, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath, CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, PixiPlugin et GSDevTools.

Il commence par le licensing — chaque plugin est gratuit, sans abonnement Club GSAP ni token d'authentification — puis donne une configuration par plugin : vars de Flip.from, options de Draggable, vars de SplitText.create, options de morphSVG, alignement de motionPath. Destiné aux designers et développeurs qui installent tout depuis le package npm public gsap et ont besoin de l'ordre d'appel correct, des valeurs par défaut et des mises en garde. Skills associés : gsap-core, gsap-scrolltrigger, gsap-react.

Ce qu'il produit

  • Un tween de scroll qui anime la fenêtre ou tout élément défilable vers une position ou une cible.
  • Une instance SplitText exposant chars, words et lines, et, quand mask est défini, masks.
  • Un élément path converti et substitué dans le DOM à la place d'un circle, rect, ellipse ou line.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Enregistrer les Plugins Une Fois, en Amont

    Chaque plugin est enregistré une seule fois afin que GSAP et les bundlers sachent l'inclure, avant qu'il ne soit utilisé dans un tween ou un appel d'API.

  2. 02
    Capturer, Modifier, Puis Animer avec Flip

    Flip est une séquence en trois temps : lire l'ancien état, muter le DOM, puis animer de l'état enregistré vers le nouvel état.

  3. 03
    Créer des Interactions de Glissement et de Lancer

    Draggable.create prend un type, des bounds optionnels et l'inertie ; InertiaPlugin fournit le momentum après le relâchement.

  4. 04
    Découper le Texte en Unités Animables

    SplitText place chaque caractère, mot et/ou ligne dans son propre élément afin qu'ils puissent être échelonnés ou animés par unité.

  5. 05
    Dessiner ou Transformer un SVG

    Les plugins SVG animent les valeurs de stroke dash pour des effets de dessin, ou l'attribut d du path pour transformer une forme en une autre.

  6. 06
    Recourir aux Plugins d'Easing et de Physique

    Les plugins d'easing ajoutent des courbes personnalisées ou des eases nommés ; les plugins physiques pilotent le mouvement à partir de valeurs de vitesse, d'angle et de gravité.

02 Trouvez celui qui vous convient

Quand Utiliser le Skill gsap-plugins

Utilisez le skill gsap-plugins dans Claude Code ou Codex lorsque la tâche concerne le motion et la vidéo de ce type. La portée et les limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

  • Défilement vers un élément ou une position en pixels lorsque ScrollTrigger n'est pas impliqué.
  • Animation entre deux états de mise en page, comme des listes réordonnées, des grilles, ou des panneaux dépliés et repliés.
  • Curseurs, cartes et listes réordonnables nécessitant un comportement de glissement, de rotation ou de lancer à la souris et au toucher.
  • Révélations de texte animées par caractère, par mot ou par ligne.
  • Morphing d'icône à icône, transitions de formes et autres animations SVG basées sur les tracés.

Connaître les limites

  • SplitText ne peut pas diviser les éléments de texte SVG.
  • DrawSVG n'anime que le trait, jamais le remplissage, et ne peut pas modifier visuellement le contenu d'un élément use.
  • Le travail sur ScrollTrigger relève d'un skill séparé, pas de celui-ci.
  • Un texte utilisant text-wrap: balance s'accorde mal avec la division.

Quoi fournir

  • La liste des plugins à enregistrerChaque plugin utilisé dans le projet doit être nommé dans un seul appel gsap.registerPlugin afin que les bundlers l'incluent.
  • La structure DOM de ScrollSmootherScrollSmoother nécessite ScrollTrigger ainsi qu'un wrapper de contenu à l'intérieur d'un wrapper smooth, avec des éléments en position fixe autorisés à l'extérieur.
  • Une cible pour SplitTextSplitText.create prend un sélecteur, un élément ou un tableau comme cible, en plus des vars de division.
  • Une forme pour MorphSVGLa propriété shape requise accepte un sélecteur, un élément, ou une chaîne de tracé brute comme destination du morphing.
  • Polices et mise en page déjà chargéesPour les polices personnalisées, effectuez la division après leur chargement ou reposez-vous sur autoSplit avec onSplit pour que les redivisions surviennent au bon moment.

03 Dans le skill

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

8 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. Enregistrez Avant d'Animer

    Un plugin doit être enregistré avant d'être utilisé dans un tween ou un appel d'API — l'enregistrement est la première étape, pas une correction pour un échec.

  2. Installez depuis le Package Gsap Public

    Tout est livré avec npm install gsap et importé sous forme de gsap/SplitText, gsap/MorphSVGPlugin, etc.

  3. Ne Générez Jamais un .npmrc avec Auth-Token

    Ne créez pas de .npmrc avec un jeton d'authentification GreenSock, ne pointez pas vers le registre privé npm.greensock.com, et ne dites pas aux utilisateurs de rejoindre Club GSAP pour un plugin.

  4. Enregistrez au Niveau Racine en React

    Enregistrez une seule fois dans l'application, par exemple avant le premier appel useGSAP — jamais à l'intérieur d'un composant qui se re-rend, et useGSAP lui-même doit être enregistré avant utilisation.

  5. Divisez Uniquement Ce Que Vous Animez

    Divisez ce qui est nécessaire pour la performance, par exemple les mots et les caractères lorsque les lignes ne sont pas utilisées ; la division en caractères seuls nécessite smartWrap pour éviter des retours à la ligne inhabituels.

  6. Construire les animations autoSplit à l'intérieur de onSplit

    Lorsque autoSplit est à true, les animations doivent être créées à l'intérieur de onSplit pour cibler les éléments nouvellement divisés, et retournées depuis onSplit afin que SplitText puisse les annuler et les synchroniser dans le temps.

  7. Donner à DrawSVG quelque chose à dessiner

    L'élément doit avoir un contour visible défini via stroke et stroke-width en CSS ou comme attributs SVG, sinon rien n'est dessiné.

  8. Garder les plugins réservés au développement hors production

    GSDevTools sert au débogage pendant le développement et ne doit pas être livré, et les autres plugins réservés au développement suivent la même règle.

04 Mettez-le en pratique

Installer gsap-plugins 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-plugins à 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-plugins

Forme générique de la CLI skills pour skills/gsap-plugins/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
I'm building a filterable gallery in [framework]. Capture the state with Flip.getState() before the filter changes the DOM, then animate with Flip.from() using duration 0.5 and ease power2.inOut. Also make each card draggable inside [container selector] with inertia true so it throws when released, and register every plugin I use up front. Split the card captions into words and chars so I can stagger them.

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 :

  • Annulez les instances de plugin telles que SplitTextInstance.revert() lorsque les composants sont démontés ou que les éléments sont supprimés.
  • Exécutez shapeIndex: "log" une fois pour lire la valeur calculée automatiquement, puis collez ce nombre ou ce tableau dans le tween.
  • Mesurez le contour avec DrawSVGPlugin.getLength(element) et DrawSVGPlugin.getPosition(element).
  • Réglez MotionPath visuellement dans MotionPathHelper, puis lisez helper.path ou helper.getProgress() dans l'animation.
  • Contrôlez et basculez les animations avec GSDevTools pendant le développement.

Dans OpenDesign gsap-plugins 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-plugins/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 2026-09-14 pour l'ensemble du dépôt greensock/gsap-skills, qui contient 8 skills dans ce catalogue. Ce n'est pas une note ou un compteur d'utilisation pour gsap-plugins.
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 skillListe les scénarios d'utilisation des plugins et renvoie vers les skills gsap-core, gsap-scrolltrigger et gsap-react associés.
  2. Licence & installation (important)Précise que chaque plugin est gratuit et interdit les jetons d'authentification .npmrc ou les conseils d'inscription à Club GSAP.
  3. Enregistrement des pluginsEnregistrez les plugins une seule fois avec gsap.registerPlugin avant tout tween, y compris en React.
  4. DéfilementTable de configuration de ScrollToPlugin et structure DOM du wrapper ScrollSmoother.
  5. DOM / UICapture d'état Flip et variables from, options Draggable, suivi Inertia, gestes Observer.
  6. TexteTable des vars de SplitText.create avec conseils et pièges, ainsi que l'effet glitch ScrambleText
Description du skill lui-même
« Skill GSAP officiel pour les plugins GSAP — enregistrement, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, plugins SVG et physique, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. À utiliser lorsque l'utilisateur pose des questions sur un plugin GSAP, scroll-to, animations flip, draggable, dessin SVG ou enregistrement de plugin. »

Description du front-matter depuis SKILL.md. Le fichier complet fait environ 21 477 caractères. Lire le fichier complet sur GitHub.

Plugins GSAP

Exécuter gsap-plugins sur une vraie tâche Motion and Video

Le skill gsap-plugins est inclus dans OpenDesign. Téléchargez l'application, sélectionnez 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-plugins