Kipt

GSAP timeline skill: the official sequencing skill for coding agents

The GSAP timeline skill teaches agents gsap.timeline(), the position parameter, labels, nesting and playback control. What it covers and how to install it.

By the Kipt team · Updated 24 October 2026

Source: greensock/gsap-skills · Maintainer: GreenSock · License: MIT · Checked: 24 October 2026

What is the GSAP timeline skill?

The GSAP timeline skill, gsap-timeline, is GreenSock's official Agent Skill for sequencing animations: it teaches your coding agent to build multi-step GSAP animations with gsap.timeline() and the position parameter instead of stacking delay values that break the moment one duration changes. It is for frontend developers choreographing hero intros, onboarding flows, menus or any animation with more than one step.

It is one of eight skills in greensock/gsap-skills, next to gsap-core. The SKILL.md description says: "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)."

As of 24 October 2026, its skills.sh page listed about 67,900 installs (snapshot, 24 October 2026), fourth of the eight GSAP skills. The repo had about 17,000 GitHub stars on the same date.

What does it do?

The folder holds one short SKILL.md of about 640 words, mostly code examples. There are no scripts. The agent loads it when a task involves sequencing or animation order.

What it teaches:

  • Creating a timeline. Chained tl.to() calls play one after another by default.
  • The position parameter. The third argument that places each tween: absolute seconds, "+=0.5" and "-=0.2" relative to the end, label names with offsets, and "<", ">" and "<0.2" relative to the most recently added animation.
  • Timeline defaults. gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } }) so every child inherits the same duration and ease.
  • Constructor options. paused, repeat, yoyo, timeline-level callbacks and defaults.
  • Labels. addLabel(), playing from a label with tl.play("outro"), and tl.tweenFromTo() between two labels.
  • Nesting. Building child timelines and adding them to a master timeline with master.add(child, 0).
  • Playback control. play(), pause(), reverse(), restart(), seeking with time() and progress(), and kill().

This matches GSAP's own Timeline docs, which describe a timeline as "a container for tweens and other timelines", say you can "Nest timelines within timelines as deeply as you want", and describe defaults as "A simple way to set defaults that get inherited by the child animations."

The position values the skill uses, side by side:

Value Where the tween starts
1 1 second from the start of the timeline
"+=0.5" 0.5 seconds after the timeline's end (a gap)
"-=0.2" 0.2 seconds before the end (an overlap)
"intro" At the label named intro
"intro+=0.3" 0.3 seconds after that label
"<" When the previous animation starts
">" When the previous animation ends (the default)
"<0.2" 0.2 seconds after the previous animation starts

GSAP's position parameter guide explains the same rules, including that a number after "<" or ">" is read as relative.

The skill closes with best practices and a "Do Not" list: don't chain with delay, don't forget defaults when many tweens share settings, remember that a timeline's duration comes from its children, and don't nest animations that contain a ScrollTrigger.

How do you install it?

The skills.sh page gives this command for the skills CLI:

npx skills add https://github.com/greensock/gsap-skills --skill gsap-timeline

Because the timeline skill is short and leans on gsap-core, installing the whole repo is often the better choice:

npx skills add https://github.com/greensock/gsap-skills

Claude Code plugin. The README says to run /plugin marketplace add greensock/gsap-skills. The repo's marketplace.json names its one plugin gsap-skills, so the install, in the form the Claude Code plugin docs give, is:

/plugin marketplace add greensock/gsap-skills
/plugin install gsap-skills@gsap-skills

Copy the folder. Put gsap-timeline/ in .claude/skills/ for one project or ~/.claude/skills/ for every project, per the Claude Code skills docs. Codex and Cursor read the same format; see Codex skills and Cursor skills. On claude.ai, zip the folder and upload it as the Claude help article on skills describes.

How do you use it?

Describe the sequence in plain words and let the agent place each step. Example prompts (suggestions, not quotes from the repo):

  • Build a hero intro timeline: logo fades in, headline slides up 0.2s later, then the two buttons stagger in together.
  • Refactor these five gsap.to calls with delays into one timeline with labels, so I can change one duration without breaking the rest.
  • Make the mobile menu open with a timeline and close by reversing it, starting paused.
  • Split this long page-load animation into nested child timelines for the header, hero and cards, then add them to a master timeline.
  • Add a replay button that restarts the onboarding timeline from the "step2" label.

Requirements: the gsap npm package; timelines are part of GSAP core, so no plugin registration is needed. GSAP's pricing page says "GSAP is now 100% free for all users, thanks to Webflow’s support."

Tips and limits

  • Short by design. At about 640 words it covers the essentials, not every Timeline method. For callbacks, call(), set() and other details the agent may need the Timeline docs.
  • Install it with gsap-core. Eases, transform aliases, autoAlpha and the tween vars all live in gsap-core. The timeline skill names it as the related skill for single tweens.
  • Scroll-driven timelines. Put the scrollTrigger config on the timeline, never on a tween inside it. The ScrollTrigger skill explains why and how.
  • It may suggest GSAP. The description includes "when recommending a library that supports timelines", so the agent may propose GSAP for sequencing work. Name your library up front if you use another one.
  • Timing taste is not included. The skill makes sequences correct, not well paced. For durations and easing choices in product UI, the review-animations skill adds firm rules.
  • Security audit. As of 24 October 2026, skills.sh showed Pass from Gen Agent Trust Hub, Socket and Snyk.

The SKILL.md frontmatter declares license: MIT, matching the repo's MIT LICENSE (copyright 2026 GreenSock). You can copy and change it if you keep the notice.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Paste the repo link instead and Kipt lists all eight GSAP skills to pick from; you can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with GreenSock, GSAP or Webflow.

Similar skills

Questions

What is the GSAP timeline skill?

gsap-timeline is GreenSock's official Agent Skill for GSAP timelines, published in the greensock/gsap-skills repo. It teaches a coding agent to sequence animations with gsap.timeline(), place tweens with the position parameter, use labels and defaults, nest timelines and control playback. It is MIT licensed.

How do I install the GSAP timeline skill?

Run npx skills add https://github.com/greensock/gsap-skills --skill gsap-timeline, the command on its skills.sh page. Leave off --skill to install all eight GSAP skills. In Claude Code you can also add the repo as a plugin marketplace with /plugin marketplace add greensock/gsap-skills.

What is the GSAP position parameter?

It is the optional third argument to timeline methods like tl.to(), and it sets where a tween starts. A number is an absolute time in seconds, "+=0.5" leaves a gap after the end, "-=0.2" overlaps, a label name places it at that label, and "<" starts it with the previous animation. The skill lists all of these with examples.

Should I use delay or a timeline in GSAP?

The skill says to use a timeline. Its Do Not list warns against chaining animations with delay when a timeline and the position parameter can sequence them. GSAP's timeline docs explain why: with delays, changing one duration means adjusting every later delay.

Is the timeline skill enough on its own?

It covers sequencing only. Pair it with gsap-core for the tween methods, eases and transform rules every timeline uses, gsap-scrolltrigger if the timeline is driven by scroll, and gsap-react for cleanup in React components.

More in Skill directory

All guides

Keep your prompts and skills in one place, in your own GitHub. Install every skill with one command.

Get started

Kipt is an independent product, not affiliated with or endorsed by Anthropic, OpenAI, Cursor or GitHub. Claude, ChatGPT, Codex, Cursor and GitHub are trademarks of their owners.