New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

GSAP Timeline

by greensock in greensock/gsap-skills

Teaches the GSAP timeline API for sequencing animations: gsap.timeline(), the position parameter, labels, defaults, nesting and playback control.

MITAuto-check passedFrontend & Design

Install GSAP Timeline

skills CLI
$ npx skills add greensock/gsap-skills --skill gsap-timeline -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install greensock/gsap-skills gsap-timeline --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/greensock/gsap-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/gsap-timeline .claude/skills/gsap-timeline && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
gsap-timeline
GitHub stars
16k
Used in
3 other repos
Token cost
~1.1k tokens
SKILL.md length
353 words
Files
1
Skills in repo
8
Repo updated
First seen
Licence
MIT

At a glance

Teaches the GSAP timeline API for sequencing animations: gsap.timeline(), the position parameter, labels, defaults, nesting and playback control.

  • Sequencing several animations one after another or in parallel
  • SKILL.md covers When to Use This Skill, Creating a Timeline, Position Parameter and Timeline Defaults, plus 6 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Choreographing keyframe-style animation in GSAP

What it does

This is the GSAP project's own guidance on timelines. It shows how to create a timeline with gsap.timeline() and chain tweens, which are appended one after another by default, and how the position parameter in the third argument places a tween at an absolute time, relative to the end of the previous one, at a label, or relative to the start or end of the most recently added animation.

It also covers passing defaults so every child tween shares a duration and ease, constructor options such as paused, repeat and yoyo, the onComplete, onStart and onUpdate callbacks, labels added with addLabel, nesting timelines inside a master timeline, and playback control such as play, pause and reverse. Related skills it names are gsap-core for single tweens and eases, gsap-scrolltrigger for scroll-driven timelines and gsap-react for React.

When your agent uses it

  • Sequencing several animations one after another or in parallel
  • Choreographing keyframe-style animation in GSAP
  • Fixing timing or ordering problems in an existing GSAP timeline
  • Nesting timelines and controlling their playback

Example prompts

  • “Animate the hero heading, subtitle and button in sequence with a GSAP timeline.”
  • “Make the third tween start at the same time as the second one.”
  • “Pause the intro timeline and reverse it when the user clicks close.”

Requirements

  • The GSAP library in the project

What it can do on your machine

Read from SKILL.md and the folder at commit aed9cfd. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

GSAP Timeline loads about 1.1k tokens when it runs. Until then it costs about 77 tokens; SKILL.md has 353 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~77
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from greensock/gsap-skills at commit aed9cfd, republished under its MIT licence (© greensock). 353 words, ~1,085 tokens.

Download SKILL.mdSave it as .claude/skills/gsap-timeline/SKILL.md (or your agent's skills folder).
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).
license
MIT

GSAP Timeline

When to Use This Skill

Apply when building multi-step animations, coordinating several tweens in sequence or parallel, or when the user asks about timelines, sequencing, or keyframe-style animation in GSAP.

Related skills: For single tweens and eases use gsap-core; for scroll-driven timelines use gsap-scrolltrigger; for React use gsap-react.

Creating a Timeline

javascript
const tl = gsap.timeline();
tl.to(".a", { x: 100, duration: 1 })
  .to(".b", { y: 50, duration: 0.5 })
  .to(".c", { opacity: 0, duration: 0.3 });

By default, tweens are appended one after another. Use the position parameter to place tweens at specific times or relative to other tweens.

Position Parameter

Third argument (or position property in vars) controls placement:

  • Absolute: 1 — start at 1 second.
  • Relative (default): "+=0.5" — 0.5s after end; "-=0.2" — 0.2s before end.
  • Label: "labelName" — at that label; "labelName+=0.3" — 0.3s after label.
  • Placement: "<" — start when recently-added animation starts; ">" — start when recently-added animation ends (default); "<0.2" — 0.2s after recently-added animation start.

Examples:

javascript
tl.to(".a", { x: 100 }, 0);           // at 0
tl.to(".b", { y: 50 }, "+=0.5");      // 0.5s after last end
tl.to(".c", { opacity: 0 }, "<");     // same start as previous
tl.to(".d", { scale: 2 }, "<0.2");    // 0.2s after previous start

Timeline Defaults

Pass defaults into the timeline so all child tweens inherit:

javascript
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
tl.to(".a", { x: 100 }).to(".b", { y: 50 }); // both use 0.5s and power2.out

Timeline Options (constructor)

  • paused: true — create paused; call .play() to start.
  • repeat, yoyo — same as tweens; apply to whole timeline.
  • onComplete, onStart, onUpdate — timeline-level callbacks.
  • defaults — vars merged into every child tween.

Labels

Add and use labels for readable, maintainable sequencing:

javascript
tl.addLabel("intro", 0);
tl.to(".a", { x: 100 }, "intro");
tl.addLabel("outro", "+=0.5");
tl.to(".b", { opacity: 0 }, "outro");
tl.play("outro");  // start from "outro"
tl.tweenFromTo("intro", "outro"); // pauses the timeline and returns a new Tween that animates the timeline's playhead from intro to outro with no ease.

Nesting Timelines

Timelines can contain other timelines.

javascript
const master = gsap.timeline();
const child = gsap.timeline();
child.to(".a", { x: 100 }).to(".b", { y: 50 });
master.add(child, 0);
master.to(".c", { opacity: 0 }, "+=0.2");

Controlling Playback

  • tl.play() / tl.pause()
  • tl.reverse() / tl.progress(1) then tl.reverse()
  • tl.restart() — from start.
  • tl.time(2) — seek to 2 seconds.
  • tl.progress(0.5) — seek to 50%.
  • tl.kill() — kill timeline and (by default) its children.
Show full SKILL.md (134 more words)Show less

Official GSAP Best practices

  • ✅ Prefer timelines for sequencing
  • ✅ Use the position parameter (third argument) to place tweens at specific times or relative to labels.
  • ✅ Add labels with addLabel() for readable, maintainable sequencing.
  • ✅ Pass defaults into the timeline constructor so child tweens inherit duration, ease, etc.
  • ✅ Put ScrollTrigger on the timeline (or top-level tween), not on tweens inside a timeline.

Do Not

  • ❌ Chain animations with delay when a timeline can sequence them; prefer gsap.timeline() and the position parameter for multi-step animation.
  • ❌ Forget to pass defaults (e.g. defaults: { duration: 0.5, ease: "power2.out" }) when many child tweens share the same duration or ease.
  • ❌ Forget that duration on the timeline constructor is not the same as tween duration; timeline “duration” is determined by its children.
  • ❌ Nest animations that contain a ScrollTrigger; ScrollTriggers should only be on top-level Tweens/Timelines.

© greensock, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/gsap-timeline of greensock/gsap-skills.

Open the folder on GitHubat commit aed9cfd

Used in 4 other repositories

We found 4 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in greensock/gsap-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

GSAP Timeline next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

GSAP Timeline compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
GSAP Timeline this skillgreensock/gsap-skills16k3 repos~1.1kAutomated safety check: PassMIT
Gsapboraoztunc/skills3985 repos~1.9kAutomated safety check: PassApache-2.0
Auteuragiwhitelist/auteur1k—~5kAutomated safety check: PassMIT
Motion DesignLottieFiles/motion-design-skill2.1k—~3.1kAutomated safety check: PassMIT
Animate Textpixel-point/animate-text1491 repos~1.6kAutomated safety check: PassNone
Silk Designbendrape1-byte/silk-design138—~1.8kAutomated safety check: PassMIT

Similar skills

  • Gsap

    boraoztunc/skills

    GSAP animation reference for HyperFrames. An agent skill from boraoztunc/skills.

    398 GitHub starsUsed in 5 repos~1.9k tokens
    Frontend & DesignAuto-check passed

  • Auteur

    agiwhitelist/auteur

    Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…

    1k GitHub stars~5k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Motion Design

    LottieFiles/motion-design-skill

    Applies motion design principles to create emotionally-driven, technically sound animations and transitions.

    2.1k GitHub stars~3.1k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

  • Animate Text

    pixel-point/animate-text

    Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps.

    149 GitHub starsUsed in 1 repo~1.6k tokens
    Frontend & DesignAuto-check passed

  • Silk Design

    bendrape1-byte/silk-design

    Build websites and web UI with smooth, polished, high-end motion by default — the buttery feel of premium sites, not static slop.

    138 GitHub stars~1.8k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Phantom Motion

    pixelxzen/phantom-motion

    交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词， 通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器， 实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。

    185 GitHub stars~1k tokensUpdated 4 mo ago
    Frontend & DesignAuto-check passed

More from greensock/gsap-skills

All 8 skills in this repo

  • GSAP ScrollTrigger

    greensock/gsap-skills

    Teaches an agent how to wire up GSAP's ScrollTrigger plugin for scroll-linked animation, pinned sections and scrub, including the start and end position syntax.

    16k GitHub starsUsed in 4 repos~4.6k tokens
    Auto-check passed

  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 3 repos~3.7k tokens
    Auto-check passed

  • GSAP in Vue, Nuxt and Svelte

    greensock/gsap-skills

    Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.

    16k GitHub starsUsed in 3 repos~2.6k tokens
    Auto-check passed

  • GSAP Performance Tuning

    greensock/gsap-skills

    Guides the agent to keep GSAP animations smooth by animating transforms and opacity, batching DOM reads and writes, and avoiding layout-heavy properties.

    16k GitHub starsUsed in 3 repos~1k tokens
    Auto-check passed

  • GSAP for React

    greensock/gsap-skills

    Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.

    16k GitHub starsUsed in 3 repos~1.6k tokens
    Auto-check passed

  • GSAP Utils

    greensock/gsap-skills

    Covers the gsap.utils helpers for clamping, range mapping, normalizing, snapping, randomizing and wrapping values in GSAP animations.

    16k GitHub starsUsed in 3 repos~3k tokens
    Auto-check passed

Works with

Categories

Questions about GSAP Timeline

What does GSAP Timeline do?

Teaches the GSAP timeline API for sequencing animations: gsap.timeline(), the position parameter, labels, defaults, nesting and playback control. This is the GSAP project's own guidance on timelines.timeline() and chain tweens, which are appended one after another by default, and how the position parameter in the third argument places a tween at an absolute time, relative to the end of the previous one, at a label, or relative to the start or end of the most recently added animation.

When should I use GSAP Timeline?

GSAP Timeline fits situations like: sequencing several animations one after another or in parallel; choreographing keyframe-style animation in GSAP; fixing timing or ordering problems in an existing GSAP timeline; nesting timelines and controlling their playback.

How do I install GSAP Timeline in Claude Code?

Run `npx skills add greensock/gsap-skills --skill gsap-timeline -a claude-code`. Or copy the skill folder (skills/gsap-timeline in greensock/gsap-skills) into .claude/skills/gsap-timeline in your project. Claude Code loads it when a task matches its description.

How do I install GSAP Timeline in Codex?

Run `npx skills add greensock/gsap-skills --skill gsap-timeline -a codex`. Or copy the skill folder (skills/gsap-timeline in greensock/gsap-skills) into .agents/skills/gsap-timeline in your project. Codex loads it when a task matches its description.

Can I use GSAP Timeline in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add greensock/gsap-skills --skill gsap-timeline -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gsap-timeline, .gemini/skills/gsap-timeline, .github/skills/gsap-timeline and .opencode/skills/gsap-timeline in your project.

What does GSAP Timeline need to run?

SKILL.md names no scripts, command-line tools or credentials: GSAP Timeline is instructions for the agent only. Our summary lists: The GSAP library in the project.

Does GSAP Timeline access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is GSAP Timeline safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does GSAP Timeline use?

GSAP Timeline is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does GSAP Timeline use?

About 1.1k tokens (SKILL.md is roughly 4.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to GSAP Timeline?

Skills that share tags, products or a category with GSAP Timeline: Gsap (boraoztunc/skills, 398 stars), Auteur (agiwhitelist/auteur, 1k stars), Motion Design (LottieFiles/motion-design-skill, 2.1k stars) and Animate Text (pixel-point/animate-text, 149 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains GSAP Timeline?

greensock (a GitHub organization) maintains it in greensock/gsap-skills, which has 16,110 GitHub stars. The repository holds 8 skills in this directory. The repository was last updated on July 29, 2026.

Source: greensock/gsap-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.