83.3K+Download
Skip to the usage guide
gsap-timelineby GreenSock

GSAP Timeline Skill.

A Claude Code and Codex skill for motion and video: gSAP timelines: position parameter, nesting, and playback control.

  • Motion & Video
  • UI code
Download OpenDesignView usage guide
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 and section headings read from the upstream file on 2026-09-14 · 4,338 characters in full

01 What it does

What the gsap-timeline Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

An official GSAP skill for sequencing animations with gsap.timeline(). It covers creating a timeline and chaining tweens that append by default, then repositioning them with the position parameter — absolute seconds, relative "+=0.5"/"-=0.2" offsets, labels, and "<"/">" placement.

It documents timeline constructor options (paused, repeat, yoyo, onComplete/onStart/onUpdate, defaults), labelling with addLabel() and seeking with play()/tweenFromTo(), nesting child timelines in a master, and playback methods including restart, time, progress and kill. It ends with GSAP best practices and the traps to avoid, notably chaining with delay and putting ScrollTrigger on tweens inside a timeline.

What it produces

  • A timeline object stored in a variable, the tl in every example, that chained tweens are added to and playback methods act on.
  • A new Tween returned by tweenFromTo that animates the playhead between two labels while the timeline is paused, with no ease.
  • A killed timeline: calling kill() removes the timeline and by default its children too.
See the example prompt ↗

How It Works

  1. 01
    Create a Timeline and Chain Tweens

    Call gsap.timeline() and chain .to() calls. With no position supplied, each tween is appended after the previous one finishes, so order is the order you write it.

  2. 02
    Place Each Tween in Time

    Placement is set by the third argument or a position property in vars: absolute seconds, relative offsets, label names, or < and > relative to the most recently added animation.

  3. 03
    Give the Timeline Shared Defaults

    Defaults handed to the timeline constructor are merged into every child tween, so duration and ease are declared once for the whole sequence.

  4. 04
    Label Key Moments

    addLabel() marks a named point in the timeline, and that label can then be used as a position target for later tweens instead of a raw number.

  5. 05
    Nest Timelines Inside a Master

    A master timeline can take a child timeline as a unit and place it at a time, after which further tweens are added relative to it.

  6. 06
    Drive the Whole Sequence at Once

    Once built, the timeline is played and paused as a single unit rather than tween by tween.

02 Find your fit

When to Use the gsap-timeline Skill

Use the gsap-timeline skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Building a multi-step animation where several tweens must run in sequence or in parallel.
  • When the user asks about timelines, sequencing, or keyframe-style animation in GSAP.
  • Scroll-driven timelines, which the file pairs with the scroll-trigger skill.

Know the Boundaries

  • A single tween or an ease on its own is out of scope; the file routes that to the core skill.

What to Provide

  • A target and vars for each child tweenEvery chained .to() call takes a selector and a vars object; the timeline composes those into one sequence.
  • Timeline-level repeat and yoyorepeat and yoyo behave as they do on tweens but apply to the whole timeline rather than one tween.
  • Timeline-level callbacksonComplete, onStart and onUpdate are passed at timeline level, so they fire for the sequence as a whole.

03 Inside the skill

Rules the gsap-timeline Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. No Delay Chaining

    Do not chain animations with delay when a timeline can sequence them; the file points to gsap.timeline() and the position parameter for multi-step animation.

  2. Position Parameter Over Guessing

    Always use the position parameter, the third argument, to place tweens at specific times or relative to labels.

  3. Name Your Labels

    Add labels with addLabel() so sequencing stays readable and maintainable.

  4. Defaults on the Constructor

    Pass defaults into the timeline constructor so child tweens inherit duration, ease and similar vars instead of repeating them per tween.

  5. ScrollTrigger Goes on the Timeline

    Put ScrollTrigger on the timeline or the top-level tween, never on tweens inside a timeline.

  6. Never Nest a ScrollTrigger Animation

    Animations that contain a ScrollTrigger must not be nested; ScrollTriggers belong only on top-level Tweens or Timelines.

  7. Constructor Duration Is Not Sequence Length

    Do not read duration on the timeline constructor as the tween duration — the file calls this a common mistake.

  8. Know the Default Placement

    ">" starts a tween when the recently added animation ends and is the default placement, while "<" aligns it to that animation's start.

04 Put it to work

Install gsap-timeline in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add gsap-timeline to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

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

Generic skills CLI form for skills/gsap-timeline/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your 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.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Seek the playhead to a specific second with tl.time(2) and confirm each tween starts where the position parameter intends.
  • Check that the defaults actually reached the children: in the file's example both tweens use 0.5s and power2.out without repeating them.
  • Play from a label name to confirm the label was added at the time you expect.
  • Reverse to preview the sequence backwards; the file shows progress(1) before reverse() so the timeline plays in full reverse.

In OpenDesign gsap-timeline is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Branch main
Skill file
skills/gsap-timeline/SKILL.md Content checksum recorded at verification; commit aed9cfd
License
MIT From LICENSE; SKILL.md says “MIT”.
Repository stars
15,248 GitHub snapshot taken 2026-09-14 for the whole greensock/gsap-skills repository, which contains 8 skills in this catalog. Not a rating or usage count for gsap-timeline.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. When to Use This SkillApplies to multi-step animation and sequencing; cross-references the core, scroll-trigger and React skills.
  2. Creating a Timelinegsap.timeline() with chained .to() calls; tweens append by default unless repositioned.
  3. Position ParameterThird argument or vars property: absolute, relative offsets, labels, and angle-bracket placement.
  4. Timeline DefaultsDefaults passed to the timeline constructor are inherited by every child tween.
  5. Timeline Options (constructor)paused, repeat, yoyo, timeline-level callbacks, and the defaults object handed to children.
  6. LabelsaddLabel(), then play() and tweenFromTo() to start from labelled points.
  7. Nesting TimelinesA master timeline can contain child timelines via master.add(child, 0).
  8. Controlling Playbackplay, pause, reverse, restart, time, progress and kill listed for the timeline.
  9. Official GSAP Best practicesFive checkmark practices: timelines over delays, position parameter, labels, defaults, top-level ScrollTrigger.
  10. Do NotFour cross-marked mistakes, including delay chaining, skipped defaults and nested ScrollTriggers.
The Skill's Own 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).”

Front-matter description from SKILL.md. The full file is about 4,338 characters. Read the full file on GitHub.

06 Before you install

Questions About the gsap-timeline Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

How do I build a timeline that doesn't start until I trigger it?

Create it with paused: true in the constructor, which leaves the timeline paused, then call .play() when you want it to run.

GSAP Timeline

Run gsap-timeline on a Real Motion and Video Task.

The gsap-timeline skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-timeline