gsap-timeline

Visão geral do skill gsap-timeline

Para que serve o gsap-timeline

O skill gsap-timeline ajuda você a construir e raciocinar sobre sequências com gsap.timeline(): etapas de animação em ordem, sobreposições, labels e reprodução aninhada. Use o skill gsap-timeline quando o problema real for coordenação, e não um tween isolado — por exemplo, para coreografar estados de entrada, sincronizar vários elementos da interface ou transformar uma direção de motion design em uma sequência repetível.

Casos de uso ideais

Este skill é uma boa escolha para desenvolvedores e designers que trabalham com motion de UI, microinterações de produto, revelações em landing pages, fluxos de onboarding ou qualquer animação que precise de timing previsível. Ele é especialmente útil para gsap-timeline para UI Design quando você precisa converter uma narrativa visual em uma estrutura concreta de timeline.

O que torna este skill diferente

O principal valor não é “como animar”, e sim como posicionar corretamente as etapas da animação. O guia de gsap-timeline foca na sequência padrão, no parâmetro de posição e no comportamento de playback para ajudar você a evitar suposições frágeis de timing. Se você precisa de controle por scroll, easing de propriedade única ou integração específica com React, outro skill de GSAP costuma ser um ponto de partida melhor.

Como usar o skill gsap-timeline

Instale e ative

Use o fluxo de instalação do diretório para a etapa de install do gsap-timeline e, depois, anexe o skill à tarefa antes de redigir código ou prompts. Um comando típico de instalação é:
npx skills add greensock/gsap-skills --skill gsap-timeline
Depois disso, leia o conteúdo do skill primeiro para que o modelo tenha as regras corretas de sequência antes de gerar o código da animação.

Leia primeiro a fonte certa

Comece por SKILL.md em skills/gsap-timeline. Neste repositório, esse é o único arquivo-fonte, então o caminho mais rápido é lê-lo por completo em vez de procurar pastas de suporte que não existem aqui. Preste atenção especial a:

• quando o skill deve ser usado
• como funcionam os padrões de criação de timeline
• as formas do parâmetro de posição
• as observações sobre playback e aninhamento de timelines

Transforme um pedido vago em um prompt útil

O skill rende melhor quando seu prompt inclui o objetivo da animação, os elementos afetados, a ordem desejada e quaisquer regras de sobreposição. Compare:

• Fraco: “Faz isso animar bem com GSAP.”
• Forte: “Use gsap-timeline para revelar o heading principal, depois aplicar stagger nos cards, e então fazer o CTA aparecer 0,2s antes de os cards terminarem. Mantenha a sequência legível e nomeie os beats principais.”

Para o uso de gsap-timeline, inclua a intenção de timing, como “overlap”, “after”, “at the same time” ou um label nomeado. Isso permite que o modelo escolha a sintaxe de posição correta em vez de adivinhar.

Workflow que evita timelines ruins

Primeiro, desenhe o motion em beats; depois, mapeie cada beat para uma etapa da timeline. Se a animação tiver ramificações, seções repetidas ou estados de entrada/saída reutilizáveis, peça labels e timelines aninhadas logo no começo. Se você estiver criando motion de UI, especifique se a animação precisa ser reversível, interrompível ou vinculada ao ciclo de vida do componente, porque isso muda a estrutura ideal da timeline.

FAQ do skill gsap-timeline

O gsap-timeline é só para usuários avançados de GSAP?

Não. Ele é amigável para iniciantes, desde que você consiga descrever a sequência com clareza. A principal curva de aprendizado é entender que as timelines, por padrão, vão sendo anexadas em sequência e que o parâmetro de posição controla onde cada etapa entra. Se você consegue explicar a ordem das mudanças na sua UI, o skill normalmente já é suficiente para gerar um primeiro rascunho funcional.

Quando não devo usá-lo?

Não use gsap-timeline quando você só precisa de um tween único, easing básico ou orquestração acionada por scroll. Nesses casos, gsap-core, gsap-scrolltrigger ou gsap-react podem ser uma escolha melhor. O skill gsap-timeline é mais forte quando as relações de timing são o verdadeiro desafio.

Isso é melhor do que um prompt genérico?

Um prompt genérico costuma gerar timelines que animam na ordem certa, mas com lógica de posicionamento fraca. O guia de gsap-timeline oferece ao modelo o vocabulário de que ele precisa — comportamento padrão de append, offsets relativos, labels e âncoras de início/fim — para que a saída fique mais previsível e mais fácil de manter.

Ele ajuda em fluxos de UI design?

Sim, especialmente quando o handoff de design descreve motion em texto em vez de código. Para gsap-timeline para UI Design, o skill ajuda a transformar “o heading aparece, os cards entram em cascata, o botão estabiliza por último” em um plano de animação estruturado, com timing explícito em vez de uma sequência solta.

Como melhorar o skill gsap-timeline

Forneça a intenção de timing, não só o resultado

O maior salto de qualidade vem de dizer onde a sobreposição é permitida. Por exemplo, diga “inicie o subtítulo 0,15s depois que o heading começar” em vez de “deixa suave”. Se a sequência precisar de um label, mencione isso no prompt para que o modelo possa ancorar as etapas seguintes de forma consistente.

Dê o contexto de motion que muda a estrutura

Mencione se a timeline é para carregamento da página, interação de hover, abrir/fechar modal, onboarding ou loop repetido. Uma entrada única pode ser simples; uma interação reversível pode exigir um gerenciamento de estado mais limpo e menos suposições implícitas. É aqui que o skill gsap-timeline é mais útil: ele transforma intenção em uma sequência estável, e não apenas em código de animação.

Fique atento aos erros mais comuns

Os deslizes mais frequentes são usar tempo absoluto demais, esquecer que os tweens são anexados por padrão e misturar preocupações de animação sem relação entre si em uma única timeline. Se a primeira saída parecer estranha, peça a mesma sequência reescrita com labels, menos segundos fixos ou pontos de sobreposição explícitos. Isso normalmente melhora a clareza mais do que pedir apenas “uma animação melhor”.

Itere com edições concretas

Depois do primeiro rascunho, refine o prompt nomeando os elementos, adicionando um ritmo preferido e especificando restrições como redução de movimento, responsividade ou reutilização. Bons prompts de continuação incluem:

• “Mantenha a mesma estrutura de gsap-timeline, mas faça a seção do meio sobrepor em 0,25s.”
• “Reescreva isso com labels para eu conseguir manter depois.”
• “Adapte isso para um componente reutilizável e mantenha a timeline fácil de reverter.”