83.3K+Scarica
Vai alla guida all’uso
gsap-pluginsdi GreenSock

GSAP Plugins Skill.

Una skill per Claude Code e Codex dedicata a motion e video: plugin gSAP – ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG e fisica.

  • Motion e video
  • Codice UI
Scarica OpenDesignGuida all'uso
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
Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 21.477 caratteri in totale

01 Cosa fa

Cosa Fa la Skill gsap-plugins in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Skill ufficiale GSAP che copre la registrazione dei plugin e tutti i plugin al di fuori di ScrollTrigger: ScrollTo, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath, CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, PixiPlugin e GSDevTools.

Si apre con la licenza — ogni plugin è gratuito, senza abbonamento Club GSAP o token di autenticazione — poi fornisce la configurazione per ciascun plugin: vars di Flip.from, opzioni di Draggable, vars di SplitText.create, opzioni di morphSVG, allineamento di motionPath. Pensata per designer e sviluppatori che installano tutto dal package npm pubblico gsap e hanno bisogno dell'ordine di chiamata corretto, dei default e delle avvertenze. Skill correlate: gsap-core, gsap-scrolltrigger, gsap-react.

Che cosa produce

  • Un tween di scroll che anima la finestra o qualsiasi elemento scrollabile verso una posizione o un target.
  • Un'istanza SplitText che esporta chars, words e lines e, quando mask è impostato, masks.
  • Un elemento path convertito e sostituito nel DOM al posto di un circle, rect, ellipse o line.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Registra i Plugin una Volta, in Anticipo

    Ogni plugin viene registrato una sola volta in modo che GSAP e i bundler sappiano di doverlo includere, prima che venga usato in qualsiasi tween o chiamata API.

  2. 02
    Cattura, Cambia, poi Anima con Flip

    Flip è una sequenza in tre battute: leggi lo stato precedente, modifica il DOM, poi anima dallo stato registrato al nuovo.

  3. 03
    Crea Interazioni di Drag e Throw

    Draggable.create richiede un type, bounds opzionali e inertia; InertiaPlugin fornisce lo slancio dopo il rilascio.

  4. 04
    Suddividi il Testo in Unità Animabili

    SplitText inserisce caratteri, parole e/o righe ciascuno in un proprio elemento così possono essere sottoposti a stagger o animati per unità.

  5. 05
    Disegna o Trasforma SVG (Morph)

    I plugin SVG animano i valori dello stroke dash per effetti di disegno, oppure l'attributo d del path per trasformare una forma in un'altra.

  6. 06
    Ricorri ai Plugin di Easing e Fisica

    I plugin di easing aggiungono curve personalizzate o easing con nome; i plugin di fisica guidano il movimento in base a velocità, angolo e valori di gravità.

02 Trova la tua applicazione

Quando Usare la Skill gsap-plugins

Usa la skill gsap-plugins in Claude Code o Codex quando il task è motion e video di questo tipo. Idoneità e limiti qui sotto sono presi dal file della skill stessa.

Buona applicazione

  • Scorrere fino a un elemento o a una posizione in pixel quando ScrollTrigger non è coinvolto.
  • Animare tra due stati di layout, come elenchi riordinati, griglie o pannelli espansi e compressi.
  • Slider, card ed elenchi riordinabili che richiedono comportamenti di trascinamento, rotazione o lancio con mouse e touch.
  • Rivelazioni di testo animate per carattere, per parola o per riga.
  • Trasformazioni da icona a icona, transizioni di forma e altre animazioni SVG basate su path.

Conosci i limiti

  • SplitText non può suddividere elementi di testo SVG.
  • DrawSVG anima solo lo stroke, mai il fill, e non può modificare visivamente il contenuto di un elemento use.
  • Il lavoro con ScrollTrigger appartiene a una skill separata, non a questa.
  • Il testo che usa text-wrap: balance si comporta male con la suddivisione.

Cosa fornire

  • L'elenco dei plugin da registrareOgni plugin usato nel progetto deve essere indicato in una singola chiamata gsap.registerPlugin, così i bundler lo includono.
  • La struttura DOM di ScrollSmootherScrollSmoother richiede ScrollTrigger più un wrapper di contenuto all'interno di uno smooth wrapper, con elementi a posizione fissa consentiti all'esterno.
  • Un target per SplitTextSplitText.create accetta un selettore, un elemento o un array come target, insieme alle vars di split.
  • Una forma per MorphSVGLa proprietà shape, obbligatoria, accetta un selettore, un elemento o una stringa di path grezza come destinazione del morph.
  • Font e layout già caricatiPer i font personalizzati, eseguire lo split dopo il loro caricamento oppure affidarsi ad autoSplit con onSplit, in modo che i re-split avvengano al momento giusto.

03 Dentro la skill

Regole che la skill gsap-plugins Impartisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

  1. Registrare Prima di Animare

    Un plugin deve essere registrato prima di essere usato in qualsiasi tween o chiamata API — la registrazione è il primo passo, non un rimedio per un errore.

  2. Installare dal Package Gsap Pubblico

    Tutto viene fornito con npm install gsap e importato come gsap/SplitText, gsap/MorphSVGPlugin e così via.

  3. Non Generare Mai un .npmrc con auth-token

    Non creare un .npmrc con un token di autenticazione GreenSock, non puntare al registro privato npm.greensock.com e non chiedere agli utenti di iscriversi a Club GSAP per un plugin.

  4. Registrare al Livello Superiore in React

    Registrare una sola volta nell'app, ad esempio prima della prima chiamata a useGSAP — mai all'interno di un componente che si ri-renderizza, e useGSAP stesso deve essere registrato prima dell'uso.

  5. Suddividere Solo Ciò che si Anima

    Suddivide ciò che serve per le prestazioni, ad esempio parole e caratteri quando le righe non vengono usate; la suddivisione solo per caratteri richiede smartWrap per evitare interruzioni di riga anomale.

  6. Costruire Animazioni autoSplit Dentro onSplit

    Quando autoSplit è true, le animazioni devono essere create dentro onSplit in modo che agiscano sugli elementi appena suddivisi, e devono essere restituite da onSplit affinché SplitText possa ripristinarle e sincronizzarle temporalmente.

  7. Dare a DrawSVG Qualcosa da Disegnare

    L'elemento deve avere un tratto visibile impostato tramite stroke e stroke-width in CSS o come attributi SVG, altrimenti non viene disegnato nulla.

  8. Mantenere i Plugin Solo per Sviluppo Fuori dalla Produzione

    GSDevTools serve per il debug durante lo sviluppo e non deve essere distribuito in produzione, e altri plugin solo per sviluppo seguono la stessa regola.

04 Mettila al lavoro

Installa gsap-plugins in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi gsap-plugins a Claude Code, Codex o al Tuo Agent

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

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

Forma generica della CLI skills per skills/gsap-plugins/SKILL.md; il repository potrebbe documentare un proprio percorso.

Dai alla Skill un Primo Compito di Motion e Video

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Ripristinare le istanze dei plugin come SplitTextInstance.revert() quando i componenti vengono smontati o gli elementi vengono rimossi.
  • Eseguire shapeIndex: "log" una volta per leggere il valore calcolato automaticamente, poi incollare quel numero o array nel tween.
  • Misurare il tratto con DrawSVGPlugin.getLength(element) e DrawSVGPlugin.getPosition(element).
  • Regolare MotionPath visivamente in MotionPathHelper, poi leggere helper.path o helper.getProgress() nell'animazione.
  • Scorrere e attivare/disattivare le animazioni con GSDevTools durante lo sviluppo.

In OpenDesign gsap-plugins è incluso: Plugins → Skills, selezionarlo nella barra superiore.

Scarica OpenDesignLeggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Branch main
File della skill
skills/gsap-plugins/SKILL.md Checksum del contenuto registrato alla verifica; commit aed9cfd
License
MIT Da LICENSE; SKILL.md indica "MIT".
Stelle del repository
15.248 Snapshot GitHub presa il 2026-09-14 per l'intero repository greensock/gsap-skills, che contiene 8 skill in questo catalogo. Non è un rating o conteggio di utilizzo per gsap-plugins.
Verificato da OpenDesign
14 settembre 2026 Il file sorgente, il percorso, il testo della licenza e il conteggio delle stelle sono stati verificati. Incluso nella build principale di OpenDesign (verificato il 28 agosto 2026); non è stata registrata un'esecuzione live su questa pagina.

All'interno di SKILL.md

  1. Quando Usare Questa SkillElenca gli scenari dei plugin e rimanda alle skill correlate gsap-core, gsap-scrolltrigger e gsap-react.
  2. Licenza e Installazione (importante)Specifica che ogni plugin è gratuito e vieta token di autenticazione .npmrc o consigli di iscrizione a Club GSAP.
  3. Registrazione dei PluginRegistrare i plugin una sola volta con gsap.registerPlugin prima di qualsiasi tween, anche in React.
  4. ScrollTabella di configurazione di ScrollToPlugin e struttura DOM del wrapper ScrollSmoother.
  5. DOM / UIAcquisizione dello stato Flip e variabili from, opzioni Draggable, tracciamento Inertia, gesti Observer.
  6. TestoTabella delle variabili SplitText.create con suggerimenti e avvertenze, oltre a ScrambleText glitch
Descrizione della skill
"Skill GSAP ufficiale per i plugin GSAP — registrazione, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, plugin SVG e physics, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Da usare quando l'utente chiede informazioni su un plugin GSAP, scroll-to, flip animations, draggable, disegno SVG o registrazione di plugin."

Descrizione del front-matter da SKILL.md. Il file completo è di circa 21.477 caratteri. Leggi il file completo su GitHub.

GSAP Plugins

Esegui gsap-plugins su un task reale di Motion e Video.

Lo skill gsap-plugins è incluso in OpenDesign. Scarica l'app, seleziona lo skill in Plugins → Skills, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesignEsplora tutte le skill
Terminale
npx skills add https://github.com/greensock/gsap-skills --skill gsap-plugins