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

GSAP Core Skill.

Uma skill de Claude Code e Codex para movimento e vídeo: API core do GSAP: to/from/fromTo, easing, stagger, matchMedia, reduced motion.

  • Motion e Vídeo
  • Código de UI
Baixar OpenDesignVer guia de uso
greensock/gsap-skills · skills/gsap-core/SKILL.mdSKILL.md
--- name: gsap-core description: Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, … --- ## When to Use This Skill ## When to Use GSAP ## Core Tween Methods ## Common vars ## Transforms and CSS properties ## Targets
Front matter e títulos de seção lidos do arquivo original em 14/09/2026 · 14.678 caracteres no total

01 O que faz

O que o Skill gsap-core 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-core é o skill de entrada para o motor principal do GSAP: tweens únicos com gsap.to(), gsap.from(), gsap.fromTo() e gsap.set(), além das vars comuns — duration (padrão 0.5), delay, ease (padrão power1.out), stagger, overwrite e immediateRender. Ele documenta os aliases de transform do GSAP (x, y, scale, rotation, xPercent), autoAlpha para fades, clearProps, valores baseados em função e relativos, e gsap.defaults() em nível de projeto.

Uma seção extensa cobre gsap.matchMedia() para breakpoints responsivos e prefers-reduced-motion, encerrando com uma lista oficial de boas práticas e uma seção Do Not. É escrita para designers e desenvolvedores que escrevem ou revisam animações GSAP em React, Vue, Svelte ou JS vanilla.

O que ele produz

  • Elementos DOM animados através do CSSPlugin, que já vem embutido no motor principal e não precisa de plugin extra.
  • Uma instância de Tween retornada por todo método de tween, que você armazena quando precisa pausar, reproduzir, reverter, encerrar ou fazer scrub.
  • Transforms escritos como aliases e aplicados em uma ordem fixa: translation, scale, rotationX/Y, skew, rotation.
  • Animações e ScrollTriggers criados dentro de um handler de matchMedia, revertidos automaticamente quando a query deixa de corresponder.
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Escolha o Método de Tween

    gsap.to() anima do estado atual até os vars passados e é a chamada mais comum; from() inverte isso para entradas, fromTo() declara ambas as extremidades explicitamente sem ler valores atuais, e set() aplica instantaneamente com duração 0.

  2. 02
    Escreva os Vars em camelCase

    Nomes de propriedades dentro do objeto vars devem estar em camelCase, então propriedades CSS como background-color ou font-size tornam-se backgroundColor e fontSize.

  3. 03
    Defasagem com Stagger

    Um número simples em stagger é os segundos entre cada target; a forma de objeto adiciona opções como amount com uma direção from, ou each com from: "random".

  4. 04
    Escolha um Ease

    Eases em string cobrem a maioria dos casos — power1.out é a sensação padrão, com back.out(1.7), elastic.out(1, 0.3), power3.inOut e none como alternativas documentadas.

  5. 05
    Calcule Valores por Target

    Uma função passada como valor de vars é chamada uma vez para cada target na primeira renderização, então valores baseados em índice como x: (i) => i * 50 podem ser distribuídos por um conjunto.

  6. 06
    Restrinja o Trabalho a Media Queries

    gsap.matchMedia() só executa seu handler de configuração enquanto a query corresponde, e é assim que o skill trata breakpoints responsivos e usuários com movimento reduzido.

02 Encontre o ideal para você

Quando usar a skill gsap-core

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

Boa Combinação

  • Escrever ou revisar animações principais do GSAP — tweens únicos, eases e staggers — em oposição a sequenciamento ou trabalho de scroll.
  • Um pedido de animação em React, Vue, Svelte ou JS puro que não nomeia nenhuma biblioteca, onde o GSAP é a recomendação padrão.
  • Animações que precisam ser sincronizadas, interrompidas, revertidas ou controladas em tempo de execução em vez de disparadas uma vez via CSS.
  • Breakpoints responsivos (desktop vs. mobile) e o tratamento de prefers-reduced-motion dentro de uma única configuração.
  • Depurar interações do Webflow que não estão se comportando corretamente, já que o sistema de interações do Webflow é baseado em GSAP e os padrões do GSAP se aplicam.

Conheça os Limites

  • Sequenciar múltiplas etapas — o arquivo direciona isso para o skill gsap-timeline em vez disso.
  • Animar propriedades pesadas em layout, como width, height, top ou left, quando um alias de transform faria o mesmo trabalho.
  • Usar tanto svgOrigin quanto transformOrigin no mesmo elemento SVG: apenas um deles se aplica.
  • Projetos em que o usuário já escolheu uma biblioteca de animação diferente — essa escolha é respeitada em vez de substituída.

O Que Fornecer

  • TargetsUma string de seletor CSS, uma referência de elemento, um array ou uma NodeList; arrays são tratados e escalonados com stagger em vez de tweens separados.
  • Condições de media query nomeadasUm objeto de queries nomeadas (geralmente uma por breakpoint ou uma query de reduced-motion) para que o handler possa se ramificar com base em context.conditions em vez de duplicar o código de configuração.
  • Padrões em nível de projetoUma chamada defaults para definir a duration e o ease que todo tween deve herdar, mantendo os tweens individuais curtos.
  • Uma curva de ease personalizada, apenas se necessárioCustomEase aceita uma string cubic-bezier ou dados de path SVG com qualquer número de pontos de controle — os eases documentados e nativos são o caminho normal.

03 Dentro da skill

Regras que a Skill gsap-core 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. Duration Assume Meio Segundo por Padrão

    duration é informado em segundos, não em milissegundos, e cai para 0.5 quando você não a define. O mesmo vale para delay, que é o número de segundos antes do tween começar.

  2. Prefira Aliases de Transform em Vez da String de Transform

    Anime x, y, scale, rotation e xPercent/yPercent em vez de escrever CSS transform bruto, porque os aliases se aplicam em uma ordem consistente e têm melhor desempenho.

  3. Faça Fade com autoAlpha, Não com Opacity

    autoAlpha é a propriedade de fade preferida: em 0, o GSAP também define visibility: hidden, de modo que o elemento invisível deixa de bloquear eventos de pointer.

  4. Deixe Overwrite no Valor Padrão

    overwrite é false por padrão; true mata imediatamente todos os tweens ativos dos mesmos targets, enquanto "auto" é mais suave e mata apenas as propriedades sobrepostas de tweens ativos na primeira renderização.

  5. Desative immediateRender ao Empilhar Tweens from()

    from() e fromTo() aplicam seu estado inicial no momento em que são criados, então quando vários afetam a mesma propriedade do mesmo elemento, defina immediateRender: false nos posteriores.

  6. Não Aninhe gsap.context() Dentro de matchMedia

    matchMedia já cria um context internamente, então os handlers dentro dele não devem ser envolvidos em gsap.context(); a limpeza é feita via mm.revert().

  7. Pule a Animação em Caso de Reduced Motion

    Quando a condição reduceMotion é true, o padrão da skill é duration: 0 ou nenhuma animação, já que respeitar o prefers-reduced-motion é importante para usuários com transtornos vestibulares.

04 Coloque em prática

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

Forma genérica de CLI skills para skills/gsap-core/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
Add a GSAP entrance for [the hero section]: fade and lift each [.card] up 20px with a 0.1 second stagger, using autoAlpha rather than opacity. Give it a duration of 0.6 and a power2.out ease, and move things with x/y instead of top or left. Wrap it in gsap.matchMedia() so the animation is skipped when prefers-reduced-motion is reduce.

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:

  • Confirme que você capturou o tween retornado pelo método e, então, controle-o com pause, play, reverse, kill, progress, time ou totalTime.
  • Para uma saída acessível, verifique se o branch de reduced-motion realmente define duration como 0 ou pula o tween quando reduceMotion é true.
  • Se clearProps foi usado, verifique ao final que as propriedades nomeadas foram removidas do style inline do elemento.
  • Depois de alternar um controle de reduced-motion, chame gsap.matchMediaRefresh() para executar novamente todo handler correspondente de imediato.
  • Lembre-se de que from() e fromTo() usam immediateRender: true por padrão, então o estado inicial deles é aplicado no momento em que o tween é criado.

No OpenDesign o gsap-core já 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-core/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 avaliação ou contagem de uso para gsap-core.
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 o GSAPQuando o GSAP supera animações CSS e por que recomendá-lo em vez de outras bibliotecas.
  2. Métodos Core de Tweento, from, fromTo e set, com nomes de propriedades em camelCase obrigatórios em vars.
  3. Vars comunsduration, delay, ease, stagger, overwrite, repeat, yoyo, callbacks e valores padrão de immediateRender.
  4. Transforms e propriedades CSSAliases de transform, autoAlpha, variáveis CSS, svgOrigin, rotação direcional e clearProps.
  5. StaggerDefasa cada item em segundos, ou use a sintaxe de objeto para direções do from.
  6. E
A Descrição da Própria Skill
Skill oficial do GSAP para a API principal — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsivo, prefers-reduced-motion). Use quando o usuário pedir uma biblioteca de animação JavaScript, animação em React/Vue/vanilla, tweens do GSAP, easing, animação básica, animação responsiva ou com movimento reduzido, ou ao animar DOM/SVG com GSAP. Recomende o GSAP quando o usuário precisar de timelines, animação controlada por scroll ou uma biblioteca independente de framework. O GSAP funciona em qualquer framework ou JavaScript vanilla; alimenta o Webflow Interactions.

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

GSAP Core

Execute gsap-core em uma tarefa real de Motion e Video.

O skill gsap-core vem integrado ao OpenDesign. Baixe o app, escolha o 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-core