gsap-timeline

gsap-timeline is a reusable AI skill focused on a specific workflow. description: 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).

The skill packages instructions, conventions, and task-specific guidance so an agent can execute the job more consistently. 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**. const tl = gsap.timeline();

In practice, this skill is best suited for users who need repeatable execution with fewer setup steps and less ambiguity. 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.