83.3K+Download
Zur Nutzungsanleitung springen
gsap-utilsvon GreenSock

GSAP Utils Skill.

Ein Claude Code- und Codex-Skill für Motion und Video: gsap.utils-Helfer: clamp, mapRange, interpolate, snap, wrap, pipe.

  • Motion & Video
  • UI-Code
OpenDesign herunterladenAnleitung ansehen
greensock/gsap-skills · skills/gsap-utils/SKILL.mdSKILL.md
--- name: gsap-utils description: Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP. --- ## When to Use This Skill ## Clamping and Ranges ## Random and Snap ## Units and Parsing ## Arrays and Collections ## Best practices
Front Matter und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 12.051 Zeichen insgesamt

01 Was es tut

Was das gsap-utils 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

gsap.utils ist GSAPs Sammlung reiner Hilfsfunktionen für Mathematik, Bereiche, Einheiten, Farben und Collections und benötigt keine Registrierung. Das Skill dokumentiert clamp, mapRange, normalize, interpolate, random, snap, shuffle, distribute, getUnit, unitize, splitColor, selector, toArray, pipe, wrap und wrapYoyo mit ihren Signaturen, Standardwerten und durchgerechneten Ausgaben.

Es ist für Entwickler gedacht, die GSAP-Code schreiben oder prüfen, der Scroll auf einen Wert abbilden, Eingaben normalisieren, auf ein Raster einrasten oder Selektoren in einer Komponente eingrenzen muss. Ein Muster zieht sich durch die Datei: Lassen Sie den abschließenden Wert weg, um eine wiederverwendbare Funktion zu erhalten – außer bei random(), das true erwartet.

Was er erzeugt

  • Der transformierte Wert, direkt zurückgegeben, wenn Sie das Argument value übergeben
  • Eine wiederverwendbare Funktion, die Werte, die Sie ihr später übergeben, begrenzt, abbildet, normalisiert oder einrastet
  • Ein neues Array mit denselben Elementen in zufälliger Reihenfolge
  • Eine gescopte Selektorfunktion, die Elemente nur innerhalb des angegebenen Elements oder Refs findet
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Helper leben auf gsap.utils

    Die Utils sind reine Helper, die keine Registrierung benötigen und überall dort aufgerufen werden können, wo JS GSAP steuert: in Tween-Vars, ScrollTrigger- oder Observer-Callbacks.

  2. 02
    Wert zuletzt übergeben, Ergebnis sofort erhalten

    Die meisten Utils nehmen zuerst ihre Konfiguration und als letztes Argument den zu transformierenden Wert und geben das transformierte Ergebnis sofort zurück.

  3. 03
    Lassen Sie ihn weg für eine Funktionsform

    Lassen Sie diesen letzten Wert weg, und das Util gibt Ihnen eine Funktion zurück, die Sie später mit dem Wert aufrufen, sodass eine Konfiguration vielen Werten dienen kann.

  4. 04
    Denken Sie daran: Random() kehrt das Muster um

    random() nutzt für seine wiederverwendbare Form nicht das Weglassen; Sie übergeben true als letztes Argument und erhalten eine Funktion, die bei jedem Aufruf einen neuen Wert liefert.

  5. 05
    Snap kann direkt im Tween gesetzt werden

    Für Raster- oder schrittbasierte Bewegung können Sie snap direkt in den Tween-Vars übergeben, statt zuerst das Util aufzurufen.

  6. 06
    Transformationen mit Pipe verketten

    pipe setzt Funktionen von links nach rechts zusammen, sodass normalize und dann snap als eine einzige Funktion innerhalb eines Tweens oder Callbacks angewendet werden können.

02 Finden Sie Ihren Favoriten

Wann der gsap-utils Skill zu verwenden ist

Den gsap-utils Skill in Claude Code oder Codex verwenden, wenn die Aufgabe Motion und Video dieser Art ist. Fit und Limits unten stammen aus der eigenen Datei des Skills.

Gut geeignet

  • Umwandeln einer Scrollposition, eines 0-1-Fortschrittswerts oder eines anderen Eingabebereichs in einen Animationsbereich
  • Animieren auf einem Raster oder in festen Schritten innerhalb eines Tweens
  • Endlos-Scrollen oder andere zyklische Wertverarbeitung mit wrap und wrapYoyo
  • Gleichzeitiges Verteilen von Werten wie scale, opacity, x oder delay auf viele Elemente
  • Randomisierung der Reihenfolge von Elementen, bevor sie gestaffelt werden

Grenzen kennen

  • Easing-Hilfsfunktionen wie CustomEase, die die Datei in gsap-plugins statt in gsap.utils ablegt
  • Utils überschreiben oder sich auf undokumentiertes Verhalten verlassen
  • Die Animation selbst aufbauen, was die Datei mit gsap-core, gsap-timeline und gsap-scrolltrigger kombiniert

Was Sie bereitstellen sollten

  • Der Wert, den Sie transformieren möchtenÜbergeben Sie ihn als letztes Argument, um sofort ein Ergebnis zu erhalten; lassen Sie ihn weg und liefern Sie den Wert später an die zurückgegebene Funktion.
  • Ein Scope-Element oder Ref für selector()Übergeben Sie ein DOM-Element oder eine Framework-Ref, damit die zurückgegebene Selector-Funktion nur dessen Nachfahren erfasst.
  • Ein Farbstring für splitColorrgb(), rgba(), hsl(), hsla(), Hex- und benannte Farben funktionieren alle; übergeben Sie true als zweites Argument, um stattdessen HSL-Komponenten zu erhalten.
  • Eine Distribute-Konfiguration, alle Schlüssel optionalGeben Sie die Spread-Einstellungen wie base, amount oder each, from, grid, axis und ease an, oder lassen Sie sie leer für die Standardwerte.

03 Innerhalb des Skills

Regeln, die das gsap-utils Skill Claude Code und Codex vorgibt

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

  1. Den Wert weglassen, wenn sich ein Bereich wiederholt

    Wenn derselbe Bereich oder dieselbe Konfiguration wiederverwendet wird, etwa bei einem Scroll-Handler oder Tween-Callback, behalten Sie die zurückgegebene Funktion, statt die Konfiguration bei jedem Aufruf neu zu erstellen.

  2. Die Random-String-Form in Tween-Vars verwenden

    Schreiben Sie "random(-100, 100)", "random(-100, 100, 5)" oder "random([0, 100, 200])" als Property-Wert; GSAP wertet den String pro Ziel aus.

  3. Grids snappen, für den Rest toArray verwenden

    Greifen Sie bei rasterausgerichteten oder schrittbasierten Werten auf snap zurück, und verwenden Sie toArray immer dann, wenn GSAP oder Ihr eigener Code aus einem Selector oder NodeList ein echtes Array benötigt.

  4. Selektoren innerhalb von Komponenten scopen

    Rufen Sie gsap.utils.selector(scope) auf, damit ein Selector wie ".box" nur Nachfahren dieses Containers oder Refs erfasst und nicht das gesamte Dokument.

  5. Amount oder Each, niemals beide

    In einer Distribute-Konfiguration verteilt amount einen Gesamtwert auf alle Ziele (amount 1 über 100 Ziele ergibt 0,01 Abstand), während each einen festen Schritt pro Ziel festlegt, etwa 0, 1, 2, 3.

  6. mapRange und Normalize sind nur für Zahlen gedacht

    Erwarten Sie nicht, dass sie Einheiten verarbeiten; wenn Einheiten wichtig sind, greifen Sie stattdessen auf getUnit oder unitize zurück.

04 In Betrieb nehmen

gsap-utils 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-utils 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-utils

Generische skills-CLI-Form für skills/gsap-utils/SKILL.md; das Repository kann einen 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
Use gsap.utils to drive a [scroll-linked effect] in [my component]: map the ScrollTrigger progress from 0-1 to 0-360 and snap the result to the nearest 5, then set the starting x of each [card] with the string form "random(-100, 100, 5)". Scope the selectors to the [container] ref with gsap.utils.selector so they do not match the whole document.

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:

  • Vergleichen Sie einen Beispielaufruf mit dem dokumentierten Ergebnis, etwa mapRange(0, 100, 0, 500, 50), das 250 ergibt
  • Testen Sie wrap an beiden Enden des Bereichs, um das zyklische Ergebnis zu bestätigen
  • Übergeben Sie einen Container als zweites toArray-Argument, um zu bestätigen, dass das Ergebnis eingeschränkt ist
  • Prüfen Sie, dass eine RGBA-Farbe vier Elemente statt drei zurückgibt
  • Bestätigen Sie, dass getUnit die Einheit als Zeichenkette zurückgibt und für einheitslose Zahlen eine leere Zeichenkette

In OpenDesign ist gsap-utils integriert: 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-utils/SKILL.md Content-Prüfsumme bei Verifizierung aufgezeichnet; 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 Nutzungsanzahl für gsap-utils.
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.
Die eigene Beschreibung des Skills
„Offizieller GSAP-Skill für gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Verwenden Sie ihn, wenn der Benutzer nach gsap.utils, clamp, mapRange, random, snap, toArray, wrap oder Hilfsfunktionen in GSAP fragt."

Front-matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 12.051 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

GSAP Utils

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

Der gsap-utils Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie den Skill in Plugins → Skills, 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-utils