GSAP Core: animações com controle e movimento reduzido

ANÁLISE EDITORIAL

Uma animação pode parecer simples na tela e ainda esconder decisões técnicas importantes: qual estado inicial será aplicado, como vários elementos entram em sequência, o que acontece quando o componente é desmontado e como respeitar quem prefere menos movimento. GSAP Core reúne instruções oficiais para um agente escrever e revisar essa base sem tratar toda transição como um efeito decorativo.

A Skill vem do repositório oficial greensock/gsap-skills. A curadoria do Bastidores da IA fixou o commit aed9cfd3277740755f6bfc1155c7aa645403b760, publicado em 21 de abril de 2026. Em 28 de agosto de 2026, a API pública do GitHub registrava 14.473 estrelas, o repositório não estava arquivado e declarava licença MIT. O SKILL.md auditado não informa um número de versão próprio, por isso o commit é a referência imutável desta página.

Ilustração editorial exclusiva: a capa mostra cartões e esferas atravessando curvas de movimento até uma composição alinhada. Não é captura de tela, interface real, logotipo da GSAP, código executado nem prova de desempenho.

O que esta Skill faz de verdade

GSAP Core orienta o agente sobre o núcleo de animação da biblioteca: gsap.to(), gsap.from(), gsap.fromTo() e gsap.set(). Também cobre duração, atraso, easing, stagger, repetição, yoyo, callbacks e valores calculados por função. A diferença prática é que o agente recebe regras de uso e de revisão, em vez de apenas uma lista de métodos.

O arquivo recomenda propriedades em camelCase e os aliases de transformação da GSAP, como x, y, scale e rotation. Isso ajuda a evitar animações que alteram top, left, largura ou altura quando uma transformação visual resolveria o mesmo problema. A documentação oficial do objeto GSAP apresenta Tween e Timeline como os conceitos centrais de controle.

A Skill também registra armadilhas menos óbvias. from() e fromTo() aplicam o estado inicial imediatamente por padrão. Quando dois tweens atuam na mesma propriedade do mesmo alvo, o segundo pode sobrescrever o estado esperado antes de começar. O agente é instruído a avaliar immediateRender: false nos tweens posteriores, não a adicionar atrasos até o problema desaparecer.

Para quem serve

Ela serve a desenvolvedores frontend, equipes de design systems e pessoas que revisam interfaces em JavaScript. O foco é útil em projetos Vanilla JS, React, Vue, Svelte, Astro e outros ambientes que consigam carregar a biblioteca. Também ajuda quando um protótipo precisa de controle de pausa, retomada, reversão, progresso ou limpeza, recursos difíceis de administrar com uma cadeia crescente de temporizadores.

GSAP Core não é uma Skill de desenho de telas, criação de marca ou avaliação estética. Ela parte de uma interface existente e organiza o comportamento animado. Por isso não repete Anthropic Frontend Design, Stitch Generate Design, Draw.io, Open Design Critique ou Extract Design no catálogo. O problema resolvido aqui é implementação e revisão de movimento no navegador.

Para uma transição pequena controlada inteiramente por CSS, adicionar uma biblioteca pode ser excesso. A própria Skill sugere GSAP quando o trabalho exige sequência, controle em tempo de execução, easing mais elaborado, valores dinâmicos, SVG ou animação ligada à rolagem. O agente deve respeitar uma biblioteca já escolhida pelo projeto, não migrar por preferência automática.

Compatibilidade e pré-requisitos

O repositório descreve o formato Agent Skills e lista instalação por clientes como Codex, Claude Code, Cursor, Windsurf e Copilot. Compatibilidade real depende de cada host reconhecer uma pasta com SKILL.md e de o usuário instalar a Skill no escopo correto. A instrução oficial fixada no commit deve prevalecer sobre caminhos lembrados de outra versão.

A Skill não instala a biblioteca de animação. Para executar o código sugerido, o projeto precisa de JavaScript e de uma versão compatível da GSAP. A documentação oficial de instalação mostra o pacote npm e alternativas para módulos ou script tags. Confirme o gerenciador, a versão do runtime, o bundler, a renderização no servidor e as regras do framework antes de alterar dependências.

Também é necessário ter elementos de teste que possam ser animados sem afetar navegação, formulário ou conteúdo essencial. Defina um critério de acessibilidade, um dispositivo modesto para medição e uma forma de desativar o movimento. Em aplicações com montagem e desmontagem de componentes, identifique o ciclo de vida responsável por criar e reverter a animação.

Instalação recomendada

O README do commit auditado documenta o comando npx skills add https://github.com/greensock/gsap-skills. Ele consulta a rede e pode apresentar várias Skills do mesmo repositório, como timeline, ScrollTrigger, plugins, React, frameworks e performance. Revise a seleção e habilite apenas gsap-core quando o objetivo for aprender ou revisar o núcleo.

Outra rota é clonar o repositório e copiar a pasta skills/gsap-core para o diretório aceito pelo seu agente. Essa abordagem facilita fixar o commit e comparar o conteúdo antes da instalação. O caminho oficial auditado contém somente o SKILL.md desta habilidade.

O ZIP oferecido pelo Bastidores da IA é documental. Ele contém apenas SKILL.md, LICENSE e ORIGEM.md. Não contém GSAP, plugin, JavaScript executável, dependência, exemplo, chave, token, cookie ou dado de projeto. Leia os três arquivos, compare o hash e use a fonte oficial para uma instalação funcional.

Configuração antes do primeiro uso

Antes de pedir que o agente anime a página inteira, escolha um único componente e descreva o estado inicial, o estado final, a duração e a ação que dispara o movimento. Registre também o que não pode mudar: ordem de leitura, foco, área clicável, posição final e preferência por movimento reduzido. Um pedido como “anime este card” deixa decisões demais ocultas.

Defina o escopo dos seletores. Em componentes reutilizados, um seletor global pode atingir instâncias vizinhas. Prefira referências do componente ou um contexto limitado à raiz. Guarde o Tween retornado quando o código precisar pausar, reverter, alterar progresso ou encerrar a animação. Não crie uma nova instância em cada renderização sem limpar a anterior.

Escolha propriedades de transformação antes de propriedades de layout. Para um fade que também deve remover o elemento da interação visual, a Skill recomenda avaliar autoAlpha, que combina opacidade e visibilidade. Para múltiplos elementos, documente a ordem do array e o sentido do stagger. “Do centro”, “aleatório” e “do início” produzem resultados diferentes mesmo com a mesma duração.

Primeiro uso seguro

Crie um teste isolado com três elementos sem informação importante. Comece com gsap.to(), uma transformação curta e um easing documentado. Observe o estado antes, durante e depois. Em seguida, teste pausa, reversão e kill(). O objetivo é provar controle do ciclo de vida, não impressionar com quantidade de efeitos.

Depois, ative uma regra para movimento reduzido. A documentação oficial de gsap.matchMedia() explica que os handlers podem responder a media queries e ser revertidos quando deixam de corresponder. Use prefers-reduced-motion: reduce para remover ou reduzir movimento, e confirme o resultado nas preferências do sistema.

Teste também a desmontagem do componente ou a troca de rota. Não basta a animação terminar visualmente. Verifique se listeners, ScrollTriggers, contextos e tweens deixam de atuar sobre elementos removidos. Em seguida, remonte o componente e confirme que não há duas animações concorrendo pelo mesmo alvo.

Resultado esperado

O resultado mínimo é um trecho pequeno em que o alvo, as propriedades, a duração e o easing estejam explícitos. A animação deve poder ser interrompida sem deixar o componente em estado incoerente. Se houver vários itens, o stagger precisa ter uma ordem previsível. Se houver estado responsivo, cada condição deve ter comportamento e limpeza observáveis.

O agente deve explicar por que escolheu to(), from() ou fromTo(). A referência oficial de stagger pode apoiar sequências entre alvos, mas não substitui uma Timeline quando várias etapas dependem umas das outras. O escopo desta Skill é o núcleo, não todas as extensões do ecossistema.

Registre uma pequena validação: navegador, viewport, preferência de movimento, ação disparadora, duração percebida, estado final e resultado após desmontagem. Para desempenho, meça no projeto real. A classificação de risco baixo escrita no SKILL.md descreve a natureza do texto, não garante que qualquer animação seja acessível, fluida ou correta.

Permissões e riscos

A Skill é textual e o ZIP local não executa código. O uso funcional, porém, pode instalar pacote npm, editar JavaScript ou TypeScript, alterar estilos e modificar comportamento de interação. Esses efeitos exigem revisão de diff, teste em branch e aprovação compatível com o projeto.

Os riscos principais são movimento desconfortável, foco deslocado, conteúdo invisível que continua clicável, animações duplicadas após renderização, estilos inline persistentes e custo de renderização em dispositivos mais lentos. Animar propriedades de layout pode provocar recalculo e repintura. Transformação não é automaticamente barata se milhares de elementos estiverem ativos.

A licença MIT verificada cobre o repositório de Skills e o arquivo empacotado. A biblioteca GSAP não faz parte deste ZIP. Consulte os termos oficiais aplicáveis ao runtime e aos plugins usados pelo projeto. Não trate o campo license: MIT do SKILL.md como licença automática de todo código, ativo ou produto relacionado.

Erros comuns

O elemento salta antes de animar. Confira CSS inicial, carregamento de fontes e o comportamento de immediateRender. Não esconda o salto com um atraso maior.

O segundo from() parece não funcionar. Dois tweens podem disputar a mesma propriedade. Avalie immediateRender: false no posterior ou reorganize a sequência em uma Timeline.

O fade deixa um bloco invisível sobre o botão. Opacidade zero não remove necessariamente a área da interação. Avalie autoAlpha e teste teclado, mouse e toque.

A animação repete após navegar e voltar. O código provavelmente recriou o Tween sem reverter o contexto anterior. Vincule criação e limpeza ao ciclo de vida do framework.

Usuários com movimento reduzido ainda recebem o efeito completo. Confirme a media query, teste a condição real e mantenha uma alternativa com duração zero ou sem deslocamento.

Versão auditada e download local

A auditoria fixou o commit aed9cfd3277740755f6bfc1155c7aa645403b760. O SKILL.md não declara número de versão, portanto não inventamos um. Na consulta de 28 de agosto de 2026, o repositório tinha 14.473 estrelas e estava ativo. A licença MIT da origem permite redistribuir estes arquivos textuais com o aviso preservado.

O pacote local auditado tem três arquivos e SHA-256 7ad7495e14fb33a40e81ec3034d9d415563db3527471523e6e57b29fbb946a7a. Depois do download, calcule o hash do ZIP e compare todos os 64 caracteres. Divergência significa que o arquivo não é o pacote validado nesta página.

Abra também o AGENTS.md do repositório para entender as convenções de nome, frontmatter e escopo usadas pelo mantenedor. O botão de repositório oficial e o download local têm finalidades diferentes: um leva à fonte funcional, o outro preserva a evidência documental auditada.

Resultado esperado e limite final

Ao final, você deve ter uma Skill instalada no escopo correto e um teste de animação pequeno, reversível e compatível com a preferência de movimento do usuário. O código deve usar alvos limitados, propriedades justificadas, limpeza ligada ao ciclo de vida e evidência de que o estado final continua utilizável.

GSAP Core não escolhe a direção de arte, não valida a experiência completa e não mede desempenho por conta própria. Também não substitui as Skills específicas de Timeline, ScrollTrigger, React ou performance. Use o núcleo para acertar o comportamento básico. Amplie o escopo somente quando o primeiro teste estiver legível, acessível e fácil de desfazer.

Fontes primárias

• Repositório oficial GSAP AI Skills, consultado em 28/08/2026.
• GSAP Core SKILL.md no commit auditado.
• README oficial com instalação e compatibilidade.
• Licença MIT do repositório de Skills.
• Documentação oficial de instalação da GSAP.
• Documentação oficial do núcleo GSAP.
• Documentação oficial de matchMedia e movimento reduzido.