gsap-skills
Bewegung im Web richtig bauen: acht Skills vom Hersteller der Animationsbibliothek GSAP.
- Acht Themen: Grundlagen, Timelines, ScrollTrigger für Animationen beim Scrollen, Plugins, Hilfsfunktionen, Leistung, React und andere Frameworks.
- Vom Hersteller: Geschrieben vom Team hinter GSAP. Sie sollen verhindern, dass die KI veraltete oder falsche Aufrufe erfindet.
- Nur Text: Reine Anleitungen, kein Skript. Der Skill ändert nichts und führt nichts aus.
Ein Skill von GreenSock (GSAP), nicht von uns. Wir haben ihn gelesen und listen ihn mit Verweis auf die Quelle.
Kostenfrei. Wir haben den Skill nicht in Claude Code, ChatGPT oder Grok ausgeführt und übernehmen dafür keine Gewähr. Urheber und Lizenz stehen in der Quelle.
Das Problem
Warum es diesen Skill gibt.
- Sprachmodelle schreiben Animationscode gern aus dem Gedächtnis, und der ist bei GSAP oft veraltet: alte Plugin-Hinweise, fehlendes Aufräumen in React, ruckelnde Animationen.
- Wer das erst im Browser merkt, sucht lange. Die Skills legen der KI die richtige Reihenfolge und die Fallstricke vorher auf den Tisch.
Was er macht
So arbeitet er.
- Je Thema ein Skill: Die KI lädt nur den Skill, der zur Aufgabe passt, etwa ScrollTrigger für Effekte beim Scrollen oder useGSAP für React.
- Fallstricke benannt: Zum Beispiel Aufräumen beim Entfernen von Bauteilen, Rücksicht auf reduzierte Bewegung und Animationen über Transformationen statt Layout.
- Aktueller Lizenzstand: Alle GSAP-Plugins sind laut den Skills inzwischen kostenfrei, auch geschäftlich. Die Skills raten deshalb von alten Zugangsdaten und Sonder-Registern ab.
Ehrlich gesagt
Was er kann und was nicht.
- Grenze: Die Skills setzen GSAP voraus. Wer eine andere Animationsbibliothek nutzt, braucht sie nicht.
- Grenze: In Beispielen steht der übliche Befehl
npm install gsap. Das ist die normale Einrichtung der Bibliothek und kein verstecktes Nachladen. - Grenze: Wer mit Hyperframes Videos baut, hat GSAP-Wissen dort schon mitgeliefert. Beide gleichzeitig können bei dem Stichwort GSAP anspringen.
- Getestet: Wir haben alle acht Skill-Dateien gelesen und nach unsichtbaren Zeichen, kodierten Blöcken und Aufforderungen zum Nachladen gesucht. Gefunden wurde nichts.
- Herkunft: Entwickelt von GreenSock (GSAP), veröffentlicht unter der MIT-Lizenz. Wir haben nichts daran verändert.
Prüf-Protokoll
Das Ergebnis, offen gelegt.
Ein Siegel ist Sorgfalt, keine Garantie. Wir zeigen das Ergebnis als Ampel, nicht die Prüfmechanik dahinter. Die Verantwortung für den Einsatz bleibt bei Ihnen.
So laden Sie ihn ein
In vier Schritten einsatzbereit.
Quelle öffnen
Die Quellseite auf GitHub aufrufen und den Ordner mit der SKILL.md herunterladen.
Einlegen
Den Skill-Ordner in den Skills-Ordner Ihres Werkzeugs legen, z. B. .claude/skills/. Der Unterordner bleibt dabei.
Benutzen
Die Aufgabe so beschreiben, wie im Beispiel unten. Der Skill springt von selbst an.
Aktuell bleiben
Fragen Sie Ihre KI hin und wieder, ob der Skill noch zur Quelle passt. Wir verlinken auf die Quelle, damit der Stand dort der aktuelle bleibt.
Beispiel
So sieht das aus.
„Lass beim Scrollen jede Karte nacheinander einblenden.“
ScrollTrigger richtig eingesetzt wird, die Animation über Transformationen läuft und beim Entfernen der Seite sauber aufgeräumt wird.
Passt dazu
Gut zusammen mit.
- handschrift gibt Ihrer Seite eine eigene Gestaltung. gsap-skills bringt sie in Bewegung.
- code-guard prüft die fertige Seite vor der Veröffentlichung.