What is the gsap-timeline skill?
gsap-timeline is an official SKILL.md in the greensock/gsap-skills repository for multi-step GSAP animation. It teaches an AI coding agent to build gsap.timeline() sequences with the position parameter, labels, defaults and nesting, and to avoid chaining delay values or putting ScrollTrigger on child tweens.
gsap-timeline is the sequencing skill in the official greensock/gsap-skills set. It is a short SKILL.md that applies when an agent builds multi-step animation, coordinates several tweens, or answers questions about timelines and keyframe-style motion.
It sits beside gsap-core, which covers single tweens. The skill says to use gsap-core for eases and tweens, gsap-scrolltrigger for scroll-driven timelines and gsap-react for React.
What changes in your agent's output
- Steps in a sequence live in one
gsap.timeline()instead of separate tweens with growingdelayvalues. - Timing uses the position parameter: an absolute number,
+=0.5,-=0.2, a label, or<and>to align with the previous tween. - Shared duration and ease go into the timeline's
defaultsobject so child tweens inherit them. - Named moments use
addLabel(), which keeps long sequences readable and lets you start playback from a label. - A ScrollTrigger sits on the timeline or a top-level tween, never on a tween inside the timeline.
What the skill covers
It documents timeline constructor options (paused, repeat, yoyo, callbacks and defaults), nesting one timeline inside another with add(), and playback methods such as play, reverse, restart, time, progress and kill.
It also warns that a timeline's duration comes from its children, so a duration passed to the constructor is not the same as a tween duration.
Who the gsap-timeline skill is for
Best for
- Hero intros, loaders and onboarding sequences with several coordinated steps.
- Agents that stack
delay: 1.2,delay: 1.5and so on, then break when one duration changes. - Animations you need to pause, reverse, seek or restart from code.
Not for
- One-off tweens, which gsap-core already handles.
- Deciding what the motion should feel like. animation-vocabulary and improve-animations work on that side.
- Scroll-linked sequences without the ScrollTrigger rules in gsap-scrolltrigger.
How to install GSAP Timeline Skill: Sequencing Rules for AI Agents
git clone https://github.com/greensock/gsap-skills.git/plugin marketplace add greensock/gsap-skills, which the README documents.Clone the repository
Run
git clone https://github.com/greensock/gsap-skills.git. The skill is the skills/gsap-timeline folder, which holds one SKILL.md.Copy the skill folder
Copy skills/gsap-timeline into your agent's skills directory. The README lists ~/.claude/skills/ for Claude Code, ~/.cursor/skills/ for Cursor, ~/.config/opencode/skills/ for OpenCode and ~/.codex/skills/ for OpenAI Codex.
Install GSAP in the project
The skill guides the agent's code but does not add the library. Add the gsap package to your project with your package manager. It includes every plugin.
Ask for animation work
Describe the motion you want, such as a staggered card entrance, and name the skill if your agent needs a nudge.
Check that it loaded
Ask the agent for a four-step hero intro. The result should be one gsap.timeline() with defaults, position parameters or labels, and no growing delay values.
Key features
- Timeline creationTweens added with
.to(),.from()and.fromTo()are appended one after another by default, so order in code is order in time. - Position parameterThe third argument places a tween at an absolute time, relative to the end (
+=or-=), at a label, or against the previous tween with<,>and<0.2. - Timeline defaults
defaults: { duration: 0.5, ease: 'power2.out' }is merged into every child tween so the sequence stays consistent. - Constructor options
paused: truecreates a stopped timeline.repeat,yoyoandonComplete,onStartandonUpdateapply to the whole timeline. - Labels
addLabel()names a point in time. Tweens can target it,play('outro')starts from it andtweenFromTo()animates the playhead between two labels. - NestingA child timeline is added to a master timeline with
master.add(child, 0), so a complex scene is built from small named pieces. - Playback controlThe skill lists
play,pause,reverse,restart,time(2),progress(0.5)andkill, which also kills child tweens by default. - Delay avoidanceIt tells the agent to prefer a timeline and the position parameter over chaining animations with
delay. - ScrollTrigger placementPut the ScrollTrigger on the timeline or a top-level tween. Nesting ScrollTriggered animations inside a parent timeline is on the Do Not list.
Frequently asked questions
What is the gsap-timeline skill?
It is the skills/gsap-timeline folder in the greensock/gsap-skills repository. Its SKILL.md teaches an AI coding agent how to sequence GSAP animation with timelines, the position parameter, labels, defaults, nesting and playback methods, and what to avoid.
How do I install gsap-timeline?
Clone greensock/gsap-skills and copy skills/gsap-timeline into your agent's skills folder, then add the gsap package to your project. The repository README lists folder paths for Claude Code, Cursor, OpenCode and OpenAI Codex.
What is the GSAP position parameter?
It is the third argument on a timeline tween that sets when it starts. The skill lists an absolute time, +=0.5 after the end, -=0.2 before the end, a label, and < or > against the previous tween.
Should I chain delays or use a timeline?
The skill says to use a timeline. Chained delays break when one duration changes, while a timeline with the position parameter keeps steps relative to each other. The Do Not list names chaining with delay explicitly.
Can I put ScrollTrigger inside a timeline?
The skill says to put ScrollTrigger on the timeline itself or a top-level tween, not on a child tween. Its example is gsap.timeline({ scrollTrigger: {...} }). See gsap-scrolltrigger for the rest of the scroll rules.
Does the skill cover React cleanup?
No. It points to gsap-react for useGSAP, scope and cleanup on unmount. gsap-timeline stays on sequencing only, so each skill in the repository keeps one clear job and the agent loads just what it needs.
Does it work with Cursor and Codex?
The repository README says its skills work with Cursor, Claude Code, Codex, Windsurf, Copilot and Google Antigravity. It gives clone-and-copy folders for several of them, so you can place skills/gsap-timeline where your agent loads skills.