83.3K+Download
Zur Nutzungsanleitung springen
gsap-timelinevon GreenSock

GSAP Timeline Skill.

Ein Claude Code- und Codex-Skill für Motion und Video: GSAP-Timelines: Positionsparameter, Verschachtelung und Playback-Steuerung.

  • Motion & Video
  • UI-Code
OpenDesign herunterladenAnleitung ansehen
greensock/gsap-skills · skills/gsap-timeline/SKILL.mdSKILL.md
--- name: gsap-timeline description: Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines). --- ## When to Use This Skill ## Creating a Timeline ## Position Parameter ## Timeline Defaults ## Timeline Options (constructor) ## Labels
Front Matter und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 4.338 Zeichen insgesamt

01 Was es tut

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

Ein offizielles GSAP-Skill zum Sequenzieren von Animationen mit gsap.timeline(). Es behandelt das Erstellen einer Timeline und das Verketten von Tweens, die standardmäßig angehängt werden, sowie das Neupositionieren mit dem position-Parameter — absolute Sekunden, relative "+=0.5"/"-=0.2"-Offsets, Labels und "<"/">"-Platzierung.

Es dokumentiert die Optionen des Timeline-Konstruktors (paused, repeat, yoyo, onComplete/onStart/onUpdate, defaults), das Setzen von Labels mit addLabel() und das Springen mit play()/tweenFromTo(), das Verschachteln von Child-Timelines in einer Master-Timeline sowie Wiedergabemethoden einschließlich restart, time, progress und kill. Es endet mit GSAP-Best-Practices und den Fallstricken, die zu vermeiden sind, insbesondere dem Verketten mit delay und dem Platzieren von ScrollTrigger auf Tweens innerhalb einer Timeline.

Was er erzeugt

  • Ein Timeline-Objekt, das in einer Variablen gespeichert wird, das tl in jedem Beispiel, dem verkettete Tweens hinzugefügt werden und auf das Wiedergabemethoden wirken.
  • Ein neues Tween, das von tweenFromTo zurückgegeben wird und den Playhead zwischen zwei Labels animiert, während die Timeline pausiert ist, ohne Ease.
  • Eine beendete Timeline: Der Aufruf von kill() entfernt die Timeline und standardmäßig auch ihre Kinder.
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Eine Timeline erstellen und Tweens verketten

    Rufen Sie gsap.timeline() auf und verketten Sie .to()-Aufrufe. Ohne angegebene Position wird jedes Tween nach Abschluss des vorherigen angehängt, sodass die Reihenfolge der Schreibreihenfolge entspricht.

  2. 02
    Platzieren Sie jedes Tween in der Zeit

    Die Platzierung wird durch das dritte Argument oder eine position-Eigenschaft in vars festgelegt: absolute Sekunden, relative Offsets, Label-Namen oder < und > relativ zur zuletzt hinzugefügten Animation.

  3. 03
    Geben Sie der Timeline gemeinsame Standardwerte

    An den Timeline-Konstruktor übergebene Standardwerte werden in jedes Child-Tween eingebunden, sodass duration und ease einmal für die gesamte Sequenz deklariert werden.

  4. 04
    Wichtige Momente mit Labels versehen

    addLabel() markiert einen benannten Punkt in der Timeline, und dieses Label kann dann als Positionsziel für spätere Tweens verwendet werden statt einer reinen Zahl.

  5. 05
    Timelines in eine Master-Timeline verschachteln

    Eine Master-Timeline kann eine Kind-Timeline als Einheit übernehmen und zu einem Zeitpunkt platzieren, wonach weitere Tweens relativ dazu hinzugefügt werden.

  6. 06
    Die gesamte Sequenz als Ganzes steuern

    Nach dem Erstellen wird die Timeline als einzelne Einheit abgespielt und pausiert, nicht Tween für Tween.

02 Finden Sie Ihren Favoriten

Wann Sie das gsap-timeline Skill verwenden

Das gsap-timeline-Skill in Claude Code oder Codex verwenden, wenn die Aufgabe Motion und Video dieser Art ist. Passform und Grenzen unten sind der eigenen Datei des Skills entnommen.

Gut geeignet

  • Aufbau einer mehrstufigen Animation, bei der mehrere Tweens nacheinander oder parallel ablaufen müssen.
  • Wenn der Nutzer nach Timelines, Sequenzierung oder Keyframe-artiger Animation in GSAP fragt.
  • Scroll-gesteuerte Timelines, die die Datei mit dem scroll-trigger-Skill kombiniert.

Grenzen kennen

  • Ein einzelner Tween oder ein Ease allein liegt außerhalb des Umfangs; die Datei leitet das an das Core-Skill weiter.

Was Sie bereitstellen sollten

  • Ein Target und Vars für jeden Kind-TweenJeder verkettete .to()-Aufruf nimmt einen Selector und ein Vars-Objekt; die Timeline setzt diese zu einer Sequenz zusammen.
  • Repeat und Yoyo auf Timeline-Ebenerepeat und yoyo verhalten sich wie bei Tweens, gelten aber für die gesamte Timeline statt für einen einzelnen Tween.
  • Callbacks auf Timeline-EbeneonComplete, onStart und onUpdate werden auf Timeline-Ebene übergeben, sodass sie für die Sequenz als Ganzes ausgelöst werden.

03 Innerhalb des Skills

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

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. Kein Verketten mit Delay

    Verketten Sie Animationen nicht mit delay, wenn eine Timeline sie sequenzieren kann; die Datei verweist auf gsap.timeline() und den Positionsparameter für mehrstufige Animationen.

  2. Positionsparameter statt Raten

    Verwenden Sie immer den Positionsparameter, das dritte Argument, um Tweens an bestimmten Zeitpunkten oder relativ zu Labels zu platzieren.

  3. Benennen Sie Ihre Labels

    Fügen Sie Labels mit addLabel() hinzu, damit die Sequenzierung lesbar und wartbar bleibt.

  4. Defaults im Constructor

    Übergeben Sie Defaults an den Timeline-Constructor, damit Kind-Tweens Duration, Ease und ähnliche Vars erben, statt sie pro Tween zu wiederholen.

  5. ScrollTrigger gehört auf die Timeline

    Setzen Sie ScrollTrigger auf die Timeline oder den obersten Tween, niemals auf Tweens innerhalb einer Timeline.

  6. Verschachteln Sie niemals eine ScrollTrigger-Animation

    Animationen, die einen ScrollTrigger enthalten, dürfen nicht verschachtelt werden; ScrollTrigger gehören ausschließlich auf Top-Level-Tweens oder -Timelines.

  7. Die Konstruktor-Dauer ist nicht die Sequenzlänge

    Lesen Sie die Dauer nicht am Timeline-Konstruktor als Tween-Dauer aus — die Datei bezeichnet dies als häufigen Fehler.

  8. Kennen Sie die Standardplatzierung

    ">" startet ein Tween, wenn die zuletzt hinzugefügte Animation endet, und ist die Standardplatzierung, während "<" es am Beginn dieser Animation ausrichtet.

04 In Betrieb nehmen

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

Fügen Sie gsap-timeline zu Claude Code, Codex oder Ihrem Agent hinzu

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

Generische skills-CLI-Form für skills/gsap-timeline/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 sequencing a [hero banner] animation: [the headline] slides up, then [the CTA button] appears 0.5s later, and [the product shot] scales in at the same start time as the button. I want shared duration and ease defaults on the timeline, and labels for the intro and outro so I can play from either one.

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 den Playhead mit tl.time(2) auf eine bestimmte Sekunde und prüfen Sie, ob jedes Tween dort beginnt, wo der Positionsparameter es vorsieht.
  • Prüfen Sie, ob die Defaults tatsächlich bei den Children angekommen sind: Im Beispiel der Datei verwenden beide Tweens 0,5 s und power2.out, ohne sie zu wiederholen.
  • Starten Sie von einem Label-Namen aus, um zu prüfen, ob das Label zum erwarteten Zeitpunkt hinzugefügt wurde.
  • Spielen Sie rückwärts ab, um die Sequenz umgekehrt zu prüfen; die Datei zeigt progress(1) vor reverse(), sodass die Timeline vollständig rückwärts abläuft.

In OpenDesign ist gsap-timeline 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-timeline/SKILL.md Inhalts-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-timeline.
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 diesen Skill verwendenGilt für mehrstufige Animationen und Sequenzierung; verweist auf die Core-, ScrollTrigger- und React-Skills.
  2. Eine Timeline erstellengsap.timeline() mit verketteten .to()-Aufrufen; Tweens werden standardmäßig angehängt, sofern nicht neu positioniert.
  3. PositionsparameterDrittes Argument oder vars-Eigenschaft: absolute, relative Offsets, Labels und Platzierung mit spitzen Klammern.
  4. Timeline-DefaultsDefaults, die an den Timeline-Konstruktor übergeben werden, werden von jedem Child-Tween übernommen.
  5. Timeline-Optionen (Konstruktor)paused, repeat, yoyo, Callbacks auf Timeline-Ebene und das defaults-Objekt, das an Children weitergegeben wird.
  6. LabelsaddLabel(), dann play() und tweenFromTo(), um von markierten Punkten aus zu starten.
  7. Verschachtelte TimelinesEine Master-Timeline kann Child-Timelines über master.add(child, 0) enthalten.
  8. Wiedergabe steuernplay, pause, reverse, restart, time, progress und kill für die Timeline aufgeführt.
  9. Offizielle GSAP Best PracticesFünf mit Häkchen versehene Praktiken: Timelines statt Delays, Positionsparameter, Labels, Defaults, Top-Level-ScrollTrigger.
  10. Nicht tunVier mit Kreuz markierte Fehler, darunter Delay-Verkettung, ausgelassene Defaults und verschachtelte ScrollTrigger.
Die eigene Beschreibung des Skills
Offizielles GSAP-Skill für Timelines — gsap.timeline(), Positionsparameter, Verschachtelung, Wiedergabe. Verwenden Sie es beim Sequenzieren von Animationen, beim Choreografieren von Keyframes oder wenn der Benutzer nach Animationssequenzierung, Timelines oder Animationsreihenfolge fragt (in GSAP oder beim Empfehlen einer Bibliothek, die Timelines unterstützt).

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei ist etwa 4.338 Zeichen lang. Vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum gsap-timeline-Skill

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

Wie erstelle ich eine Timeline, die erst startet, wenn ich sie auslöse?

Erstellen Sie sie mit paused: true im Konstruktor, wodurch die Timeline pausiert bleibt, und rufen Sie dann .play() auf, wenn sie ablaufen soll.

GSAP-Timeline

Führen Sie gsap-timeline bei einer echten Motion- und Video-Aufgabe aus.

Das gsap-timeline-Skill ist in OpenDesign enthalten. Laden Sie die App herunter, wählen Sie das Skill unter 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-timeline