gsap

Visão geral da skill gsap

O que a skill gsap faz

A skill gsap é uma referência prática de animação com GSAP para composições HyperFrames. Ela ajuda você a escolher o tipo certo de tween, definir propriedades corretamente e montar timelines com comportamento previsível em produção. Se você quer um guia de gsap focado em implementação, e não em teoria, esta skill foi feita para ajudar a fazer as animações funcionarem com menos tentativa e erro.

Melhor uso para esta skill

Use a skill gsap se você estiver criando animações de entrada, transições de movimento, sequências com stagger, cenas dirigidas por timeline ou efeitos de animação reutilizáveis. Ela é especialmente útil em trabalhos de Design Implementation, quando você já tem uma especificação visual e precisa transformá-la em gsap.to(), from(), fromTo() ou gsap.timeline() sem quebrar o timing nem sobrescrever propriedades.

Por que vale a pena instalar

O principal valor está no suporte à decisão: qual API do GSAP usar, quais vars importam e quais padrões podem gerar bugs. A skill também destaca restrições práticas como nomes de propriedades em camelCase, immediateRender, aliases de transform e padrões mais eficientes de performance, como will-change e quickTo. Isso torna a skill gsap mais útil do que um prompt genérico quando você precisa de um resultado realmente pronto para entrega.

Como usar a skill gsap

Instale e inspecione os arquivos certos

Instale com:

npx skills add heygen-com/hyperframes --skill gsap

Comece em skills/gsap/SKILL.md, depois leia references/effects.md para ver padrões prontos e scripts/extract-audio-data.py se sua animação depender de dados de áudio. Como este repositório é pequeno, esses arquivos dão rapidamente quase todo o contexto real de uso.

Dê à skill um briefing concreto da animação

A skill gsap funciona melhor quando seu prompt inclui o elemento, o objetivo de movimento, o timing e as restrições. Em vez de “anime este card”, use algo como: “Crie uma entrada em gsap para um card de produto: fade in vindo de 24px abaixo, duração de 0.6s, power3.out, stagger de três cards em 0.12s, sem layout shift e sem sobrescrever transforms de hover.” Esse tipo de entrada ajuda a skill a escolher o uso certo do gsap e evita defaults vagos.

Leia os caminhos de código que afetam a qualidade da saída

Para trabalho de implementação, priorize as seções sobre métodos principais de tween, vars comuns, mapeamento de transforms/CSS, valores baseados em função e timelines. Essas são as partes que realmente mudam a qualidade da saída. Se você precisa de um padrão de movimento reutilizável, confira primeiro references/effects.md; ele mostra como o repositório espera que os efeitos sejam estruturados e onde os requisitos de plugin entram em jogo.

Use detalhes de workflow que evitam animações ruins

Prefira aliases de transform do GSAP em vez de strings brutas de transform, e use gsap.set() para preparar o estado inicial antes do movimento com tempo. Ao encadear timelines, use labels e position parameters de forma intencional em vez de empilhar tudo no mesmo timestamp. Se um tween mexe no mesmo elemento/propriedade mais de uma vez, fique atento a immediateRender e overwrite para que a skill gsap não crie saltos visíveis.

FAQ da skill gsap

A skill gsap é só para HyperFrames?

Ela foi escrita para composições HyperFrames, mas os padrões de uso do GSAP são amplamente transferíveis. Se você não estiver trabalhando em HyperFrames, ainda pode aproveitar as orientações de API, embora talvez precise adaptar sozinho a estrutura dos arquivos e o tratamento de ciclo de vida.

Preciso já ter experiência com GSAP?

Não. A skill gsap serve bem para iniciantes que sabem qual efeito querem, mas não têm certeza de qual API usar. Ainda assim, ela é mais valiosa se você conseguir descrever o estado dos elementos, o timing e a sequência, porque esses detalhes produzem saídas melhores do que um prompt genérico do tipo “deixa suave”.

Quando não devo usar?

Não recorra a esta skill se você só precisa de uma transição CSS pontual ou se o movimento é simples o bastante para ser definido diretamente nas style sheets. Ela também é uma escolha ruim quando você precisa de uma arquitetura de runtime customizada sem relação com timelines do GSAP, ou quando o briefing não define os elementos-alvo e os estados de movimento desejados.

Em que ela é diferente de um prompt genérico?

Um prompt genérico часто produz uma ideia de animação plausível. A skill gsap é mais útil quando você precisa de sintaxe correta do GSAP, defaults mais seguros e um comportamento de timeline que corresponda à realidade da implementação. Ela reduz a margem de erro em onboarding no estilo gsap install, na escolha de tweens, na nomenclatura de propriedades e em decisões sensíveis à performance.

Como melhorar a skill gsap

Forneça a especificação visual, não só o objetivo

A forma mais rápida de melhorar a saída do gsap é especificar estado inicial, estado final, sequência e restrições. Por exemplo: “O texto deve subir 20px e fazer fade in em 0.5s, depois o botão deve escalar de 0.96 para 1 com back.out(1.7), e ambos devem respeitar reduced motion.” Isso dá estrutura suficiente para a skill produzir um plano de uso do gsap melhor.

Nomeie os elementos e os riscos de conflito

Mencione seletores, quantidade de elementos e qualquer movimento já existente na página. Se você sabe que uma propriedade pode já estar sendo animada em outro lugar, diga isso. O modo de falha mais comum não é o tween em si, e sim um conflito de overwrite ou uma colisão de transforms, então apontar isso melhora o resultado na hora.

Peça uma saída pronta para implementação

Se você quer um resultado de Design Implementation, peça na primeira resposta a ordem da timeline, os vars exatos e os requisitos de plugin. Boas perguntas de acompanhamento incluem “converta isso em uma timeline reutilizável”, “substitua transforms brutos por aliases do GSAP” ou “otimize para performance e evite layout thrash”. Esses pedidos empurram a skill gsap para código amigável à produção, e não para motion de demonstração.

Itere uma mudança por vez

Depois da primeira versão, refine apenas uma dimensão: timing, easing, staggering ou estrutura. Se o movimento estiver abrupto demais, peça uma curva de easing mais suave; se estiver lento demais, reduza a duração; se os elementos estiverem competindo, solicite overwrite: "auto" ou labels de timeline mais claros. Isso mantém a skill gsap focada e torna a próxima versão mais fácil de avaliar.