83.3K+Scarica
Vai alla guida all’uso
gsap-timelinedi GreenSock

GSAP Timeline Skill.

Una skill per Claude Code e Codex dedicata a motion e video: timeline gSAP – parametro di posizione, nesting e controllo della riproduzione.

  • Motion e video
  • Codice UI
Scarica OpenDesignGuida all'uso
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 e intestazioni di sezione letti dal file originale il 14/09/2026 · 4.338 caratteri in totale

01 Cosa fa

Cosa Fa la Skill gsap-timeline in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Una skill ufficiale di GSAP per sequenziare animazioni con gsap.timeline(). Copre la creazione di una timeline e il concatenamento di tween che per default vengono accodati, per poi riposizionarli con il parametro position — secondi assoluti, offset relativi "+=0.5"/"-=0.2", label e posizionamento con "<"/">".

Documenta le opzioni del costruttore della timeline (paused, repeat, yoyo, onComplete/onStart/onUpdate, defaults), l'etichettatura con addLabel() e il seeking con play()/tweenFromTo(), l'annidamento di timeline figlie in una master, e i metodi di playback tra cui restart, time, progress e kill. Si conclude con le best practice di GSAP e le trappole da evitare, in particolare il concatenamento con delay e l'inserimento di ScrollTrigger sui tween dentro una timeline.

Che cosa produce

  • Un oggetto timeline memorizzato in una variabile, la tl in ogni esempio, a cui vengono aggiunti i tween concatenati e su cui agiscono i metodi di playback.
  • Un nuovo Tween restituito da tweenFromTo che anima la playhead tra due label mentre la timeline è in pausa, senza ease.
  • Una timeline terminata: chiamare kill() rimuove la timeline e, per default, anche i suoi figli.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Creare una Timeline e Concatenare Tween

    Chiamate gsap.timeline() e concatenate chiamate .to(). Senza indicare una posizione, ogni tween viene accodato dopo che il precedente termina, quindi l'ordine è quello in cui li scrivete.

  2. 02
    Posizionate Ogni Tween nel Tempo

    Il posizionamento è impostato dal terzo argomento o da una proprietà position in vars: secondi assoluti, offset relativi, nomi di label, oppure < e > relativi all'animazione aggiunta più recentemente.

  3. 03
    Date alla Timeline dei Default Condivisi

    I default passati al costruttore della timeline vengono uniti a ogni tween figlio, così durata ed ease vengono dichiarati una sola volta per l'intera sequenza.

  4. 04
    Etichettare i Momenti Chiave

    addLabel() contrassegna un punto denominato nella timeline, e quell'etichetta può poi essere usata come target di posizione per i tween successivi invece di un numero grezzo.

  5. 05
    Annidare Timeline Dentro una Master

    Una timeline master può prendere una timeline figlia come unità e posizionarla a un certo momento, dopodiché altri tween vengono aggiunti in relazione a essa.

  6. 06
    Guidare l'Intera Sequenza in Blocco

    Una volta costruita, la timeline viene avviata e sospesa come un'unica unità piuttosto che tween per tween.

02 Trova la tua applicazione

Quando Usare lo Skill gsap-timeline

Usa lo skill gsap-timeline in Claude Code o Codex quando il lavoro riguarda motion e video di questo tipo. Ambito e limiti qui sotto sono presi dal file dello skill stesso.

Buona applicazione

  • Costruire un'animazione multi-fase in cui diversi tween devono essere eseguiti in sequenza o in parallelo.
  • Quando l'utente chiede informazioni su timeline, sequenziamento o animazione in stile keyframe in GSAP.
  • Timeline guidate dallo scroll, che il file abbina alla skill scroll-trigger.

Conosci i limiti

  • Un singolo tween o un ease a sé stante non rientrano nell'ambito; il file rimanda alla skill core.

Cosa fornire

  • Un target e vars per ogni tween figlioOgni chiamata concatenata .to() prende un selettore e un oggetto vars; la timeline li compone in un'unica sequenza.
  • repeat e yoyo a livello di timelinerepeat e yoyo si comportano come sui tween ma si applicano all'intera timeline piuttosto che a un singolo tween.
  • Callback a livello di timelineonComplete, onStart e onUpdate vengono passati a livello di timeline, quindi si attivano per la sequenza nel suo insieme.

03 Dentro la skill

Regole che la Skill gsap-timeline Fornisce a Claude Code e Codex

8 istruzioni concrete, valori predefiniti e limiti che il SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

  1. Nessun Concatenamento con Delay

    Non concatenare le animazioni con delay quando una timeline può sequenziarle; il file rimanda a gsap.timeline() e al parametro di posizione per l'animazione multi-fase.

  2. Il Parametro di Posizione Invece di Indovinare

    Usare sempre il parametro di posizione, il terzo argomento, per posizionare i tween in momenti specifici o in relazione alle etichette.

  3. Nominare le Proprie Etichette

    Aggiungere etichette con addLabel() affinché il sequenziamento rimanga leggibile e mantenibile.

  4. Valori Predefiniti sul Costruttore

    Passare i valori predefiniti nel costruttore della timeline in modo che i tween figli ereditino duration, ease e vars simili invece di ripeterli per ogni tween.

  5. ScrollTrigger va sulla Timeline

    Mettere ScrollTrigger sulla timeline o sul tween di primo livello, mai sui tween interni a una timeline.

  6. Non annidare mai un'animazione ScrollTrigger

    Le animazioni che contengono uno ScrollTrigger non devono essere annidate; gli ScrollTrigger devono trovarsi solo su Tween o Timeline di livello superiore.

  7. La durata del costruttore non è la lunghezza della sequenza

    Non interpretare la durata sul costruttore della timeline come durata del tween — il file definisce questo un errore comune.

  8. Conoscere il posizionamento predefinito

    ">" avvia un tween quando termina l'animazione appena aggiunta ed è il posizionamento predefinito, mentre "<" lo allinea all'inizio di quell'animazione.

04 Mettila al lavoro

Installa gsap-timeline in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi gsap-timeline a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

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

Forma generica del CLI skills per skills/gsap-timeline/SKILL.md; il repository potrebbe documentare un proprio percorso.

Dai alla Skill un Primo Compito di Motion e Video

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

  • Posizioni il playhead su un secondo specifico con tl.time(2) e verifichi che ogni tween inizi dove il parametro di posizione lo prevede.
  • Verifichi che i valori predefiniti abbiano effettivamente raggiunto i figli: nell'esempio del file entrambi i tween usano 0.5s e power2.out senza ripeterli.
  • Riproduca a partire da un nome di label per confermare che la label sia stata aggiunta nel momento previsto.
  • Inverta per visualizzare in anteprima la sequenza al contrario; il file mostra progress(1) prima di reverse() così la timeline viene riprodotta interamente al contrario.

In OpenDesign gsap-timeline è incluso: Plugins → Skills, selezioni la skill nella barra superiore.

Scarica OpenDesignLeggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Branch main
File della skill
skills/gsap-timeline/SKILL.md Checksum del contenuto registrato alla verifica; commit aed9cfd
License
MIT Da LICENSE; SKILL.md indica "MIT".
Stelle del repository
15.248 Snapshot GitHub presa il 14-09-2026 per l'intero repository greensock/gsap-skills, che contiene 8 skill in questo catalogo. Non è un punteggio o conteggio di utilizzo per gsap-timeline.
Verificato da OpenDesign
14 settembre 2026 Il file sorgente, il percorso, il testo della licenza e il conteggio delle stelle sono stati verificati. Incluso nella build principale di OpenDesign (verificato il 28 agosto 2026); non è stata registrata un'esecuzione live su questa pagina.

All'interno di SKILL.md

  1. Quando usare questa skillSi applica ad animazioni a più fasi e sequenziamento; fa riferimento alle skill core, scroll-trigger e React.
  2. Creare una Timelinegsap.timeline() con chiamate .to() concatenate; i tween si aggiungono di default a meno che non vengano riposizionati.
  3. Parametro di posizioneTerzo argomento o proprietà vars: offset assoluti, relativi, label e posizionamento con parentesi angolari.
  4. Valori predefiniti della TimelineI valori predefiniti passati al costruttore della timeline vengono ereditati da ogni tween figlio.
  5. Opzioni della Timeline (costruttore)paused, repeat, yoyo, callback a livello di timeline e l'oggetto defaults passato ai figli.
  6. LabeladdLabel(), poi play() e tweenFromTo() per iniziare da punti etichettati.
  7. Annidare TimelineUna timeline principale può contenere timeline figlie tramite master.add(child, 0).
  8. Controllo della riproduzioneplay, pause, reverse, restart, time, progress e kill elencati per la timeline.
  9. Best practice ufficiali GSAPCinque pratiche con segno di spunta: timeline al posto dei delay, parametro di posizione, label, defaults, ScrollTrigger di livello superiore.
  10. Da non fareQuattro errori contrassegnati con croce, inclusi il concatenamento di delay, i defaults saltati e gli ScrollTrigger annidati.
Descrizione della skill
"Skill ufficiale GSAP per timeline — gsap.timeline(), parametro position, nesting, riproduzione. Usare quando si sequenziano animazioni, si coreografano keyframe, o quando l'utente chiede di sequenziamento animazioni, timeline o ordine delle animazioni (in GSAP o quando si raccomanda una libreria che supporta le timeline)."

Descrizione front-matter da SKILL.md. Il file completo è di circa 4.338 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sulla skill gsap-timeline

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Come posso costruire una timeline che non parte finché non la avvio?

Crearla con paused: true nel costruttore, in modo che la timeline resti in pausa, quindi chiamare .play() quando si desidera farla partire.

GSAP Timeline

Esegui gsap-timeline su un Task Reale di Motion e Video.

Lo skill gsap-timeline è incluso in OpenDesign. Scarica l'app, scegli lo skill in Plugins → Skills, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesignEsplora tutte le skill
Terminale
npx skills add https://github.com/greensock/gsap-skills --skill gsap-timeline