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).
gsap-timeline is the official GSAP skill (MIT-licensed, curated from GreenSock's gsap-skills repository) that teaches an agent how to sequence and choreograph animations using gsap.timeline(). Unlike most entries in this catalogue, it contains substantial inline reference material rather than only a pointer to an upstream repo. It solves the problem of coordinating multi-step animations cleanly: instead of chaining tweens with fragile delay values, it shows how to build timelines that append, overlap, and nest tweens with precise control.
The skill documents the core GSAP timeline API in depth. It covers creating timelines, the position parameter (absolute times, relative offsets like "+=0.5" and "-=0.2", label-relative positions, and placement tokens such as "<" and ">"), timeline-level defaults so child tweens inherit duration and ease, constructor options (paused, repeat, yoyo, and onStart/onUpdate/onComplete callbacks), labels via addLabel(), nesting timelines with add(), and playback control (play, pause, reverse, restart, time(), progress(), kill()). It also includes GreenSock's own best-practice and anti-pattern guidance, notably that ScrollTrigger belongs on the top-level timeline or tween rather than on nested tweens.
Target users are front-end and creative developers building animated web interfaces, prototypes, and motion-heavy landing pages. It is most useful when sequencing several tweens in parallel or in order, choreographing keyframe-style motion, and maintaining readable animation code. Related sibling skills mentioned include gsap-core for single tweens, gsap-scrolltrigger for scroll-driven timelines, and gsap-react for React integration.
When building multi-step animations, coordinating several tweens in sequence or parallel, or answering questions about timelines, sequencing, or keyframe-style animation in GSAP.
Use the position parameter (the third argument or vars property): an absolute number for seconds, relative offsets like "+=0.5" or "-=0.2", a label name, or placement tokens "<" and ">" that align to the previously added animation's start or end.
Pass a defaults object into the timeline constructor, for example defaults with duration and ease; every child tween inherits those values.
It advises putting ScrollTrigger on the timeline or top-level tween, not on tweens nested inside a timeline. For scroll-driven timelines specifically, it points to the separate gsap-scrolltrigger skill.
MIT, curated from GreenSock's official gsap-skills repository.
Quick Setup:
.claude/skills/Repository
nexu-io/open-design