gsap-core

Visão geral da skill gsap-core

Para que serve o gsap-core

A skill gsap-core é o guia oficial do GSAP para a API central de animação: gsap.to(), from(), fromTo(), easing, duração, stagger, defaults e gsap.matchMedia(). É a escolha certa quando alguém precisa de ajuda prática com animação em JavaScript, especialmente para movimento de DOM ou SVG em JS puro, React, Vue, Svelte ou projetos agnósticos de framework.

Quem deve usar

Use a skill gsap-core quando a tarefa for decidir se o GSAP é a ferramenta certa ou escrever código de animação GSAP funcional sem adivinhar a sintaxe. Ela é especialmente útil para desenvolvedores que lidam com motion de interface, animações de produto, comportamento responsivo ou suporte a reduced-motion.

O que mais importa

Normalmente, quem usa esse skill quer três coisas: saber se o GSAP encaixa na stack, como expressar uma animação de forma limpa e como evitar código de motion frágil. Essa skill é forte quando você precisa de um gsap-core guide curto e confiável para padrões comuns de tween, e não de um fluxo completo de plugins ou timelines.

Quando é a melhor escolha

Escolha gsap-core quando o pedido for sobre primitivos básicos de animação, tweens para um único elemento ou vários alvos, ou animação de estados de interface com controle previsível. Se a tarefa for realmente sobre sequenciamento, movimento guiado por scroll ou integração específica de framework, a skill core é um ponto de partida, mas não a solução completa.

Como usar a skill gsap-core

Instale e ative

Use o fluxo gsap-core install do sistema de skills do diretório e carregue esta skill antes de rascunhar a solução de animação. O repositório upstream é propositalmente centrado em um único arquivo, então a principal dependência é ler a própria orientação da skill, em vez de sair procurando assets de apoio.

Leia primeiro os arquivos certos

Comece por SKILL.md. Esse arquivo traz as regras de decisão sobre quando recomendar GSAP, quando não recomendar e como enquadrar a API core em projetos reais. Como este repo não tem rules/, resources/ nem scripts auxiliares, não existe uma camada oculta de setup para inspecionar.

Transforme um pedido vago em um prompt utilizável

Um bom prompt de gsap-core usage deve incluir o tipo de elemento, o estado desejado antes e depois, o gatilho e quaisquer restrições, como reduced-motion ou contexto de framework. Melhor: “Anime o título do hero de 20px abaixo e com opacidade 0 até ficar estabilizado, com ease-out de 0,6s, e mantenha isso responsivo para mobile.” Mais fraco: “Faça animar bonitinho.”

Fluxo de trabalho prático

Use a skill para decidir se o GSAP é apropriado e, depois, escreva a animação em partes pequenas: alvo, mudanças de propriedade, timing, easing e comportamento responsivo. Se o pedido incluir Webflow, React ou restrições de acessibilidade, mencione isso logo no início para que a solução gerada use o padrão correto do GSAP, e não um tween genérico.

Perguntas frequentes sobre a skill gsap-core

O gsap-core é só para tweens básicos?

Sim, principalmente. A skill gsap-core cobre a base: to, from, fromTo, eases, stagger, defaults e lógica responsiva. Para timelines, animação com scroll, plugins ou utilitários auxiliares, outra skill do GSAP costuma ser melhor.

Preciso saber GSAP antes de usar esta skill?

Não. Ela funciona bem para iniciantes que querem um ponto de partida funcional, desde que consigam descrever o elemento, o objetivo do motion e o ambiente. O valor da skill é maior quando o usuário precisa de um verdadeiro gsap-core guide, e não apenas de uma explicação conceitual.

Quando não devo usar gsap-core?

Não use se o problema for, na prática, motion só com CSS, um problema de interface sem animação ou uma tarefa centrada em sequenciar várias cenas. Também não é a melhor opção quando o usuário precisa explicitamente de composição de timeline, comportamento com scroll ou de um plugin como Flip ou Draggable.

Em que ele é diferente de um prompt comum?

Um prompt comum pode gerar orientações genéricas de animação. A skill gsap-core é mais orientada à decisão: ela ajuda você a recomendar GSAP quando faz sentido, evitar padrões incompatíveis e produzir código que reflita o uso real do GSAP em vez de pseudocódigo de animação vagamente inspirado nele.

Como melhorar a skill gsap-core

Dê o contrato da animação, não só o objetivo

Entradas fortes nomeiam o elemento, o estado inicial, o estado final, o timing e as restrições. Por exemplo: “No carregamento da página, faça fade in da lista de cards a partir de y: 24 e autoAlpha: 0 até y: 0 e visível em 0,5s, usando power2.out, e respeite prefers-reduced-motion.” Isso é muito mais acionável do que “anime os cards”.

Especifique o ambiente cedo

A qualidade da saída da skill gsap-core depende de o destino ser vanilla JS, React, Vue, Svelte ou Webflow. Mencione framework, modelo de renderização e se os elementos existem no carregamento, porque esses detalhes mudam como a animação deve ser conectada e o que pode falhar.

Fique atento aos modos de falha mais comuns

O erro mais comum é pedir animação core quando o que realmente se precisa é uma timeline ou uma interação com scroll. Outro problema frequente é omitir requisitos de responsividade ou acessibilidade, o que pode gerar motion que parece bom no desktop, mas quebra em telas pequenas ou para usuários com reduced-motion.

Itere com refinamentos mensuráveis

Depois do primeiro resultado, melhore o prompt adicionando uma restrição por vez: duração mais precisa, easing diferente, ordem do stagger, comportamento no mobile ou fallback para reduced-motion. Isso gera um gsap-core usage muito mais útil do que pedir um redesign completo de uma só vez e facilita comparar os resultados.