PlugWiki

GSAP Timeline skill for Claude Code: sequence multi-step animations

Official GSAP skill that makes Claude build multi-step animations with timelines, for developers sequencing GSAP tweens.

Installs
73.7K
on skills.sh
Stars
17.7K
on GitHub
Updated
Jul 2026
last repo commit

When you ask for animation sequencing, keyframes or a timeline, Claude loads this skill. It builds a gsap.timeline() instead of chaining delay values. It places tweens with the position parameter, adds labels, passes shared defaults, and nests timelines when a sequence has parts.

It is one text file and bundles no scripts. It also tells Claude to put ScrollTrigger on the timeline itself, not on tweens inside it.

Good for

  • Developers choreographing several GSAP tweens in order
  • Designers turning keyframe ideas into code
  • Anyone replacing chained delays with clean sequencing

Install gsap-timeline

Claude Code

  1. 1

    Copy this prompt.

    Install the gsap-timeline skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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).

Sections in SKILL.md

  1. When to Use This Skill
  2. Creating a Timeline
  3. Position Parameter
  4. Timeline Defaults
  5. Timeline Options (constructor)
  6. Labels
  7. Nesting Timelines
  8. Controlling Playback
  9. Official GSAP Best practices
  10. Do Not

Key facts

Author
GreenSock (GSAP)
Repository
greensock/gsap-skills
Installs on skills.sh
73,716 (2 Nov 2026)
GitHub stars (repo)
17,689 (2 Nov 2026)
License
MIT
Last commit (repo)
29 Jul 2026
What installs
SKILL.md only (1 file); bundles no scripts
Works in
Claude Code, Cursor, Codex, OpenCode, Google Antigravity and Pi (skill folders listed in the README); 40+ more through the skills CLI
skills.sh audits
Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

  • Tweens append one after another by default

    Claude creates a timeline and chains tweens so each starts when the last one ends.

    Read · Creating a timeline

  • Place a tween at a time, a label or relative to the last one

    Claude uses values like 1, "+=0.5", "-=0.2", "labelName", "<" and ">" as the third argument to control exactly when each tween starts.

    Try: “Make the logo fade in, then the title slide in 0.2s before the logo ends.”

    Read · Position parameter

  • Share duration and ease across child tweens

    Claude passes `defaults` to the timeline so every child tween inherits the same duration and ease.

    Read · Timeline defaults

  • paused, repeat, yoyo and timeline-level callbacks

    Claude uses options such as `paused: true`, `repeat`, `yoyo`, `onComplete`, `onStart` and `onUpdate` on the whole timeline.

    Read · Constructor options

  • Name moments with addLabel() and jump to them

    Claude adds labels for readable sequencing and uses them to play from a point or animate between two labels.

    Read · Labels

  • Put a child timeline inside a master timeline

    Claude builds small timelines and adds them to a master one at a chosen time.

    Read · Nesting timelines

  • play, pause, reverse, restart, seek and kill

    Claude uses the timeline methods to control playback, jump to a time or progress, and clean up.

    Read · Playback control

From the official docs

Questions

What does the GSAP Timeline skill do?

It makes Claude build multi-step GSAP animations with timelines. It covers the position parameter, labels, defaults, nesting and playback methods, so sequences are written as one timeline rather than chained delays.

How do I install it?

Use the install box at the top of this page. The README also documents a Claude Code plugin marketplace route (/plugin marketplace add greensock/gsap-skills) and a Cursor remote rule that point at the whole repo, which holds 8 GSAP skills. Restart your agent session afterwards so it finds the new skill.

Do I need the other GSAP skills?

No. Its SKILL.md lists gsap-core (single tweens and eases), gsap-scrolltrigger (scroll-driven timelines) and gsap-react (React) as related skills, but it does not say it requires them. The repo has 8 skills in all (gsap-core, gsap-timeline, gsap-scrolltrigger, gsap-plugins, gsap-utils, gsap-react, gsap-performance, gsap-frameworks), and the README installs them together with one skills CLI command.

Does it work in Cursor, Codex or Copilot?

Cursor and Codex: yes, the README lists both, using the skills CLI or by copying the skills folder. GitHub Copilot is different: the README says Copilot does not load Cursor or Claude skill files, so you copy its Copilot instructions file into your repo instead. The README does not mention the Claude app.

Does it need an API key or an account?

No key or account is mentioned in the SKILL.md. GSAP itself is free, including every plugin, according to the README, and installs from the public gsap npm package.

Is it safe to install?

It is low risk. It is a single text file that tells Claude how to write GSAP code, and it bundles no scripts. The repo README rates its own risk level LOW. You still read the code Claude writes before you ship it.

Information

updated Nov 2, 2026

Repository
greensock/gsap-skills
Folder
skills/gsap-timeline

greensock/gsap-skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2
  1. gsap-timeline SKILL.md · github.com
  2. greensock/gsap-skills README · github.com

Updated Nov 2, 2026.