Wie man einer KI beibringt, GSAP-Animationen fehlerfrei zu schreiben

Vertraute Situation: Du bittest Claude oder Cursor, eine komplexe Animation mit ScrollTrigger zu skizzieren, und bekommst Code, der entweder nicht funktioniert oder nach fünf Jahre alten Standards geschrieben wurde. KI verwechselt oft Syntax aus verschiedenen Versionen, vergisst Plugins zu registrieren oder ignoriert React-Lebenszyklus-Spezifika.

Das GreenSock-Team hat dies elegant gelöst. Sie haben gsap-skills veröffentlicht — ein Satz offizieller Anweisungen, die aktuelle Bibliothekskenntnisse direkt in den KI-Agenten „einbetten".

Warum ist das nötig, wenn es Dokumentation gibt

Es könnte den Anschein haben, dass beliebte LLMs bereits Zugriff auf das Internet und eine massive Codebasis haben. Aber in der Praxis wurden Modelle mit viel Müll trainiert: alte Forenbeiträge, veraltete Tutorials und Code aus der jQuery-Ära. Infolgedessen könnte die KI TweenMax vorschlagen, was seit Jahren nicht mehr verwendet wird, oder den Speicherbereinigung in useEffect vermasseln.

Das gsap-skills-Projekt ist nicht nur ein Spickzettel. Es sind strukturierte Regeln im Agent-Skills-Format. Wenn du sie mit deinem Editor (z. B. Cursor) oder CLI-Agenten (Claude Code) verbindest, beginnt die KI, den Bibliothekskontext so zu verstehen wie die eigenen Schöpfer von GSAP.

Was ist in diesem Set enthalten

Entwickler haben das Wissen in logische Blöcke aufgeteilt. Das ist praktisch, weil du nur das laden kannst, was du für deinen spezifischen Stack brauchst.

• gsap-core und gsap-timeline. Die Grundlagen: wie man Animationen richtig verketten, Positionsparameter verwendet und unnötige Verzögerungen durch delay vermeidet.
• gsap-scrolltrigger. Wahrscheinlich der nützlichste Teil. KI lernt, scrub, pin richtig zu konfigurieren und, was entscheidend ist, refresh() nach Layout-Änderungen aufzurufen.
• gsap-react. Best Practices für die Verwendung des useGSAP Hooks, Arbeiten mit Refs und Context. Keine Speicherlecks mehr, weil das neuronale Netz revert() vergessen hat.
• gsap-performance. Optimierungstipps: wann man will-change verwendet, warum Transforms besser sind als das Ändern von top/left, und wie man Updates bündelt.

Übrigens ein netter Bonus: Nachdem Webflow GSAP übernommen hat, wurden alle Plugins (einschließlich SplitText und MorphSVG) kostenlos. Das spiegelt sich auch in den KI-Anweisungen wider — es wird dich nicht mehr mit Fragen nach privaten Tokens und Club GSAP belästigen.

Wie man seinen Editor mit diesen Skills verbindet

Der schnellste Weg ist die Verwendung der CLI. Wenn du Cursor oder Claude Code installiert hast, führe einfach einen Befehl im Terminal aus:

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

Für diejenigen, die volle Kontrolle bevorzugen, enthält das Repository einen skills/-Ordner. Darin befinden sich .md-Dateien, die die Logik für LLMs beschreiben. Du kannst sie einfach in das Regeln-Verzeichnis deines Agenten kopieren (zum Beispiel in ~/.cursor/rules oder ähnliche Ordner für Windsurf und Copilot).

Praktischer Nutzen

Stell dir vor, du baust eine komplexe Landingpage. Anstatt manuell zu googeln, wie man MotionPath mit dem Seiten-Scroll synchronisiert, schreibst du einfach in den Cursor-Chat: „Mach, dass die Rakete beim Scrollen einer Kurve entlang fliegt."

Dank gsap-skills wird der Agent nicht einfach irgendein Code-Snippet ausspucken. Er wird:

1. Prüfen, ob das MotionPath-Plugin registriert ist.
2. Moderne gsap.timeline({ scrollTrigger: { ... } })-Syntax verwenden.
3. Optimale Performance-Einstellungen vorschlagen.

Lohnt sich die Implementierung

Wenn du GSAP nur alle sechs Monate verwendest, um eine Überschrift sanft einzublenden, kannst du dir das wahrscheinlich sparen. Aber wenn Animationen ein wichtiger Teil deines Frontends sind, werden gsap-skills dir eine Menge Zeit beim Debuggen von KI-„Halluzinationen" sparen.

Interessanterweise war GreenSock eines der ersten unter großen Bibliotheken, das ein solches offizielles KI-Config erstellt hat. Sehr wahrscheinlich wird dies bald ein Standard für alle beliebten Tools. Auch wenn die Projektdokumentation minimalistisch aussieht, ist die Wissensbasis in den SKILL.md-Dateien dicht genug, dass der Agent bei grundlegenden Dingen keine Fehler mehr macht.

Es lohnt sich auf jeden Fall, es auszuprobieren, besonders wenn du stark in Cursor oder Claude Code investiert bist. Das ist einer der Fälle, wo eine kleine Tool-Konfiguration die Qualität des ausgegebenen Codes spürbar verändert.