gsap-timeline
Official GSAP skill for timelines: gsap.timeline, the position parameter, nesting and playback control for sequencing animations.
- Kind
- Skill
- Works with
- Claude Code, Cursor
- Languages
- TypeScript / JavaScript
- Source
- GSAP skills (GreenSock) @ aed9cfd32777
- Path
- skills/gsap-timeline/SKILL.md
- Jobs
- Implementation
- Topics
- Motion graphics
Credit
- Made by
- greensock
- Original
- github.com/greensock/gsap-skills/blob/aed9cfd3277740755f6bfc1…
- License
- MIT
Listed by Skill Manifest; not made by us.
InstallInstall it with npx.
npx skills add https://github.com/greensock/gsap-skills
Install factsScanned 2 Nov 2026
- Adds
- .claude/skills/gsap-timeline/ (the skill folder)
- Runs scripts
- None found
- Uses the network
- None found
- Needs secrets
- None found
- Source revision
- aed9cfd32777
- Licence
- MIT
- Last activity
- 29 Jul 2026
- Review
- Reviewed
Found by a static scan of the stored text; nothing is run. “None found” is not a guarantee, so read what you install before you run it.
- Only the main file is read; other files in the folder are not scanned
# 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.
…