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

GSAP Plugins Skill.

Uma skill do Claude Code e Codex para movimento e vídeo: plugins gSAP: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG e física.

  • Motion e Vídeo
  • Código de UI
Baixar OpenDesignVer guia de uso
greensock/gsap-skills · skills/gsap-plugins/SKILL.mdSKILL.md
--- name: gsap-plugins description: Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration. --- ## When to Use This Skill ## Licensing & Install (important) ## Registering Plugins ## Scroll ## DOM / UI ## Text
Front matter e cabeçalhos de seção lidos do arquivo upstream em 2026-09-14 · 21.477 caracteres no total

01 O que faz

O que a Skill gsap-plugins 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

Skill oficial do GSAP que abrange o registro de plugins e todos os plugins fora do ScrollTrigger: ScrollTo, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath, CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, PixiPlugin e GSDevTools.

Ela começa com licenciamento — todo plugin é gratuito, sem assinatura do Club GSAP ou token de autenticação — e depois traz a configuração por plugin: vars do Flip.from, opções do Draggable, vars do SplitText.create, opções do morphSVG, alinhamento do motionPath. Voltada para designers e desenvolvedores que instalam tudo a partir do pacote público gsap no npm e precisam da ordem correta de chamadas, dos padrões e das ressalvas. Skills relacionadas: gsap-core, gsap-scrolltrigger, gsap-react.

O que ele produz

  • Um tween de scroll que anima a janela ou qualquer elemento com rolagem até uma posição ou destino.
  • Uma instância de SplitText que expõe chars, words e lines e, quando mask é definido, masks.
  • Um elemento path convertido, colocado no DOM no lugar de um circle, rect, ellipse ou line.
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Registre os Plugins Uma Única Vez, no Início

    Cada plugin é registrado uma única vez para que o GSAP e os bundlers saibam que devem incluí-lo, antes de ser usado em qualquer tween ou chamada de API.

  2. 02
    Capture, Altere e Depois Anime com o Flip

    O Flip é uma sequência de três etapas: ler o estado antigo, modificar o DOM e depois animar do estado registrado até o novo.

  3. 03
    Crie Interações de Arrastar e Soltar (Drag and Throw)

    Draggable.create recebe um type, bounds opcionais e inertia; o InertiaPlugin fornece o momentum após a soltura.

  4. 04
    Divida o Texto em Unidades Animáveis

    O SplitText coloca cada caractere, palavra e/ou linha em seu próprio elemento, para que possam ser animados com stagger ou individualmente.

  5. 05
    Desenhe ou Faça Morph em SVG

    Os plugins de SVG animam valores de stroke dash para efeitos de desenho, ou o atributo d do path para transformar uma forma em outra.

  6. 06
    Recorra aos Plugins de Easing e Física

    Os plugins de easing adicionam curvas personalizadas ou eases nomeados; os plugins de física geram movimento a partir de valores de velocidade, ângulo e gravidade.

02 Encontre o ideal para você

Quando Usar a Skill gsap-plugins

Use a skill gsap-plugins 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

  • Rolar até um elemento ou uma posição em pixels quando o ScrollTrigger não está envolvido.
  • Animar entre dois estados de layout, como listas reordenadas, grades ou painéis expandidos e recolhidos.
  • Sliders, cards e listas reordenáveis que precisam de comportamento de arrastar, girar ou lançar no mouse e no toque.
  • Revelações de texto animadas por caractere, por palavra ou por linha.
  • Transformações de ícone para ícone, transições de forma e outras animações SVG baseadas em path.

Conheça os Limites

  • O SplitText não consegue dividir elementos de texto SVG.
  • O DrawSVG anima apenas o stroke, nunca o fill, e não consegue alterar visualmente o conteúdo de um elemento use.
  • O trabalho com ScrollTrigger pertence a um skill separado, e não a este.
  • Texto que usa text-wrap: balance combina mal com a divisão.

O Que Fornecer

  • A lista de plugins a registrarTodo plugin usado no projeto deve ser nomeado em uma única chamada gsap.registerPlugin para que os bundlers o incluam.
  • A estrutura DOM do ScrollSmootherO ScrollSmoother precisa do ScrollTrigger mais um wrapper de conteúdo dentro de um wrapper suave, com elementos de posição fixa permitidos fora dele.
  • Um destino para o SplitTextO SplitText.create recebe um seletor, elemento ou array como destino, junto com as vars de divisão.
  • Uma forma para o MorphSVGA propriedade obrigatória shape aceita um seletor, um elemento ou uma string de path bruta como destino da transformação.
  • Fontes e layout já carregadosPara fontes personalizadas, divida o texto depois que elas carregarem ou use autoSplit com onSplit para que as redivisões ocorram no momento certo.

03 Dentro da skill

Regras que o Skill gsap-plugins Dá ao Claude Code e ao Codex

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

  1. Registre Antes de Animar

    Um plugin deve ser registrado antes de ser usado em qualquer tween ou chamada de API — o registro é o primeiro passo, não uma correção para uma falha.

  2. Instale a Partir do Pacote Público Gsap

    Tudo é distribuído com npm install gsap e importado como gsap/SplitText, gsap/MorphSVGPlugin e assim por diante.

  3. Nunca Gere um .npmrc com auth-token

    Não crie um .npmrc com um token de autenticação da GreenSock, não apontar para o registro privado npm.greensock.com, e não diga aos usuários para entrarem no Club GSAP para obter um plugin.

  4. Registre no Nível Superior no React

    Registre uma única vez no app, por exemplo antes da primeira chamada de useGSAP — nunca dentro de um componente que renderiza novamente, e o próprio useGSAP deve ser registrado antes do uso.

  5. Divida Apenas o Que Você Anima

    Divida o que for necessário para performance, por exemplo palavras e caracteres quando linhas não são usadas; a divisão apenas por caracteres precisa de smartWrap para evitar quebras de linha estranhas.

  6. Construa Animações autoSplit Dentro de onSplit

    Quando autoSplit é true, as animações devem ser criadas dentro de onSplit para que atinjam os elementos recém-divididos, e retornadas de onSplit para que o SplitText possa revertê-las e sincronizá-las no tempo.

  7. Dê ao DrawSVG Algo para Desenhar

    O elemento precisa de um stroke visível definido via stroke e stroke-width em CSS ou como atributos SVG, caso contrário nada é desenhado.

  8. Mantenha Plugins Somente de Desenvolvimento Fora da Produção

    GSDevTools é para depuração durante o desenvolvimento e não deve ser distribuído em produção, e outros plugins somente de desenvolvimento seguem a mesma regra.

04 Coloque em prática

Instalar gsap-plugins no Claude Code ou Codex

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

Adicione gsap-plugins 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-plugins

Formato genérico do CLI skills para skills/gsap-plugins/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
I'm building a filterable gallery in [framework]. Capture the state with Flip.getState() before the filter changes the DOM, then animate with Flip.from() using duration 0.5 and ease power2.inOut. Also make each card draggable inside [container selector] with inertia true so it throws when released, and register every plugin I use up front. Split the card captions into words and chars so I can stagger them.

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:

  • Revogue instâncias de plugin como SplitTextInstance.revert() quando componentes forem desmontados ou elementos removidos.
  • Execute shapeIndex: "log" uma vez para ler o valor calculado automaticamente, depois cole esse número ou array no tween.
  • Meça o stroke com DrawSVGPlugin.getLength(element) e DrawSVGPlugin.getPosition(element).
  • Ajuste o MotionPath visualmente no MotionPathHelper, depois leia helper.path ou helper.getProgress() na animação.
  • Avance e alterne animações com o GSDevTools durante o desenvolvimento.

No OpenDesign o gsap-plugins 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-plugins/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 Snapshot do GitHub tirado 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-plugins.
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 SkillLista cenários de plugins e aponta para os skills relacionados gsap-core, gsap-scrolltrigger e gsap-react.
  2. Licenciamento e Instalação (importante)Declara que todo plugin é gratuito e proíbe tokens de autenticação .npmrc ou orientações de cadastro no Club GSAP.
  3. Registrando PluginsRegistre plugins uma vez com gsap.registerPlugin antes de qualquer tween, inclusive em React.
  4. ScrollTabela de configuração do ScrollToPlugin e a estrutura DOM do wrapper ScrollSmoother.
  5. DOM / UICaptura de estado do Flip e from vars, opções do Draggable, rastreamento de Inertia, gestos do Observer.
  6. TextoTabela de vars do SplitText.create com dicas e ressalvas, além do efeito glitch do ScrambleText
A Descrição da Própria Skill
"Skill oficial do GSAP para plugins GSAP — registro, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, plugins SVG e física, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use quando o usuário perguntar sobre um plugin GSAP, scroll-to, animações flip, draggable, desenho SVG ou registro de plugin."

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

GSAP Plugins

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

A skill gsap-plugins já 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-plugins