gsap-timeline
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).
Profile →npx skills add nexu-io/open-design --skill gsap-timeline --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# GSAP Timeline > Curated from GreenSock's official GSAP skills: https://github.com/greensock/gsap-skills ## 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
- When to Use This Skill
- Creating a Timeline
- Position Parameter
- Timeline Defaults
- Timeline Options (constructor)
- Labels
- Nesting Timelines
- Controlling Playback
- Official GSAP Best practices
- Do Not
What does the gsap-timeline skill do?
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).
How do I install it?
Run `npx skills add nexu-io/open-design --skill gsap-timeline --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.