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

GSAP Utils Skill.

Una skill per Claude Code e Codex dedicata a motion e video: helper gsap.utils – clamp, mapRange, interpolate, snap, wrap, pipe.

  • Motion e video
  • Codice UI
Scarica OpenDesignGuida all'uso
greensock/gsap-skills · skills/gsap-utils/SKILL.mdSKILL.md
--- name: gsap-utils description: Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP. --- ## When to Use This Skill ## Clamping and Ranges ## Random and Snap ## Units and Parsing ## Arrays and Collections ## Best practices
Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 12.051 caratteri in totale

01 Cosa fa

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

gsap.utils è l'insieme di funzioni helper pure di GSAP per matematica, intervalli, unità, colori e collezioni, e non richiede alcuna registrazione. La skill documenta clamp, mapRange, normalize, interpolate, random, snap, shuffle, distribute, getUnit, unitize, splitColor, selector, toArray, pipe, wrap e wrapYoyo con le rispettive firme, i default e output elaborati.

È pensata per gli sviluppatori che scrivono o revisionano codice GSAP e devono mappare lo scroll su un valore, normalizzare input, agganciare a una griglia (snap) o delimitare i selettori in un componente. Nel file ricorre uno schema costante: omettere il valore finale per ottenere una funzione riutilizzabile, eccetto random(), che richiede true.

Che cosa produce

  • Il valore trasformato, restituito direttamente quando si passa l'argomento value
  • Una funzione riutilizzabile che limita (clamp), mappa, normalizza o aggancia (snap) i valori che le vengono passati in seguito
  • Un nuovo array con gli stessi elementi in ordine casuale
  • Una funzione selettore delimitata che trova elementi solo all'interno dell'elemento o del ref indicato
Vedi l'esempio di prompt ↗

Come funziona

  1. 01
    Gli Helper Risiedono in gsap.utils

    Gli utils sono helper puri che non richiedono registrazione e possono essere chiamati ovunque JS controlli GSAP: nelle tween vars, nei callback di ScrollTrigger o Observer.

  2. 02
    Passa il Valore per Ultimo, Ottieni il Risultato Subito

    La maggior parte degli utils riceve prima la configurazione e come ultimo argomento il valore da trasformare, restituendo immediatamente il risultato trasformato.

  3. 03
    Omettilo per Ottenere una Forma a Funzione

    Omettendo quel valore finale, l'util restituisce una funzione che potrai chiamare in seguito con il valore, così una singola configurazione può servire molti valori.

  4. 04
    Ricorda che Random() Inverte lo Schema

    random() non usa l'omissione per la sua forma riutilizzabile; si passa true come ultimo argomento e si ottiene una funzione che restituisce un nuovo valore a ogni chiamata.

  5. 05
    Snap Può Essere Impostato Direttamente nella Tween

    Per movimenti su griglia o a passi puoi passare snap direttamente nelle tween vars, senza dover prima chiamare l'util.

  6. 06
    Concatena le Trasformazioni con Pipe

    pipe compone le funzioni da sinistra a destra, così normalize e poi snap possono essere applicati come un'unica funzione all'interno di una tween o di un callback.

02 Trova la tua applicazione

Quando usare la Skill gsap-utils

Usa la skill gsap-utils in Claude Code o Codex quando il lavoro è motion e video di questo tipo. Fit e limiti qui sotto sono presi dal file della skill stessa.

Buona applicazione

  • Conversione della posizione di scroll, di un valore di progresso 0-1 o di un altro intervallo di input in un intervallo di animazione
  • Animazione su una griglia o a passi fissi all'interno di una tween
  • Gestione di scroll infinito o altri valori ciclici con wrap e wrapYoyo
  • Distribuzione di valori come scale, opacity, x o delay su molti elementi contemporaneamente
  • Randomizza l'ordine degli elementi prima di applicare lo stagger

Conosci i limiti

  • Utility di easing come CustomEase, che il file collega a gsap-plugins piuttosto che a gsap.utils
  • Sovrascrivere utils o basarsi su comportamenti non documentati
  • Costruire l'animazione stessa, che il file collega a gsap-core, gsap-timeline e gsap-scrolltrigger

Cosa fornire

  • Il valore che si desidera trasformarePassalo come argomento finale per ottenere subito un risultato; omettilo e fornisci il valore in seguito alla funzione restituita.
  • Un elemento di scope o un ref per selector()Passa un elemento DOM o un ref del framework in modo che la funzione selector restituita corrisponda solo ai discendenti di quell'elemento.
  • Una stringa di colore per splitColorFunzionano rgb(), rgba(), hsl(), hsla(), i valori hex e i nomi dei colori; passa true come secondo argomento per ottenere i componenti HSL invece.
  • Una configurazione distribute, tutte le chiavi opzionaliFornisci le impostazioni di distribuzione come base, amount o each, from, grid, axis ed ease, oppure lasciala vuota per i valori predefiniti.

03 Dentro la skill

Regole che lo Skill gsap-utils Fornisce a Claude Code e Codex

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

  1. Omettere il Valore Quando un Intervallo si Ripete

    Quando lo stesso intervallo o la stessa configurazione viene riutilizzata, come in un handler di scroll o in una callback di tween, conserva la funzione restituita invece di ricostruire la configurazione a ogni chiamata.

  2. Usare la Forma Stringa Random nelle Tween Vars

    Scrivi "random(-100, 100)", "random(-100, 100, 5)" oppure "random([0, 100, 200])" come valore di proprietà; GSAP valuta la stringa per ciascun target.

  3. Snap per le Griglie, toArray per il Resto

    Usa snap per valori allineati a una griglia o basati su step, e usa toArray ogni volta che GSAP o il tuo codice necessitano di un vero array a partire da un selettore o da una NodeList.

  4. Delimitare i Selettori all'Interno dei Componenti

    Chiama gsap.utils.selector(scope) in modo che un selettore come ".box" corrisponda solo ai discendenti di quel contenitore o ref e non a tutto il documento.

  5. Amount o Each, Mai Entrambi

    In una configurazione distribute, amount suddivide un totale tra tutti i target (amount 1 su 100 target equivale a una distanza di 0.01) mentre each imposta uno step fisso per target, come 0, 1, 2, 3.

  6. mapRange e Normalize Funzionano solo con i Numeri

    Non aspettarti che gestiscano le unità; quando le unità contano, usa invece getUnit o unitize.

04 Mettila al lavoro

Installa gsap-utils 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-utils 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-utils

Forma generica del CLI skills per skills/gsap-utils/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
Use gsap.utils to drive a [scroll-linked effect] in [my component]: map the ScrollTrigger progress from 0-1 to 0-360 and snap the result to the nearest 5, then set the starting x of each [card] with the string form "random(-100, 100, 5)". Scope the selectors to the [container] ref with gsap.utils.selector so they do not match the whole document.

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:

  • Confronta una chiamata di esempio con il risultato documentato, ad esempio mapRange(0, 100, 0, 500, 50) che restituisce 250
  • Testa wrap a entrambe le estremità dell'intervallo per confermare il risultato ciclico
  • Passa un contenitore come secondo argomento di toArray per confermare che il risultato sia limitato a quell'ambito
  • Verifica che un colore RGBA restituisca quattro elementi invece di tre
  • Conferma che getUnit restituisca la stringa dell'unità, e una stringa vuota per i numeri senza unità

In OpenDesign gsap-utils è 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-utils/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 effettuata il 14/09/2026 per l'intero repository greensock/gsap-skills, che contiene 8 skill in questo catalogo. Non è una valutazione o un conteggio di utilizzo per gsap-utils.
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.
Descrizione della skill
"Skill GSAP ufficiale per gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Da usare quando l'utente chiede informazioni su gsap.utils, clamp, mapRange, random, snap, toArray, wrap o utility helper in GSAP."

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

GSAP Utils

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

La skill gsap-utils è inclusa in OpenDesign. Scarica l'app, seleziona la skill in Plugins → Skills, incolla il prompt 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-utils