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

GSAP Performance Skill.

Uma skill de Claude Code e Codex para movimento e vídeo: performance do GSAP: transforms, evitar layout thrash, will-change, batching.

  • Motion e Vídeo
  • Código de UI
Baixar OpenDesignVer guia de 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)
Front matter e títulos de seção lidos do arquivo original em 14/09/2026 · 4.105 caracteres no total

01 O que faz

O que a skill gsap-performance 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

Orientação oficial do GSAP para manter animações em 60fps estáveis, escolhendo propriedades baratas e evitando trabalho de layout. Ela diz para animar chaves de transform (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) e opacity em vez de width, height, top, left, margin ou padding, para colocar will-change no CSS apenas em elementos que realmente animam, e para fazer todas as leituras do DOM antes das escritas para que o layout não seja recalculado repetidamente.

A orientação sobre agrupamento cobre stagger em vez de tweens com atraso manual, virtualização para listas longas, gsap.quickTo() para seguidores de mouse, ajuste de pin e scrub com ScrollTrigger.refresh() com debounce, e a eliminação de tweens fora da tela. É destinada a designers e desenvolvedores que ajustam animações GSAP existentes, não a quem as está construindo.

O que ele produz

  • Uma declaração will-change para adicionar ao CSS do elemento animado.
  • Uma configuração de gsap.quickTo() para x e y, controlada por um listener de mousemove em um container.
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Animar Propriedades Compatíveis com o Compositor

    Restrinja a animação a chaves de transform e opacity, que mantêm o trabalho no compositor em vez de acionar layout e paint.

  2. 02
    Deixe o GSAP Agrupar as Escritas

    O GSAP já agrupa atualizações internamente, então o risco é o seu próprio código DOM intercalando leituras e escritas em torno dele.

  3. 03
    Reutilize um Tween para Valores Frequentes

    Para propriedades atualizadas em cada movimento do ponteiro, o gsap.quickTo() mantém um único tween ativo em vez de alocar um novo a cada atualização.

  4. 04
    Controle o Trabalho Guiado por Scroll

    Um valor pequeno de scrub, como scrub: 1, pode reduzir o trabalho feito durante o scroll, mas o arquivo diz para testar essa configuração em dispositivos de baixo desempenho.

  5. 05
    Pare Animações que Você Não Consegue Ver

    Pause ou elimine animações fora da tela e inativas, por exemplo quando o usuário sai da seção.

02 Encontre o ideal para você

Quando Usar a Skill gsap-performance

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

Boa Combinação

  • Uma animação GSAP existente está perdendo quadros e você quer reduzir seu custo de layout e paint.
  • Alguém pergunta sobre travamentos, FPS ou boas práticas para animação rápida em um projeto GSAP.
  • Você está animando uma lista longa e precisa de orientação sobre virtualização e como evitar centenas de tweens simultâneos.
  • Uma seção de scroll fixa um elemento e você precisa limitar o que é promovido.

Conheça os Limites

  • Definir will-change ou force3D em tudo por precaução é explicitamente errado; eles são para elementos que realmente estão animando.
  • Centenas de tweens ou ScrollTriggers sobrepostos são tratados como um anti-padrão quando não foram testados em dispositivos de baixo desempenho.

O Que Fornecer

  • As propriedades que sua animação atualmente alteraVocê precisa saber o que está sendo animado para avaliar se transform e opacity podem substituir propriedades pesadas de layout.

03 Dentro da skill

Regras que a Skill gsap-performance Dá ao Claude Code e ao Codex

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

  1. Evite Propriedades que Acionam Layout

    width, height, top, left, margin e padding disparam layout e podem causar jank, então evite-os quando um transform alcançar o mesmo efeito.

  2. Movimente com X e Y, Não com Left e Top

    x e y do GSAP são transforms (translate) por padrão, então use-os em vez de left ou top para movimento.

  3. will-change Somente Onde Algo é Animado

    Defina will-change no CSS nos elementos que serão animados; isso sinaliza ao navegador para promover a camada, por isso deve ser usado apenas em elementos animados.

  4. Use Stagger em Vez de Delays Manuais

    Quando a animação é idêntica entre elementos, use stagger em vez de vários tweens separados com delays escritos à mão.

  5. Nunca Construa Timelines por Frame

    Reutilize timelines; criar novas timelines a cada frame é apontado como um desperdício.

  6. Atualize o ScrollTrigger Apenas em Mudanças Reais de Layout

    Chame ScrollTrigger.refresh() quando o layout realmente mudar, como após o carregamento de conteúdo, não em cada redimensionamento, e faça debounce sempre que possível.

  7. Limpe o Que Você Inicia

    Limpe ou finalize animações fora da tela e atualize o ScrollTrigger quando o layout mudar, com debounce sempre que possível, para que nada continue rodando após ser necessário.

04 Coloque em prática

Instalar gsap-performance 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-performance 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-performance

Forma genérica do CLI skills para skills/gsap-performance/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
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: 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:

  • Procure leituras e escritas do DOM que se intercalam, pois isso causa layout thrashing repetido; as leituras devem sempre vir primeiro.
  • Confirme que nada ficou rodando: tweens e ScrollTriggers esquecidos continuam executando e prejudicam desempenho e correção.
  • Confirme que as propriedades animadas permanecem em transform e opacity, para que o navegador paginе apenas trabalho de composição.

No OpenDesign gsap-performance 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-performance/SKILL.md Checksum do conteúdo registrado na verificação; commit aed9cfd
License
MIT De LICENSE; SKILL.md diz "MIT".
Estrelas do repositório
15.248 Snapshot do GitHub tirado em 2026-09-14 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-performance.
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.

Dentro do SKILL.md

  1. Quando Usar Este SkillAplique ao otimizar animações GSAP para 60fps ou jank; aponta para skills relacionados.
  2. Prefira Transform e OpacityAnime propriedades de transform e opacity; evite propriedades de layout; x e y em vez de left e top.
  3. will-changeAdicione will-change no CSS nos elementos que serão animados para sinalizar a promoção de camada.
  4. Agrupe Leituras e EscritasO GSAP agrupa escritas; faça todas as leituras do DOM antes das escritas para evitar thrashing.
  5. Muitos Elementos (Stagger, Listas)Stagger supera delays manuais; virtualize listas longas; reutilize timelines em vez de criar novas.
  6. Propriedades atualizadas frequentemente (ex.: seguidores de mouse)Use gsap.quickTo com um handler de mousemove para valores de x e y atualizados com frequência.
  7. ScrollTrigger e DesempenhoFixe apenas o necessário, tente um valor de scrub pequeno, atualize somente quando o layout mudar.
  8. Reduza o Trabalho SimultâneoPause ou interrompa animações fora da tela; simplifique ou sequencie animações pesadas de propriedades.
  9. Boas práticasChecklist de quatro pontos: transform e opacity, will-change escopado, stagger, limpeza e refresh.
  10. Não FaçaAntipadrões: propriedades de layout para movimento, will-change ou force3D generalizados, volume não testado, limpeza ignorada.
A Descrição da Própria Skill
"Skill oficial do GSAP para performance — prefira transforms, evite thrashing de layout, will-change, batching. Use ao otimizar animações GSAP, reduzir jank, ou quando o usuário perguntar sobre performance de animação, FPS, ou 60fps suave."

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

06 Antes de instalar

Perguntas sobre o Skill gsap-performance

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Devo usar isso em vez de gsap-core?

Não. Este skill é a camada de desempenho sobre o trabalho normal com GSAP: as animações são construídas com gsap-core (transforms, autoAlpha) e gsap-timeline, e os detalhes de desempenho do ScrollTrigger ficam no gsap-scrolltrigger.

Como devo construir um seguidor de mouse?

Use gsap.quickTo() para os valores x e y com uma duration e ease, depois chame as funções retornadas a partir de um listener de mousemove. Isso reutiliza um único tween em vez de criar um novo a cada atualização.

GSAP Performance

Execute gsap-performance em uma Tarefa Real de Motion e Video.

A skill gsap-performance vem dentro do OpenDesign. Baixe o app, escolha 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-performance