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

GSAP Timeline Skill.

Uma skill do Claude Code e Codex para movimento e vídeo: timelines gSAP: parâmetro de posição, aninhamento e controle de reprodução.

  • Motion e Vídeo
  • Código de UI
Baixar OpenDesignVer guia de uso
greensock/gsap-skills · skills/gsap-timeline/SKILL.mdSKILL.md
--- name: gsap-timeline description: Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines). --- ## When to Use This Skill ## Creating a Timeline ## Position Parameter ## Timeline Defaults ## Timeline Options (constructor) ## Labels
Front matter e cabeçalhos de seção lidos do arquivo upstream em 2026-09-14 · 4.338 caracteres no total

01 O que faz

O Que o Skill gsap-timeline 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

Um skill oficial do GSAP para sequenciar animações com gsap.timeline(). Ele aborda a criação de uma timeline e o encadeamento de tweens que, por padrão, são anexados em sequência, e depois o reposicionamento deles com o parâmetro position — segundos absolutos, deslocamentos relativos "+=0.5"/"-=0.2", labels e posicionamento com "<"/">".

Documenta as opções do construtor de timeline (paused, repeat, yoyo, onComplete/onStart/onUpdate, defaults), o uso de labels com addLabel() e a navegação com play()/tweenFromTo(), o encaixe de timelines filhas em uma timeline principal, e os métodos de reprodução, incluindo restart, time, progress e kill. Termina com as boas práticas do GSAP e as armadilhas a evitar, principalmente encadear com delay e colocar ScrollTrigger em tweens dentro de uma timeline.

O que ele produz

  • Um objeto de timeline armazenado em uma variável, o tl em todos os exemplos, ao qual os tweens encadeados são adicionados e sobre o qual os métodos de reprodução atuam.
  • Um novo Tween retornado por tweenFromTo que anima o playhead entre dois labels enquanto a timeline está pausada, sem ease.
  • Uma timeline finalizada: chamar kill() remove a timeline e, por padrão, também seus filhos.
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Criar uma Timeline e Encadear Tweens

    Chame gsap.timeline() e encadeie chamadas .to(). Sem uma position informada, cada tween é anexado após o anterior terminar, então a ordem é a mesma em que você os escreve.

  2. 02
    Posicione Cada Tween no Tempo

    O posicionamento é definido pelo terceiro argumento ou por uma propriedade position em vars: segundos absolutos, deslocamentos relativos, nomes de labels, ou < e > em relação à animação adicionada mais recentemente.

  3. 03
    Defina Valores Padrão Compartilhados para a Timeline

    Os valores padrão passados ao construtor da timeline são combinados a cada tween filho, então duration e ease são declarados uma única vez para toda a sequência.

  4. 04
    Rotule momentos-chave

    addLabel() marca um ponto nomeado na linha do tempo, e esse rótulo pode depois ser usado como alvo de posição para tweens posteriores, em vez de um número bruto.

  5. 05
    Aninhe linhas do tempo dentro de uma mestra

    Uma linha do tempo mestra pode receber uma linha do tempo filha como uma unidade e posicioná-la em um momento, e os tweens seguintes passam a ser adicionados em relação a ela.

  6. 06
    Controle toda a sequência de uma vez

    Depois de construída, a linha do tempo é reproduzida e pausada como uma única unidade, e não tween a tween.

02 Encontre o ideal para você

Quando Usar a Skill gsap-timeline

Use a skill gsap-timeline no Claude Code ou Codex quando o trabalho for motion e vídeo deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

  • Construir uma animação de várias etapas em que vários tweens precisam rodar em sequência ou em paralelo.
  • Quando o usuário pergunta sobre linhas do tempo, sequenciamento ou animação no estilo keyframe no GSAP.
  • Linhas do tempo acionadas por scroll, que o arquivo combina com a skill scroll-trigger.

Conheça os Limites

  • Um único tween ou um ease isolado está fora do escopo; o arquivo encaminha isso para a skill principal.

O Que Fornecer

  • Um alvo e vars para cada tween filhoCada chamada .to() encadeada recebe um seletor e um objeto vars; a linha do tempo compõe tudo em uma única sequência.
  • repeat e yoyo no nível da linha do temporepeat e yoyo se comportam como nos tweens, mas valem para a linha do tempo inteira, e não para um único tween.
  • Callbacks no nível da linha do tempoonComplete, onStart e onUpdate são passados no nível da linha do tempo, então disparam para a sequência como um todo.

03 Dentro da skill

Regras que a skill gsap-timeline dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

  1. Sem encadeamento por delay

    Não encadeie animações com delay quando uma linha do tempo puder sequenciá-las; o arquivo aponta para gsap.timeline() e o parâmetro position para animações de várias etapas.

  2. Parâmetro position em vez de adivinhação

    Use sempre o parâmetro position, o terceiro argumento, para posicionar tweens em momentos específicos ou em relação a rótulos.

  3. Nomeie seus rótulos

    Adicione rótulos com addLabel() para que o sequenciamento continue legível e fácil de manter.

  4. Defaults no construtor

    Passe defaults para o construtor da linha do tempo para que os tweens filhos herdem duration, ease e vars semelhantes, em vez de repeti-los em cada tween.

  5. ScrollTrigger vai na linha do tempo

    Coloque o ScrollTrigger na linha do tempo ou no tween de nível superior, nunca em tweens dentro de uma linha do tempo.

  6. Nunca aninhe uma animação ScrollTrigger

    Animações que contêm um ScrollTrigger não devem ser aninhadas; ScrollTriggers pertencem apenas a Tweens ou Timelines de nível superior.

  7. A duração do construtor não é o tamanho da sequência

    Não leia a duration no construtor da timeline como a duration do tween — o arquivo chama isso de um erro comum.

  8. Conheça o posicionamento padrão

    ">" inicia um tween quando a animação recém-adicionada termina e é o posicionamento padrão, enquanto "<" o alinha ao início dessa animação.

04 Coloque em prática

Instalar gsap-timeline no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione gsap-timeline 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-timeline

Formato genérico da CLI skills para skills/gsap-timeline/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
I'm sequencing a [hero banner] animation: [the headline] slides up, then [the CTA button] appears 0.5s later, and [the product shot] scales in at the same start time as the button. I want shared duration and ease defaults on the timeline, and labels for the intro and outro so I can play from either one.

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:

  • Posicione o playhead em um segundo específico com tl.time(2) e confirme que cada tween começa onde o parâmetro de posição indica.
  • Verifique se os defaults realmente chegaram aos filhos: no exemplo do arquivo, ambos os tweens usam 0.5s e power2.out sem repeti-los.
  • Reproduza a partir de um nome de label para confirmar que o label foi adicionado no momento esperado.
  • Reverta para pré-visualizar a sequência de trás para frente; o arquivo mostra progress(1) antes de reverse() para que a timeline reproduza em reverso completo.

No OpenDesign gsap-timeline 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-timeline/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 classificação ou contagem de uso para gsap-timeline.
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 essa skillAplica-se a animações e sequenciamento de múltiplas etapas; faz referência cruzada às skills core, scroll-trigger e React.
  2. Criando uma timelinegsap.timeline() com chamadas .to() encadeadas; os tweens são adicionados em sequência por padrão, a menos que sejam reposicionados.
  3. Parâmetro de posiçãoTerceiro argumento ou propriedade vars: offsets absolutos, relativos, labels e posicionamento com colchetes angulares.
  4. Defaults da timelineOs defaults passados ao construtor da timeline são herdados por todos os tweens filhos.
  5. Opções da timeline (construtor)paused, repeat, yoyo, callbacks no nível da timeline e o objeto defaults passado aos filhos.
  6. LabelsaddLabel(), depois play() e tweenFromTo() para iniciar a partir de pontos rotulados.
  7. Aninhando timelinesUma timeline principal pode conter timelines filhas via master.add(child, 0).
  8. Controlando a reproduçãoplay, pause, reverse, restart, time, progress e kill listados para a timeline.
  9. Boas práticas oficiais do GSAPCinco práticas com marca de confirmação: timelines em vez de delays, parâmetro de posição, labels, defaults, ScrollTrigger de nível superior.
  10. Não façaQuatro erros marcados com X, incluindo encadeamento de delays, defaults ignorados e ScrollTriggers aninhados.
A Descrição da Própria Skill
"Skill oficial do GSAP para timelines — gsap.timeline(), parâmetro position, aninhamento, reprodução. Use ao sequenciar animações, coreografar keyframes, ou quando o usuário perguntar sobre sequenciamento de animação, timelines ou ordem de animação (no GSAP ou ao recomendar uma biblioteca que suporte timelines)."

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

06 Antes de instalar

Perguntas sobre a skill gsap-timeline

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Como construo uma timeline que não começa até eu acioná-la?

Crie-a com paused: true no construtor, o que deixa a timeline pausada, e depois chame .play() quando quiser que ela seja executada.

GSAP Timeline

Execute gsap-timeline em uma Tarefa Real de Motion e Vídeo.

A skill gsap-timeline vem incluída no OpenDesign. Baixe o aplicativo, escolha a 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-timeline