83.3K+Baixar
Ir para o guia de uso
gsap-utilspor GreenSock

GSAP Utils Skill.

Uma skill do Claude Code e Codex para movimento e vídeo: helpers gsap.utils: clamp, mapRange, interpolate, snap, wrap, pipe.

  • Motion e Vídeo
  • Código de UI
Baixar OpenDesignVer guia de 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 cabeçalhos de seção lidos do arquivo upstream em 2026-09-14 · 12.051 caracteres no total

01 O que faz

O que o Skill gsap-utils faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

gsap.utils é o conjunto de funções auxiliares puras do GSAP para matemática, intervalos, unidades, cores e coleções, e não exige registro. O skill documenta clamp, mapRange, normalize, interpolate, random, snap, shuffle, distribute, getUnit, unitize, splitColor, selector, toArray, pipe, wrap e wrapYoyo com suas assinaturas, padrões e resultados.

É para desenvolvedores que escrevem ou revisam código GSAP que precisa mapear o scroll para um valor, normalizar entradas, encaixar em uma grade ou delimitar seletores em um componente. Um padrão percorre todo o arquivo: omita o valor final para obter uma função reutilizável, exceto random(), que recebe true.

O que ele produz

  • O valor transformado, retornado diretamente quando você passa o argumento do valor
  • Uma função reutilizável que aplica clamp, mapeia, normaliza ou encaixa os valores que você passar depois
  • Um novo array com os mesmos elementos em ordem aleatória
  • Uma função seletora com escopo que encontra elementos apenas dentro do elemento ou da ref informados
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Os helpers ficam em gsap.utils

    Os utils são helpers puros que não exigem registro e podem ser chamados em qualquer lugar em que o JS comande o GSAP: vars de tween, callbacks de ScrollTrigger ou de Observer.

  2. 02
    Passe o valor por último e receba o resultado na hora

    A maioria dos utils recebe primeiro a configuração e, como argumento final, o valor a transformar, devolvendo o resultado transformado na hora.

  3. 03
    Omita o valor para obter a forma de função

    Omita esse valor final e o util devolve uma função que você chama depois com o valor, de modo que uma única configuração pode servir a muitos valores.

  4. 04
    Lembre-se: random() inverte o padrão

    random() não usa a omissão para sua forma reutilizável; você passa true como último argumento e recebe uma função que retorna um valor novo a cada chamada.

  5. 05
    O snap pode ser definido no próprio tween

    Para movimento em grade ou por passos, você pode passar snap diretamente nas vars do tween em vez de chamar o util antes.

  6. 06
    Encadeie transformações com pipe

    pipe compõe funções da esquerda para a direita, então normalize e depois snap podem ser aplicados como uma única função dentro de um tween ou callback.

02 Encontre o ideal para você

Quando Usar a Skill gsap-utils

Use a skill gsap-utils no Claude Code ou Codex quando o trabalho for motion and video deste tipo. Fit e limites abaixo são extraídos do próprio arquivo da skill.

Boa Combinação

  • Converter a posição do scroll, um valor de progresso de 0 a 1 ou outro intervalo de entrada em um intervalo de animação
  • Animar em uma grade ou em passos fixos dentro de um tween
  • Scroll infinito ou outro tratamento cíclico de valores com wrap e wrapYoyo
  • Distribuir valores como scale, opacity, x ou delay por muitos elementos de uma vez
  • Randomizar a ordem dos elementos antes de escaloná-los

Conheça os Limites

  • Utilitários de easing como CustomEase, que o arquivo coloca em gsap-plugins em vez de gsap.utils
  • Sobrescrever utilitários ou contar com comportamento não documentado
  • Construir a própria animação, que o arquivo combina com gsap-core, gsap-timeline e gsap-scrolltrigger

O Que Fornecer

  • O valor que você quer transformarPasse-o como último argumento para obter um resultado imediatamente; omita-o e forneça o valor depois à função que você recebeu de volta.
  • Um elemento de escopo ou ref para selector()Passe um elemento DOM ou uma ref de framework para que a função de seletor retornada corresponda apenas aos descendentes dele.
  • Uma string de cor para splitColorrgb(), rgba(), hsl(), hsla(), hex e cores nomeadas funcionam; passe true como segundo argumento para obter componentes HSL.
  • Uma configuração de distribute, com todas as chaves opcionaisInforme as definições de distribuição, como base, amount ou each, from, grid, axis e ease, ou deixe vazio para usar os padrões.

03 Dentro da skill

Regras que a skill gsap-utils dá ao Claude Code e ao Codex

6 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

  1. Omita o valor quando um intervalo se repete

    Quando o mesmo intervalo ou configuração é reutilizado, como em um manipulador de scroll ou callback de tween, guarde a função retornada em vez de recriar a configuração a cada chamada.

  2. Use a forma de string aleatória nas variáveis de tween

    Escreva "random(-100, 100)", "random(-100, 100, 5)" ou "random([0, 100, 200])" como valor de propriedade; o GSAP avalia a string por destino.

  3. Use snap nas grades e toArray no resto

    Recorra a snap em valores alinhados a grades ou baseados em passos, e use toArray sempre que o GSAP ou seu próprio código precisar de um array real a partir de um seletor ou NodeList.

  4. Limite os seletores ao escopo dentro dos componentes

    Chame gsap.utils.selector(scope) para que um seletor como ".box" corresponda apenas aos descendentes desse contêiner ou ref, e não ao documento inteiro.

  5. Amount ou each, nunca os dois

    Em uma configuração de distribute, amount divide um total entre todos os destinos (amount 1 em 100 destinos fica com 0,01 de intervalo) enquanto each define um passo fixo por destino, como 0, 1, 2, 3.

  6. mapRange e normalize aceitam apenas números

    Não espere que eles tratem unidades; quando as unidades importarem, use getUnit ou unitize.

04 Coloque em prática

Instalar gsap-utils no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar gsap-utils ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

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

Forma genérica da CLI skills para skills/gsap-utils/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Motion e Vídeo

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

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: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

  • Compare uma chamada de exemplo com o resultado documentado, como mapRange(0, 100, 0, 500, 50) retornando 250
  • Teste wrap nas duas extremidades do intervalo para confirmar o resultado cíclico
  • Passe um container como o segundo argumento de toArray para confirmar que o resultado está delimitado corretamente
  • Verifique se uma cor RGBA retorna quatro elementos em vez de três
  • Confirme que getUnit retorna a string da unidade e uma string vazia para números sem unidade

No OpenDesign, gsap-utils vem incluído: Plugins → Skills, selecione-o na barra superior.

Baixar OpenDesignLer o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Branch main
Arquivo da skill
skills/gsap-utils/SKILL.md Checksum de conteúdo registrado na verificação; commit aed9cfd
License
MIT De LICENSE; SKILL.md diz "MIT".
Estrelas do repositório
15.248 Instantâneo do GitHub capturado em 14/09/2026 para todo o repositório greensock/gsap-skills, que contém 8 skills neste catálogo. Não é uma classificação ou contagem de uso para gsap-utils.
Verificado pelo OpenDesign
2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.
A Descrição da Própria Skill
Skill oficial do GSAP para gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use quando o usuário perguntar sobre gsap.utils, clamp, mapRange, random, snap, toArray, wrap ou utilitários auxiliares no GSAP.

Descrição front-matter do SKILL.md. O arquivo completo tem cerca de 12.051 caracteres. Leia o arquivo completo no GitHub.

Utilitários GSAP

Execute gsap-utils em uma tarefa real de movimento e vídeo.

A skill gsap-utils já vem com o OpenDesign. Baixe o aplicativo, selecione a skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesignVer todas as skills
Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-utils