83.3K+Download
Zur Nutzungsanleitung springen
gsap-performancevon GreenSock

GSAP Performance Skill.

Ein Skill für Claude Code und Codex für Motion und Video: GSAP-Performance: Transforms, Vermeidung von Layout-Thrashing, will-change, Batching.

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

01 Was es tut

Was der gsap-performance Skill in Claude Code und Codex bewirkt

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

Offizielle GSAP-Empfehlungen, um Animationen bei flüssigen 60fps zu halten, indem Sie günstige Eigenschaften wählen und Layout-Arbeit vermeiden. Sie werden angewiesen, transform-Schlüssel (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) und opacity zu animieren statt width, height, top, left, margin oder padding, will-change nur in CSS bei Elementen zu setzen, die tatsächlich animiert werden, und alle DOM-Lesevorgänge vor den Schreibvorgängen durchzuführen, damit das Layout nicht durcheinandergerät.

Die Empfehlungen zum Batching umfassen Stagger anstelle von manuell verzögerten Tweens, Virtualisierung für lange Listen, gsap.quickTo() für Maus-Follower, Pin- und Scrub-Feinabstimmung mit entprelltem ScrollTrigger.refresh() sowie das Beenden nicht sichtbarer Tweens. Es richtet sich an Designer und Entwickler, die bestehende GSAP-Animationen optimieren, nicht an solche, die sie neu erstellen.

Was er erzeugt

  • Eine will-change-Deklaration, die dem CSS des animierten Elements hinzugefügt werden soll.
  • Ein gsap.quickTo()-Setup für x und y, gesteuert durch einen mousemove-Listener auf einem Container.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Compositor-freundliche Eigenschaften animieren

    Beschränken Sie Animationen auf transform-Schlüssel und opacity, da diese die Arbeit auf dem Compositor halten, statt Layout und Paint auszulösen.

  2. 02
    GSAP die Schreibvorgänge bündeln lassen

    GSAP bündelt Updates bereits intern, daher liegt das Risiko in Ihrem eigenen DOM-Code, der Lese- und Schreibvorgänge dazwischen verschachtelt.

  3. 03
    Ein Tween für häufig geänderte Werte wiederverwenden

    Für Eigenschaften, die bei jeder Zeigerbewegung aktualisiert werden, hält gsap.quickTo() ein einzelnes Tween am Leben, statt bei jedem Update ein neues zu erzeugen.

  4. 04
    Scroll-gesteuerte Arbeit eindämmen

    Ein kleiner scrub-Wert wie scrub: 1 kann die während des Scrollens anfallende Arbeit reduzieren, aber die Datei rät dazu, diese Einstellung auf Low-End-Geräten zu testen.

  5. 05
    Nicht sichtbare Animationen stoppen

    Pausieren oder beenden Sie Animationen, die außerhalb des Sichtbereichs oder inaktiv sind, zum Beispiel wenn der Nutzer den Bereich verlässt.

02 Finden Sie Ihren Favoriten

Wann man den gsap-performance Skill verwendet

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

Gut geeignet

  • Eine bestehende GSAP-Animation lässt Frames aus, und Sie möchten deren Layout- und Paint-Kosten senken.
  • Jemand fragt nach Jank, FPS oder Best Practices für schnelle Animation in einem GSAP-Projekt.
  • Sie animieren eine lange Liste und benötigen Rat zu Virtualisierung und zur Vermeidung von Hunderten gleichzeitiger Tweens.
  • Ein Scroll-Abschnitt pinnt ein Element, und Sie müssen begrenzen, was für die Compositor-Ebene vorgesehen wird.

Grenzen kennen

  • will-change oder force3D vorsorglich überall zu setzen, ist ausdrücklich falsch; sie sind für Elemente gedacht, die tatsächlich animiert werden.
  • Hunderte überlappende Tweens oder ScrollTriggers werden als Anti-Pattern betrachtet, wenn sie nicht auf Low-End-Geräten getestet wurden.

Was Sie bereitstellen sollten

  • Die Eigenschaften, die Ihre Animation derzeit ändertSie müssen wissen, was animiert wird, um zu beurteilen, ob transform und opacity layoutintensive Eigenschaften ersetzen können.

03 Innerhalb des Skills

Regeln, die der gsap-performance Skill Claude Code und Codex vorgibt

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

  1. Layout-auslösende Eigenschaften vermeiden

    width, height, top, left, margin und padding lösen Layout aus und können Jank verursachen. Vermeiden Sie sie daher, wenn ein Transform denselben Effekt erzielt.

  2. Bewegung mit X und Y, nicht mit Left und Top

    GSAPs x und y sind standardmäßig Transforms (translate). Verwenden Sie sie daher statt left oder top für Bewegungen.

  3. will-change nur dort, wo etwas animiert wird

    Setzen Sie will-change in CSS auf die Elemente, die animiert werden; es signalisiert dem Browser, den Layer zu befördern, gehört daher nur auf animierte Elemente.

  4. Stagger statt manueller Delays

    Wenn die Animation über Elemente hinweg identisch ist, verwenden Sie stagger statt vieler einzelner Tweens mit handgeschriebenen Delays.

  5. Niemals Timelines pro Frame erstellen

    Verwenden Sie Timelines wieder; das Erstellen neuer Timelines bei jedem Frame wird als verschwenderisch bezeichnet.

  6. ScrollTrigger nur bei echten Layout-Änderungen aktualisieren

    Rufen Sie ScrollTrigger.refresh() auf, wenn sich das Layout tatsächlich ändert, etwa nach dem Laden von Inhalten, nicht bei jedem Resize, und debouncen Sie es wo möglich.

  7. Räumen Sie auf, was Sie starten

    Räumen Sie Animationen außerhalb des Bildschirms auf oder beenden Sie sie, und aktualisieren Sie ScrollTrigger bei Layout-Änderungen, wo möglich debounced, damit nichts weiterläuft, wenn es nicht mehr benötigt wird.

04 In Betrieb nehmen

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

Generische skills-CLI-Form für skills/gsap-performance/SKILL.md; das Repository dokumentiert möglicherweise seinen eigenen Pfad.

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
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.

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:

  • Achten Sie auf DOM-Lese- und Schreibvorgänge, die sich abwechseln, da dies wiederholtes Layout-Thrashing verursacht; Lesevorgänge sollten immer zuerst kommen.
  • Stellen Sie sicher, dass nichts weiterläuft: verirrte Tweens und ScrollTriggers laufen weiter und schaden Performance und Korrektheit.
  • Stellen Sie sicher, dass die animierten Eigenschaften bei transform und opacity bleiben, sodass der Browser nur Compositing-Arbeit leistet.

In OpenDesign ist gsap-performance 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-performance/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 Nutzungsanzahl für gsap-performance.
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 dieses Skill verwendenAnwenden bei der Optimierung von GSAP-Animationen auf 60fps oder gegen Jank; verweist auf verwandte Skills.
  2. Transform und Opacity bevorzugenAnimieren Sie transform-Eigenschaften und opacity; vermeiden Sie Layout-Eigenschaften; x und y statt left und top.
  3. will-changeFügen Sie will-change in CSS auf Elementen hinzu, die animiert werden, um Layer-Beförderung zu signalisieren.
  4. Lese- und Schreibvorgänge bündelnGSAP bündelt Schreibvorgänge; führen Sie alle DOM-Lesevorgänge vor den Schreibvorgängen aus, um Thrashing zu vermeiden.
  5. Viele Elemente (Stagger, Listen)Stagger schlägt manuelle Delays; virtualisieren Sie lange Listen; verwenden Sie Timelines wieder, statt neue zu erstellen.
  6. Häufig aktualisierte Eigenschaften (z. B. Mausfolger)Verwenden Sie gsap.quickTo mit einem mousemove-Handler für oft aktualisierte x- und y-Werte.
  7. ScrollTrigger und PerformancePinnen Sie nur, was nötig ist, probieren Sie einen kleinen Scrub-Wert, aktualisieren Sie nur bei Layoutänderungen.
  8. Gleichzeitige Arbeit reduzierenPausieren oder beenden Sie Animationen außerhalb des Bildschirms; vereinfachen oder staffeln Sie aufwendige Property-Animationen.
  9. Best PracticesVier-Punkte-Checkliste: transform und opacity, gezieltes will-change, Staffelung, Cleanup und Refresh.
  10. Vermeiden SieAnti-Patterns: Layout-Properties für Bewegung, pauschales will-change oder force3D, ungetestetes Volumen, vernachlässigtes Cleanup.
Die eigene Beschreibung des Skills
„Offizieller GSAP Skill für Performance — bevorzugt Transforms, vermeidet Layout-Thrashing, will-change, Batching. Verwenden Sie ihn bei der Optimierung von GSAP-Animationen, zum Reduzieren von Jank oder wenn der Nutzer nach Animationsperformance, FPS oder flüssigen 60fps fragt."

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

06 Vor der Installation

Fragen zur Skill „gsap-performance“

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Verwende ich das anstelle von gsap-core?

Nein. Diese Skill ist die Performance-Ebene über der normalen GSAP-Arbeit: Animationen werden mit gsap-core (transform, autoAlpha) und gsap-timeline erstellt, und Performance-Details zu ScrollTrigger finden sich in gsap-scrolltrigger.

Wie sollte ich einen Mouse-Follower bauen?

Verwenden Sie gsap.quickTo() für die x- und y-Werte mit einer Dauer und einem Ease, und rufen Sie die zurückgegebenen Funktionen aus einem mousemove-Listener auf. Dabei wird ein einziges Tween wiederverwendet, statt bei jedem Update ein neues zu erzeugen.

GSAP Performance

gsap-performance an einer echten Motion-and-Video-Aufgabe ausführen.

Der gsap-performance Skill ist in OpenDesign integriert. Laden Sie die App herunter, wählen Sie den Skill unter Plugins → Skills, fügen Sie den obigen Prompt 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-performance