GSAP Skills

O que faz

Sabe aqueles sites que parecem caros, com o título surgindo letra por letra, os cards aparecendo enquanto você rola a página e seções que "grudam" na tela? Quase todos usam o GSAP, a biblioteca de animação mais usada da web. O próprio Mestre do Claude usa GSAP nas animações da página inicial.

Este pacote traz as 8 skills oficiais da GreenSock, a empresa que criou o GSAP. Elas ensinam o Claude a animar do jeito certo: animação leve, que não trava no celular e que não quebra quando a página muda.

O GSAP é 100% gratuito, inclusive os efeitos que antes eram pagos (como dividir texto em letras) e para uso comercial.

Quando usar

Deixar a landing page com cara de site caro: título aparecendo com efeito, botões que reagem ao mouse, elementos que entram suavemente.

Animação ao rolar a página: imagens que crescem, textos que surgem, seções que ficam presas enquanto o conteúdo passa (o famoso "scroll storytelling").

Sites em React ou Next.js: a skill de React ensina o Claude a limpar as animações quando a tela muda, que é onde a maioria das animações feitas por IA quebra.

Site travando no celular: a skill de desempenho mostra o que animar e o que evitar pra ficar leve.

As 8 skills inclusas

gsap-core: as animações básicas (mover, sumir, aparecer, girar, efeito mola).

gsap-timeline: encadear várias animações em sequência, como um roteiro.

gsap-scrolltrigger: animar conforme a pessoa rola a página.

gsap-plugins: os extras, como texto que se divide em letras, arrastar elementos e transformar formas.

gsap-utils: ferramentas de apoio (sortear, limitar e converter valores).

gsap-react: animar em React e Next.js sem bug.

gsap-frameworks: animar em Vue, Svelte e outros.

gsap-performance: deixar tudo leve e fluido.

Como instalar

1. Baixe o ZIP e descompacte dentro de ~/.claude/skills/ (no Windows: C:\Users\SEU-USUARIO\.claude\skills\). Vão aparecer 8 pastas que começam com gsap-.

2. Abra o Claude Code e peça em português:

anima o título do meu site aparecendo letra por letra e os cards surgindo quando eu rolar a página, usando GSAP

O Claude escolhe sozinho qual das 8 skills usar em cada parte.

Se preferir a instalação oficial, digite no Claude Code:

/plugin marketplace add greensock/gsap-skills

Crédito

Skills oficiais da GreenSock (github.com/greensock/gsap-skills), licença MIT, conteúdo sem alterações. Site do GSAP: gsap.com.