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

GSAP Performance Skill.

Una skill per Claude Code e Codex per motion e video: prestazioni GSAP: trasformazioni, evitare layout thrash, will-change, batching.

  • Motion e video
  • Codice UI
Scarica OpenDesignGuida all'uso
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)
Intestazione e sezioni lette dal file originale il 14/09/2026 · 4.105 caratteri in totale

01 Cosa fa

Cosa fa la skill gsap-performance 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

Indicazioni ufficiali GSAP per mantenere le animazioni a un fluido 60fps, scegliendo proprietà economiche ed evitando lavoro di layout. Indica di animare le chiavi di transform (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) e opacity invece di width, height, top, left, margin o padding, di inserire will-change nel CSS solo sugli elementi che effettivamente si animano, e di eseguire tutte le letture del DOM prima delle scritture, così il layout non viene ricalcolato più volte del necessario.

Le indicazioni sul batching riguardano lo stagger rispetto a tween ritardati manualmente, la virtualizzazione per liste lunghe, gsap.quickTo() per gli elementi che seguono il mouse, la messa a punto di pin e scrub con ScrollTrigger.refresh() con debounce, e l'interruzione dei tween fuori schermo. È pensata per designer e sviluppatori che ottimizzano animazioni GSAP esistenti, non che le creano da zero.

Che cosa produce

  • Una dichiarazione will-change da aggiungere al CSS dell'elemento animato.
  • Una configurazione gsap.quickTo() per x e y, pilotata da un listener mousemove su un contenitore.
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Animare proprietà compatibili con il compositor

    Limitare l'animazione alle chiavi di transform e a opacity, che mantengono il lavoro sul compositor invece di innescare layout e paint.

  2. 02
    Lasciare che GSAP raggruppi le scritture

    GSAP raggruppa già internamente gli aggiornamenti, quindi il rischio è che il vostro codice DOM intrecci letture e scritture attorno ad esso.

  3. 03
    Riutilizzare un unico tween per i valori "caldi"

    Per le proprietà aggiornate a ogni movimento del puntatore, gsap.quickTo() mantiene attivo un unico tween invece di allocarne uno nuovo per ogni aggiornamento.

  4. 04
    Contenere il lavoro guidato dallo scroll

    Un valore di scrub basso, come scrub: 1, può ridurre il lavoro svolto durante lo scroll, ma il file indica di testare questa impostazione su dispositivi di fascia bassa.

  5. 05
    Interrompere le animazioni non visibili

    Metti in pausa o interrompi le animazioni fuori schermo e inattive, ad esempio quando l'utente si allontana dalla sezione.

02 Trova la tua applicazione

Quando Usare lo Skill gsap-performance

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

Buona applicazione

  • Un'animazione GSAP esistente perde fotogrammi e volete ridurne il costo di layout e paint.
  • Qualcuno chiede informazioni su jank, FPS o best practice per animazioni rapide in un progetto GSAP.
  • State animando una lista lunga e avete bisogno di indicazioni su virtualizzazione ed evitare centinaia di tween simultanei.
  • Una sezione di scroll ancora un elemento e dovete limitare cosa viene promosso.

Conosci i limiti

  • Impostare will-change o force3D su tutto per precauzione è esplicitamente scorretto; servono per gli elementi che si stanno effettivamente animando.
  • Centinaia di tween o ScrollTrigger sovrapposti sono considerati un anti-pattern quando non sono stati testati su dispositivi di fascia bassa.

Cosa fornire

  • Le proprietà attualmente modificate dalla vostra animazioneDovete sapere cosa viene animato per valutare se transform e opacity possano sostituire proprietà pesanti dal punto di vista del layout.

03 Dentro la skill

Le regole che la skill gsap-performance fornisce a Claude Code e Codex

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

  1. Evitare le proprietà che innescano il layout

    width, height, top, left, margin e padding attivano il layout e possono causare jank, quindi evitali quando un transform ottiene lo stesso effetto.

  2. Muovi con X e Y, Non con Left e Top

    x e y di GSAP sono transform (translate) per impostazione predefinita, quindi usali invece di left o top per il movimento.

  3. will-change Solo Dove Qualcosa Si Anima

    Imposta will-change in CSS sugli elementi che si animeranno; suggerisce al browser di promuovere il layer, quindi va usato solo sugli elementi animati.

  4. Usa Stagger Invece di Delay Manuali

    Quando l'animazione è identica su più elementi, usa stagger invece di molte tween separate con delay scritti a mano.

  5. Non Creare Mai Timeline per Ogni Frame

    Riutilizza le timeline; creare nuove timeline ad ogni frame è indicato come uno spreco.

  6. Aggiorna ScrollTrigger Solo per Reali Cambiamenti di Layout

    Chiama ScrollTrigger.refresh() quando il layout cambia effettivamente, ad esempio dopo il caricamento dei contenuti, non a ogni ridimensionamento, e applica un debounce dove possibile.

  7. Pulisci Ciò Che Avvii

    Pulisci o interrompi le animazioni fuori schermo e aggiorna ScrollTrigger quando il layout cambia, con debounce dove possibile, così nulla continua a girare oltre il necessario.

04 Mettila al lavoro

Installare gsap-performance in Claude Code o Codex

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

Aggiungere gsap-performance a Claude Code, Codex o al Vostro Agente

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

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

Forma generica della CLI skills per skills/gsap-performance/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
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.

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:

  • Cerca letture e scritture del DOM che si alternano, poiché ciò causa layout thrashing ripetuto; le letture dovrebbero venire tutte prima.
  • Verifica che non resti nulla in esecuzione: tween e ScrollTrigger rimasti attivi continuano a girare e danneggiano prestazioni e correttezza.
  • Verifica che le proprietà che animi restino su transform e opacity, così il browser esegue solo lavoro di composizione.

In OpenDesign gsap-performance è incluso: Plugins → Skills, selezionalo 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-performance/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 del 2026-09-14 per l'intero repository greensock/gsap-skills, che contiene 8 skill in questo catalogo. Non è un punteggio o conteggio di utilizzo per gsap-performance.
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 Questo SkillApplicalo quando ottimizzi animazioni GSAP per 60fps o jank; indica skill correlati.
  2. Preferisci Transform e OpacityAnima le proprietà transform e opacity; evita le proprietà di layout; x e y invece di left e top.
  3. will-changeAggiungi will-change in CSS sugli elementi che si animeranno per suggerire la promozione del layer.
  4. Raggruppa Letture e ScrittureGSAP raggruppa le scritture; esegui tutte le letture del DOM prima delle scritture per evitare il thrashing.
  5. Molti Elementi (Stagger, Liste)Stagger batte i delay manuali; virtualizza le liste lunghe; riutilizza le timeline invece di crearne di nuove.
  6. Proprietà aggiornate di frequente (es. mouse follower)Usa gsap.quickTo con un handler mousemove per valori x e y aggiornati spesso.
  7. ScrollTrigger e prestazioniEsegui il pin solo di ciò che è necessario, prova un valore di scrub basso, aggiorna solo quando cambia il layout.
  8. Riduci il lavoro simultaneoMetti in pausa o interrompi le animazioni fuori schermo; semplifica o sequenzia le animazioni di proprietà pesanti.
  9. Best practiceChecklist in quattro punti: transform e opacity, will-change delimitato, stagger, cleanup e refresh.
  10. Da evitareAnti-pattern: proprietà di layout per il movimento, will-change o force3D applicati indiscriminatamente, volumi non testati, cleanup ignorato.
Descrizione della skill
"Skill GSAP ufficiale per le prestazioni — preferire transforms, evitare thrashing di layout, will-change, batching. Usare quando si ottimizzano animazioni GSAP, si riduce il jank, o quando l'utente chiede delle prestazioni delle animazioni, FPS, o 60fps fluidi."

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

06 Prima di installare

Domande sulla skill gsap-performance

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

Devo usarla al posto di gsap-core?

No. Questa skill è il livello di prestazioni sopra il normale lavoro con GSAP: le animazioni si costruiscono con gsap-core (transform, autoAlpha) e gsap-timeline, mentre i dettagli sulle prestazioni di ScrollTrigger si trovano in gsap-scrolltrigger.

Come devo costruire un mouse follower?

Usa gsap.quickTo() per i valori x e y con una durata e un ease, poi chiama le funzioni restituite da un listener mousemove. In questo modo si riutilizza un unico tween invece di crearne uno nuovo a ogni aggiornamento.

GSAP Performance

Eseguire gsap-performance su un Task Reale di Motion e Video.

Lo skill gsap-performance è incluso in OpenDesign. Scaricate l'app, selezionate lo skill in Plugins → Skills, incollate il prompt qui sopra e leggete il piano prima del risultato.

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