83.3K+Download
Zur Nutzungsanleitung springen
gsap-pluginsvon GreenSock

GSAP Plugins Skill.

Ein Claude Code- und Codex-Skill für Motion und Video: GSAP-Plugins: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG und Physics.

  • Motion & Video
  • UI-Code
OpenDesign herunterladenAnleitung ansehen
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 und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 21.477 Zeichen insgesamt

01 Was es tut

Was der gsap-plugins Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Offizieller GSAP-Skill zur Plugin-Registrierung und jedem Plugin außerhalb von ScrollTrigger: ScrollTo, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath, CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, PixiPlugin und GSDevTools.

Er beginnt mit der Lizenzierung — jedes Plugin ist kostenlos, keine Club-GSAP-Mitgliedschaft oder Auth-Token nötig — und liefert dann Konfiguration pro Plugin: Flip.from-Vars, Draggable-Optionen, SplitText.create-Vars, morphSVG-Optionen, motionPath-Ausrichtung. Gedacht für Designer und Entwickler, die alles aus dem öffentlichen gsap-npm-Paket installieren und die korrekte Aufrufreihenfolge, Defaults und Besonderheiten benötigen. Verwandte Skills: gsap-core, gsap-scrolltrigger, gsap-react.

Was er erzeugt

  • Ein Scroll-Tween, das das Fenster oder ein beliebiges scrollbares Element zu einer Position oder einem Ziel animiert.
  • Eine SplitText-Instanz, die chars, words und lines sowie – wenn mask gesetzt ist – masks bereitstellt.
  • Ein konvertiertes path-Element, das an Stelle eines circle-, rect-, ellipse- oder line-Elements ins DOM eingesetzt wird.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Plugins einmalig zu Beginn registrieren

    Jedes Plugin wird einmalig registriert, damit GSAP und Bundler es einbeziehen, bevor es in einem Tween oder API-Aufruf verwendet wird.

  2. 02
    Mit Flip erfassen, ändern und dann animieren

    Flip ist eine Sequenz aus drei Schritten: den alten Zustand lesen, das DOM verändern, dann vom erfassten Zustand zum neuen animieren.

  3. 03
    Drag- und Throw-Interaktionen erstellen

    Draggable.create nimmt einen type, optionale bounds und inertia; InertiaPlugin liefert nach dem Loslassen den Schwung.

  4. 04
    Text in animierbare Einheiten aufteilen

    SplitText setzt Zeichen, Wörter und/oder Zeilen jeweils in ein eigenes Element, damit sie gestaggert oder pro Einheit animiert werden können.

  5. 05
    SVG zeichnen oder morphen

    Die SVG-Plugins animieren stroke-dash-Werte für Zeicheneffekte oder das d-Attribut des Pfads, um eine Form in eine andere zu morphen.

  6. 06
    Easing- und Physics-Plugins nutzen

    Easing-Plugins fügen benutzerdefinierte Kurven oder benannte Eases hinzu; die Physics-Plugins steuern Bewegung anhand von Geschwindigkeit, Winkel und Schwerkraft-Werten.

02 Finden Sie Ihren Favoriten

Wann Sie das gsap-plugins-Skill verwenden sollten

Verwenden Sie das gsap-plugins-Skill in Claude Code oder Codex, wenn die Aufgabe Motion und Video dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Scrollen zu einem Element oder einer Pixelposition, ohne dass ScrollTrigger beteiligt ist.
  • Animieren zwischen zwei Layout-Zuständen, etwa neu geordnete Listen, Grids oder ein- und ausgeklappte Panels.
  • Slider, Karten und neu anordenbare Listen, die Drag-, Spin- oder Throw-Verhalten für Maus und Touch benötigen.
  • Text-Reveals, animiert pro Zeichen, pro Wort oder pro Zeile.
  • Icon-zu-Icon-Morphs, Formübergänge und andere pfadbasierte SVG-Animationen.

Grenzen kennen

  • SplitText kann keine SVG-Text-Elemente aufteilen.
  • DrawSVG animiert nur den Strich, niemals die Füllung, und kann den Inhalt eines use-Elements visuell nicht verändern.
  • ScrollTrigger-Arbeiten gehören in ein separates Skill, nicht in dieses.
  • Text mit text-wrap: balance verträgt sich schlecht mit dem Aufteilen.

Was Sie bereitstellen sollten

  • Die zu registrierende Plugin-ListeJedes im Projekt verwendete Plugin muss in einem gsap.registerPlugin-Aufruf genannt werden, damit Bundler es einschließen.
  • Die ScrollSmoother-DOM-StrukturScrollSmoother benötigt ScrollTrigger plus einen Content-Wrapper innerhalb eines Smooth-Wrappers, wobei fixed positionierte Elemente außerhalb erlaubt sind.
  • Ein Ziel für SplitTextSplitText.create nimmt einen Selector, ein Element oder ein Array als Ziel zusammen mit den Split-Vars.
  • Eine Form für MorphSVGDie erforderliche shape-Eigenschaft akzeptiert einen Selector, ein Element oder einen rohen Pfad-String als Morph-Ziel.
  • Bereits geladene Fonts und LayoutsBei benutzerdefinierten Fonts erst nach dem Laden aufteilen oder auf autoSplit mit onSplit setzen, damit erneutes Aufteilen zum richtigen Zeitpunkt erfolgt.

03 Innerhalb des Skills

Regeln, die das gsap-plugins-Skill Claude Code und Codex gibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

  1. Registrieren, bevor Sie animieren

    Ein Plugin muss registriert werden, bevor es in einem Tween oder API-Aufruf verwendet wird — die Registrierung ist der erste Schritt, keine Korrektur für einen Fehler.

  2. Installation aus dem öffentlichen Gsap-Paket

    Alles wird über npm install gsap ausgeliefert und als gsap/SplitText, gsap/MorphSVGPlugin und so weiter importiert.

  3. Niemals eine .npmrc mit auth-token erzeugen

    Erstellen Sie keine .npmrc mit einem GreenSock-Auth-Token, verweisen Sie nicht auf die private Registry npm.greensock.com, und fordern Sie Nutzer nicht auf, für ein Plugin Club GSAP beizutreten.

  4. In React auf oberster Ebene registrieren

    Einmal in der App registrieren, zum Beispiel vor dem ersten useGSAP-Aufruf — niemals innerhalb einer Komponente, die neu gerendert wird, und useGSAP selbst muss vor der Verwendung registriert werden.

  5. Teilen Sie nur, was Sie animieren

    Teilen Sie auf, was für die Performance benötigt wird, zum Beispiel Wörter und Zeichen, wenn Zeilen nicht verwendet werden; das Aufteilen nur nach Zeichen erfordert smartWrap, um ungünstige Zeilenumbrüche zu vermeiden.

  6. autoSplit-Animationen innerhalb von onSplit erstellen

    Wenn autoSplit auf true gesetzt ist, müssen Animationen innerhalb von onSplit erstellt werden, damit sie die neu aufgeteilten Elemente ansprechen, und aus onSplit zurückgegeben werden, damit SplitText sie zurücksetzen und zeitlich synchronisieren kann.

  7. Geben Sie DrawSVG etwas zum Zeichnen

    Das Element benötigt einen sichtbaren Stroke, der über stroke und stroke-width in CSS oder als SVG-Attribute gesetzt wird, sonst wird nichts gezeichnet.

  8. Halten Sie Nur-für-Entwicklung-Plugins aus der Produktion heraus

    GSDevTools dient dem Debugging während der Entwicklung und darf nicht ausgeliefert werden; für andere Nur-für-Entwicklung-Plugins gilt dieselbe Regel.

04 In Betrieb nehmen

gsap-plugins in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

gsap-plugins zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

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

Allgemeine skills-CLI-Form für skills/gsap-plugins/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Geben Sie dem Skill eine erste Motion- und Video-Aufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

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.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Setzen Sie Plugin-Instanzen wie SplitTextInstance.revert() zurück, wenn Komponenten unmounten oder Elemente entfernt werden.
  • Führen Sie shapeIndex: "log" einmal aus, um den automatisch berechneten Wert zu lesen, und fügen Sie diese Zahl oder das Array dann in das Tween ein.
  • Messen Sie den Stroke mit DrawSVGPlugin.getLength(element) und DrawSVGPlugin.getPosition(element).
  • Passen Sie MotionPath visuell in MotionPathHelper an und lesen Sie dann helper.path oder helper.getProgress() in der Animation aus.
  • Scrubben und schalten Sie Animationen während der Entwicklung mit GSDevTools um.

In OpenDesign ist gsap-plugins gebündelt: Plugins → Skills, wählen Sie es in der oberen Leiste aus.

OpenDesign herunterladenQuickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Branch main
Skill-Datei
skills/gsap-plugins/SKILL.md Inhaltsprüfsumme bei Verifizierung erfasst; Commit aed9cfd
License
MIT Aus LICENSE; SKILL.md sagt „MIT".
Repository-Sterne
15.248 GitHub-Snapshot vom 14.09.2026 für das gesamte greensock/gsap-skills-Repository, das 8 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für gsap-plugins.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternanzahl wurden geprüft. In OpenDesign main gebündelt (geprüft am 28.08.2026); ein Live-Lauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. Wann dieser Skill verwendet wirdListet Plugin-Szenarien auf und verweist auf verwandte Skills gsap-core, gsap-scrolltrigger und gsap-react.
  2. Lizenzierung & Installation (wichtig)Besagt, dass jedes Plugin kostenlos ist, und verbietet .npmrc-Auth-Token oder Hinweise zur Club-GSAP-Anmeldung.
  3. Plugins registrierenRegistrieren Sie Plugins einmal mit gsap.registerPlugin, bevor irgendein Tween läuft, auch in React.
  4. ScrollScrollToPlugin-Konfigurationstabelle und die ScrollSmoother-Wrapper-DOM-Struktur.
  5. DOM / UIFlip-Zustandserfassung und from-Vars, Draggable-Optionen, Inertia-Tracking, Observer-Gesten.
  6. TextSplitText.create-Vars-Tabelle mit Tipps und Fallstricken, sowie ScrambleText-Glitch
Die eigene Beschreibung des Skills
„Offizieller GSAP-Skill für GSAP-Plugins – Registrierung, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG- und Physik-Plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Verwenden, wenn der Nutzer nach einem GSAP-Plugin, Scroll-to, Flip-Animationen, Draggable, SVG-Zeichnung oder Plugin-Registrierung fragt."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 21.477 Zeichen. Vollständige Datei auf GitHub lesen.

GSAP Plugins

gsap-plugins für eine echte Motion- und Video-Aufgabe ausführen.

Der gsap-plugins-Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie den Skill unter Plugins → Skills aus, fügen Sie den Prompt oben ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladenAlle Skills durchsuchen
Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-plugins