Guide · Agent skill
How to use the GSAP Timeline Sequencing agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The GSAP Timeline Sequencing skill (gsap-timeline) teaches an AI agent how to build multi-step animations with the GSAP animation library using its timeline system. It is for front-end developers and designers who want working GSAP code for ordered or overlapping animations. After this guide you will know what the skill does, how to install it, how to ask for timeline work in plain language, and what to check in the code it produces.
GSAP Timeline Sequencinggreensock/gsap-skills · MIT Download the skill Quick start
- 1Download and unzip. Download the skill ZIP from this page and unzip it so the folder containing SKILL.md is in place.
- 2Choose where to install. Put the folder in ~/.claude/skills/ for all projects, or in the project's .claude/skills/ folder for one project. In the Claude apps, upload it under Settings → Capabilities → Skills.
- 3Confirm GSAP is installed. Make sure the gsap library is in your project, because the generated code calls gsap.timeline().
- 4Describe the sequence. Ask for the animation in plain language, naming the elements, their order and any overlaps or pauses.
- 5Review the code. Check that the agent used the position parameter and labels rather than chained delays, and that shared settings are in defaults.
- 6Test playback. Run the page and check play, pause, reverse and seek behaviour with the controls the agent added.
What the gsap-timeline skill makes the agent do
Once installed, the agent knows the GSAP timeline system well enough to choreograph multi-step web animations. It can chain animations in order, place them at exact times or relative to labels and other animations, share default settings across steps, nest timelines inside each other, and control playback with play, pause, reverse, seek and kill.
The skill also follows GSAP's official best practices, such as using the position parameter instead of chained delays, and adding labels so the sequence stays readable.
- Chain tweens so they run one after another by default
- Place tweens at absolute times, relative offsets, labels or the start or end of another animation
- Pass shared defaults such as duration and ease into the timeline
- Nest child timelines inside a master timeline
- Control playback: play, pause, reverse, restart, seek by time or progress, and kill
Install the skill from the ZIP or the Claude apps
Download the ZIP for this skill from this page and unzip it. The skill is a folder containing a file named SKILL.md. To make it available across your projects, place the folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload
Make sure GSAP is in your project
The skill guides the agent but does not bring the library with it. The generated code calls gsap.timeline() and related functions, so the gsap library must already be installed in the project you are working on. Without it, the code will not run.
Trigger the skill with natural requests
You do not need a special command. The skill is meant to be used when you ask about sequencing animations, choreographing keyframes, animation order, or timelines in GSAP. Describe the sequence in plain terms: what moves, in what order, and how the steps overlap.
Mention the elements and the timing you want. The more specific you are about overlaps and pauses, the more precise the position parameters will be.
- Animate the three cards in order, each starting 0.2 seconds after the last one ends
- Make the logo fade out at the same time the menu slides in
- Build a timeline for a hero intro with labels for each stage
- Add a reverse button that plays my existing GSAP timeline backwards
Example: a sequenced intro animation
The skill's basic pattern creates a timeline and appends tweens. Each tween starts when the previous one ends unless you set a position. Here is the basic form from the skill:
- Each tween is appended by default
- Use the position parameter to overlap or offset tweens
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 });Use the position parameter, labels and defaults
The position parameter is the third argument of a tween, or the position property in its vars. A number is an absolute time in seconds, "+=0.5" is relative to the end of the last animation, and "<" starts with the recently added animation. Labels let you name points in the sequence so the code is easier to maintain. Defaults are merged into every child tween, so you do not repeat shared settings.
- Absolute: 1 starts at 1 second
- Relative: "+=0.5" starts 0.5s after the last end; "-=0.2" starts 0.2s before it
- Label: "intro" or "intro+=0.3"
- Placement: "<" starts with the recently added animation; "<0.2" starts 0.2s after its start
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: "power2.out" } });
tl.addLabel("intro", 0);
tl.to(".a", { x: 100 }, "intro");
tl.to(".b", { y: 50 }, "<0.2");
tl.addLabel("outro", "+=0.5");
tl.to(".c", { opacity: 0 }, "outro");Nest timelines and control playback
A timeline can contain other timelines. Build the child separately, then add it to a master timeline at a chosen position. Playback methods then apply to the whole structure from the master. Keep ScrollTrigger on top-level timelines only; the skill's guidance is to avoid putting a ScrollTrigger on animations nested inside another timeline.
- tl.play() and tl.pause()
- tl.reverse(), or tl.progress(1) followed by tl.reverse()
- tl.restart() to start from the beginning
- tl.time(2) seeks to 2 seconds; tl.progress(0.5) seeks to 50%
- tl.kill() removes the timeline and, by default, its children
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");What people use it for
- Staggering a sequence of cards or list items so they appear one after another
- Building a hero section intro with named stages such as intro and outro
- Overlapping a logo fade with a menu slide using the "<" placement
- Nesting a reusable child timeline inside a page-level master timeline
- Adding play, reverse and restart buttons to an existing timeline
Frequently asked questions
Is the GSAP timeline skill free to use?
The skill is published under the MIT licence, as stated on this page. GSAP itself must be installed separately in your project, and the skill does not include or bring the library with it.
What do I need before installing this skill?
You need the gsap library installed in the project, because the generated code calls gsap.timeline() and related functions. You also need a way to load the skill, either the .claude/skills or ~/.claude/skills folder or the Claude apps under Settings → Capabilities → Skills.
Does this skill run scripts or use the network?
According to this page, the skill does not run scripts and does not use the network. It consists of a SKILL.md file with guidance for the agent.
Where do I put the skill folder?
Unzip the downloaded ZIP into ~/.claude/skills/ to make it available in all your projects, or into the project's .claude/skills/ folder to use it in one project. In the Claude apps, upload it under Settings → Capabilities → Skills.
Can this skill handle ScrollTrigger animations?
Only in a basic way. The skill covers the rule of keeping ScrollTrigger on top-level timelines or tweens and does not cover ScrollTrigger details. For scroll-driven work, the source points to the separate gsap-scrolltrigger skill.
Why does the agent use labels and the position parameter instead of delays?
The skill follows GSAP's official best practices, which recommend the position parameter and labels for sequencing. This keeps timing in one place and makes the sequence easier to read and change than many chained delay values.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you build multi-step GSAP animations and want an agent to write ordered, labelled timeline code with sensible playback controls. Pick something else if your project does not use GSAP, you do not need animation, or your main job is scroll-driven animation, where the related ScrollTrigger skill is the better fit.
Download the skill